'use client';

import { useRouter, useParams } from 'next/navigation';
import { useQuery, useMutation } from 'react-query';

import { Form, Input, Button, notification, Select, Spin } from 'antd';
import { ExtendedJobData, JobData } from '@/types/types';
import { useEffect } from 'react';
import { fetchJobById, updateJob } from '@/api/api';
import { Option } from 'antd/es/mentions';
import style from './EditVacancy.module.scss'


interface EditVacancyProps {
	id: number;
}



const EditVacancy: React.FC<EditVacancyProps> = ({id}) => {
	const router = useRouter();
	const [form] = Form.useForm();

	const { data, error, isLoading } = useQuery<ExtendedJobData>(
		['job', id],
		() => fetchJobById(Number(id)),
		{
			enabled: !!id,
		}
	);

	useEffect(() => {
		if (data) {
			form.setFieldsValue({
				Job_name: data.Job_name || '',
				Year: data.Year || '',
				Qualification: data.Qualification || false,
				Time: data.Time || [''],
				Soft_skills: data.Soft_skills || '',
				Salary: data.Salary || 0,
				Email: data.Email || '',
				Archive: data.Archive || false,
				Responsibilities: data.Responsibilities || '',
				Hardskills: ['React', 'JavaScript'],
			});
		}
	}, [data]);

  const mutation = useMutation((updatedJob: JobData) => updateJob(Number(id), updatedJob), {
		onSuccess: () => {
			notification.success({
				message: 'Обновление прошло успешно',
				description: 'Вакансия была успешно обновлена.',
			});
			router.push('/view'); // Перенаправление обратно на страницу списка вакансий
		},
		onError: () => {
			notification.error({
				message: 'Не удалось выполнить обновление',
				description: 'Произошла ошибка при обновлении вакансии.',
			});
		},
	});

	const onFinish = (values: JobData) => {
		mutation.mutate({ ...values}); // Обновление данных вакансии
	};

	if (isLoading) return <Spin size='large' className={style.spin} />;
	if (error) return <div>Error loading job data</div>;

	return (
		<div style={{ maxWidth: '600px', margin: 'auto', padding: '20px' }}>
			<h2 className={style.text}>Редактировать вакансию</h2>
			<Form form={form} layout='vertical' onFinish={onFinish}>
				<Form.Item
					name='Job_name'
					label='Название должности'
					rules={[{ required: true }]}
				>
					<Input />
				</Form.Item>
				<Form.Item name='Year' label='Курс' rules={[{ required: true }]}>
					<Input />
				</Form.Item>
				<Form.Item
					name='Qualification'
					label='Квалификация'
					valuePropName='checked'
				>
					<Input type='checkbox' />
				</Form.Item>
				<Form.Item name='Time' label='Занятость' rules={[{ required: true }]}>
					<Input />
				</Form.Item>
				<Form.Item name='Soft_skills' label='Soft Skills'>
					<Input />
				</Form.Item>
				<Form.Item name='Salary' label='Оклад' rules={[{ required: true }]}>
					<Input type='number' />
				</Form.Item>
				<Form.Item name='Email' label='Email' rules={[{ required: true }]}>
					<Input type='email' />
				</Form.Item>
				<Form.Item name='Archive' label='Archive' valuePropName='checked'>
					<Input type='checkbox' />
				</Form.Item>
				<Form.Item name='Responsibilities' label='Обязанности'>
					<Input />
				</Form.Item>
				<Form.Item
					name='Hardskills'
					label='Hardskills'
					rules={[
						{
							required: true,
							message: 'Пожалуйста, укажите свои профессиональные навыки!',
						},
					]}
				>
					<Select
						mode='tags'
						style={{ width: '100%' }}
						placeholder='Выбрать hardskills'
					>
						<Option value='JavaScript'>JavaScript</Option>
						<Option value='TypeScript'>TypeScript</Option>
						<Option value='React'>React</Option>
					</Select>
				</Form.Item>
				<Form.Item>
					<Button type='primary' htmlType='submit' loading={mutation.isLoading} className={style.edit_btn}>
						Сохранить изменения
					</Button>
				</Form.Item>
			</Form>
		</div>
	);
};

export default EditVacancy;