'use client';
import React, { useState } from 'react';
import {
	Form,
	Input,
	Button,
	Checkbox,
	InputNumber,
	Select,
	notification,
} from 'antd';
import { useForm } from 'antd/es/form/Form';
import styles from './Vacansy.module.scss';
import { JobData } from '@/types/types';
import { fetchHardSkills, sendJobs } from '@/api/api';
import { useQuery } from 'react-query';

const { TextArea } = Input;
const { Option } = Select;

const Vacansy: React.FC = () => {
	const [form] = useForm();
	const [isSalaryNegotiable, setIsSalaryNegotiable] = useState(false); // Состояние для чекбокса

	const { data: hardSkills, isLoading } = useQuery(
		['hardSkills'],
		() => fetchHardSkills(),
		{
			refetchOnWindowFocus: false,
			retry: false,
		}
	);

	const onFinish = async (values: JobData) => {
		const jobData: JobData = {
			Job_name: values.Job_name,
			Year: values.Year,
			Qualification: values.Qualification || false,
			Time: Array.isArray(values.Time) ? values.Time : [values.Time],
			Company_name: values.Company_name,
			Salary: isSalaryNegotiable ? 0 : values.Salary, // Установка зарплаты в 0, если выбрана опция "уточняется"
			Email: values.Email,
			// Website: values.Website, // Новое поле для ссылки на сайт компании
			Archive: false,
			Responsibilities: values.Responsibilities,
			Hardskills: values.Hardskills,
		};

		try {
			const result = await sendJobs(jobData);
			console.log('Job successfully posted:', result);

			notification.success({
				message: 'Вакансия успешно создана',
				description: 'Вы можете посмотреть её на странице вакансий',
			});
			await form.resetFields();
			setIsSalaryNegotiable(false); // Сброс чекбокса
		} catch (error) {
			console.error('Failed to post job:', error);
			notification.error({
				message: 'Что-то пошло не так!',
				description: 'Попробуйте снова',
			});
		}
	};

	return (
		<div className={styles.container}>
			<Form
				form={form}
				layout='vertical'
				onFinish={onFinish}
				className={styles.form}
			>
				<Form.Item
					name='Job_name'
					label='Название вакансии'
					rules={[
						{
							required: true,
							message: 'Пожалуйста, введите название вакансии!',
						},
					]}
				>
					<Input />
				</Form.Item>

				<Form.Item
					name='Year'
					label='На каком курсе должен быть кандидат на вакансию?'
					rules={[{ required: true, message: 'Пожалуйста, укажите курс!' }]}
				>
					<Select placeholder='Выберите курс'>
						<Option value='1'>1</Option>
						<Option value='2'>2</Option>
						<Option value='3'>3</Option>
						<Option value='4'>4</Option>
						<Option value='5'>5</Option>
						<Option value='6'>6</Option>
					</Select>
				</Form.Item>

				<Form.Item name='Qualification' valuePropName='checked'>
					<Checkbox>Нужен ли опыт работы?</Checkbox>
				</Form.Item>

				<Form.Item
					name='Time'
					label='Занятость'
					rules={[
						{ required: true, message: 'Пожалуйста, укажите занятость!' },
					]}
				>
					<Select
						mode='multiple'
						style={{ width: '100%' }}
						placeholder='Выбрать часы'
					>
						<Option value='20'>20 ч/н</Option>
						<Option value='30'>30 ч/н</Option>
						<Option value='40'>40 ч/н</Option>
					</Select>
				</Form.Item>

				<Form.Item name='Salary' label='Оклад руб/мес'>
					<InputNumber
						min={0}
						style={{ width: '100%' }}
						disabled={isSalaryNegotiable}
					/>
				</Form.Item>

				<Form.Item name='isSalaryNegotiable' valuePropName='checked'>
					<Checkbox onChange={e => setIsSalaryNegotiable(e.target.checked)}>
						Зарплата уточняется после собеседования
					</Checkbox>
				</Form.Item>

				<Form.Item name='Company_name' label='Название компании'>
					<Input />
				</Form.Item>

				<Form.Item name='Website' label='Сайт компании (опционально)'>
					<Input placeholder='https://company-site.com' />
				</Form.Item>

				<Form.Item
					name='Email'
					label='Электронная почта для связи и резюме.'
					rules={[
						{
							required: true,
							message: 'Пожалуйста, введите адрес электронной почты!',
						},
						{
							type: 'email',
							message:
								'Пожалуйста, введите действительный адрес электронной почты!',
						},
					]}
				>
					<Input />
				</Form.Item>

				<Form.Item
					name='Responsibilities'
					label='Обязанности'
					rules={[
						{ required: true, message: 'Пожалуйста, укажите обязанности!' },
					]}
				>
					<TextArea rows={4} />
				</Form.Item>

				<Form.Item
					name='Hardskills'
					label='Hardskills'
					rules={[
						{ required: true, message: 'Пожалуйста, укажите hardskills!' },
					]}
				>
					<Select
						mode='multiple'
						style={{ width: '100%' }}
						placeholder='Выбрать hardskills'
						loading={isLoading}
					>
						{hardSkills?.map(skill => (
							<Option key={skill.Hard_skillID} value={skill.Title}>
								{skill.Title}
							</Option>
						))}
					</Select>
				</Form.Item>

				<Form.Item>
					<Button
						type='primary'
						htmlType='submit'
						className={styles.vacansy_btn}
					>
						Отправить
					</Button>
				</Form.Item>
			</Form>
		</div>
	);
};

export default Vacansy;