import React, { useEffect, useState } from 'react';
import { Button, Checkbox, Form, Input, Radio, Select } from 'antd';
import r from './Resume.module.scss';
import { initThemeParams, MiniApp, useInitData, useMiniApp, usePopup } from '@tma.js/sdk-react';
import {
	deleteStudent,
	editStudent,
	fetchHardSkills,
	fetchHardSkillsAll,
	fetchStudent,
	sendStudent,
} from '@/api/api';
import { Bot, FormValues, Request, Student } from '@/types/types';
import { useQuery } from 'react-query';
import { sendDataBot } from '@/api/bot';

type LayoutType = Parameters<typeof Form>[0]['layout'];
const { Option } = Select;
const Resume: React.FC = () => {
	const [form] = Form.useForm();
	const [formLayout, setFormLayout] = useState<LayoutType>('horizontal');
	const miniApp = useMiniApp();
	const [themeParams] = initThemeParams();
	const initData = useInitData(true);
	const popup = usePopup();

	const { isLoading, isError, data, error } = useQuery(
		['student', initData?.user?.id],
		() => fetchStudent(initData?.user?.id || 0),
		{
			enabled: !!initData?.user?.id, // Включить запрос только когда initData.user.id доступен
			refetchOnWindowFocus: false,
			retry: false,
		}
	);
	const hardSkill = useQuery(
		['skills', initData?.user?.id],
		() => fetchHardSkills(initData?.user?.id || 0),
		{
			enabled: !!initData?.user?.id, // Включить запрос только когда initData.user.id доступен
			refetchOnWindowFocus: false,
			retry: false,
		}
	);


		const { data: allSkills } = useQuery(
			['hardSkills'], // Обратите внимание на использование массива в качестве ключа
			() => fetchHardSkillsAll(),
			{
				refetchOnWindowFocus: false,
				retry: false,
			}
		);


	const onFinish = async (values: FormValues) => {
		const hard: string[] = values.skills;
		const student: Request = {
			StudentID: initData?.user?.id || 0,
			Name: values.Name,
			Type: values.Type,
			Group: values.Group,
			Faculties: values.Faculties,
			Phone_number: values.Phone_number,
			Time: values.Time, // список времени
			Soft_skills: values.Soft_skills,
			Link: 'link', // предполагается, что у вас есть ссылка
			Email: values.Email,
			Hardskills: values.skills, // список навыков
		};
		const editedStudent: Omit<Student, 'StudentID'> = {
			Name: values.Name,
			Type: values.Type,
			Group: values.Group,
			Time: values.Time,
			Faculties: values.Faculties,
			Phone_number: values.Phone_number,
			Soft_skills: values.Soft_skills,
			Link: 'link',
			Email: values.Email,
			Hardskills: values.skills,
		};
		const dataBot: Bot = {
			id: initData?.user?.id || 0,
		};
		if (data) {
			const result = await editStudent(editedStudent, initData?.user?.id || 0);
			if (result.status == 200) {
				popup.open({
					title: '',
					message: 'Изменния были внесены',
					buttons: [{ id: 'my-id', type: 'default', text: 'Закрыть' }],
				});
			}
			console.log(result.status);
		} else {
			const result = await sendStudent(student);
			console.log(result.status);
			const resultbot = await sendDataBot(dataBot);
			console.log(resultbot);
			miniApp.close();
		}
	};

	useEffect(() => {
		if (data) {
			form.setFieldsValue({
				Name: data.data.Name,
				Type: data.data.Type,
				Group: data.data.Group,
				Time: data.data.Time,
				Soft_skills: data.data.Soft_skills,
				Email: data.data.Email,
				skills: hardSkill.data?.data.map(
					(skill: { Title: string }) => skill.Title
				),
			});
		}
	}, [data, form]);

	const resetResume = async () => {
		const result = await deleteStudent(initData?.user?.id || 0);
		if (result.status == 204) {
			popup.open({
				title: '',
				message: 'Ваше резюме было удалено',
				buttons: [{ id: 'my-id', type: 'default', text: 'Закрыть' }],
			});
		}
		await form.resetFields();
		miniApp.close();
	};

	const [selectedValues, setSelectedValues] = useState<string[]>([]);

	const handleCheckboxChange = (checkedValues: string[]) => {
		setSelectedValues(checkedValues);
	};

	const onFormLayoutChange = ({ layout }: { layout: LayoutType }) => {
		setFormLayout(layout);
	};

	// if (isLoading) {
	// 	return <span>Загрузка...</span>;
	// }

	return (
		<Form
			layout={formLayout}
			form={form}
			initialValues={{ layout: formLayout }}
			onValuesChange={onFormLayoutChange}
			onFinish={onFinish}
			style={{ maxWidth: formLayout === 'inline' ? 'none' : 600 }}
			className={r.form}
		>
			<Form.Item
				label={
					<label style={{ color: themeParams.textColor, fontSize: '20px' }}>
						Как вас зовут?
					</label>
				}
				className={r.form_item}
				rules={[
					{ required: true, message: 'Пожалуйста, введите имя и фамилию!' },
				]}
				name='Name'
			>
				<Input placeholder='Фамилия Имя' />
			</Form.Item>
			<Form.Item
				label={
					<label style={{ color: themeParams.textColor, fontSize: '20px' }}>
						Факультет
					</label>
				}
				className={r.form_item}
				rules={[{ required: true, message: 'Пожалуйста, введите факультет!' }]}
				name='Faculties'
			>
				<Input placeholder='Фамилия Имя' />
			</Form.Item>
			<Form.Item
				label={
					<label style={{ color: themeParams.textColor, fontSize: '20px' }}>
						Номер телефона
					</label>
				}
				className={r.form_item}
				rules={[
					{ required: true, message: 'Пожалуйста, введите номер телефона!' },
				]}
				name='Phone_number'
			>
				<Input placeholder='Фамилия Имя' />
			</Form.Item>

			<Form.Item
				label={
					<label style={{ color: themeParams.textColor, fontSize: '20px' }}>
						Что вы ищите?
					</label>
				}
				rules={[
					{ required: true, message: 'Пожалуйста, выберит тип занятости!' },
				]}
				name='Type'
			>
				<Radio.Group>
					<Radio.Button value='Работа'>Работу</Radio.Button>
					<Radio.Button value='Стажировка'>Стажировку</Radio.Button>
				</Radio.Group>
			</Form.Item>

			{/* <Form.Item
				label={
					<label
						style={{
							color: themeParams.textColor,
							fontSize: '20px',
							marginBottom: '20px',
						}}
					>
						Что вы ищите?
					</label>
				}
				rules={[
					{ required: true, message: 'Пожалуйста, выберите тип занятости!' },
				]}
				name='Type'
			>
				<Select
					mode='multiple'
					allowClear
					style={{ width: '100%' }}
					placeholder='Выберите тип занятости'
				>
					<Option value='ищу работу'>Ищу работу</Option>
					<Option value='ищу стажировку у партнеров'>
						Ищу стажировку у партнеров
					</Option>
					<Option value='ищу стажировку сторонних компаний'>
						Ищу стажировку сторонних компаний
					</Option>
					<Option value='хочу заниматься научной работой'>
						Хочу заниматься научной работой
					</Option>
					<Option value='хочу работать в МТУСИ'>Хочу работать в МТУСИ</Option>
				</Select>
			</Form.Item> */}

			<Form.Item
				label={
					<label style={{ color: themeParams.textColor, fontSize: '20px' }}>
						Ваша академическая группа:
					</label>
				}
				name='Group'
				rules={[
					{
						required: true,
						message: 'Пожалуйста, введите номер вашей группы!',
					},
					{
						pattern: /^[А-ЯЁ]{2,3}\d{4}$/,
						message: 'Введите корректный номер группы (например, БВТ2202)!',
					},
				]}
			>
				<Input placeholder='БВТ2202' style={{ width: '85px' }} maxLength={7} />
			</Form.Item>

			<Form.Item
				label={
					<label
						style={{
							color: themeParams.textColor,
							fontSize: '20px',
							marginBottom: '20px',
						}}
					>
						Какую занятость (часов в неделю) вы рассматриваете?
					</label>
				}
				name='Time'
			>
				<Checkbox.Group onChange={handleCheckboxChange} value={selectedValues}>
					<Checkbox
						value='20'
						className={r.checkbox_button}
						style={{
							color: themeParams.textColor,
						}}
					>
						20
					</Checkbox>
					<Checkbox
						value='30'
						className={r.checkbox_button}
						style={{
							color: themeParams.textColor,
						}}
					>
						30
					</Checkbox>
					<Checkbox
						value='40'
						className={r.checkbox_button}
						style={{
							color: themeParams.textColor,
						}}
					>
						40
					</Checkbox>
				</Checkbox.Group>
			</Form.Item>
			<Form.Item
				label={
					<label
						style={{
							color: themeParams.textColor,
							fontSize: '20px',
							marginBottom: '20px',
						}}
					>
						Какими навыками вы обладаете?
					</label>
				}
				rules={[
					{ required: true, message: 'Пожалуйста, укажите ваши hard skills!' },
				]}
				name='skills'
			>
				<Select
					mode='multiple'
					allowClear
					style={{ width: '100%' }}
					placeholder='Выберите навыки'
					loading={isLoading}
				>
					{allSkills?.map(skill => (
						<Option key={skill.Hard_skillID} value={skill.Title}>
							{skill.Title}
						</Option>
					))}
				</Select>
			</Form.Item>

			<Form.Item
				label={
					<label
						style={{
							color: themeParams.textColor,
							fontSize: '20px',
							marginBottom: '20px',
						}}
					>
						Расскажите немного о своих soft skills:
					</label>
				}
				rules={[
					{ required: true, message: 'Пожалуйста, введите ваши soft skills!' },
				]}
				name='Soft_skills'
			>
				<Input.TextArea maxLength={150} />
			</Form.Item>

			<Form.Item
				label={
					<label style={{ color: themeParams.textColor, fontSize: '20px' }}>
						Оставьте почту для работодателей:
					</label>
				}
				className={r.form_item}
				rules={[
					{ required: true, message: 'Пожалуйста, введите вашу почту!' },
					{ type: 'email', message: 'Введите корректный email!' },
				]}
				name='Email'
			>
				<Input placeholder='example@mtuci.ru' className={r.inputs} />
			</Form.Item>

			<Form.Item>
				<Button type='primary' htmlType='submit'>
					Отправить
				</Button>
			</Form.Item>
			{data && (
				<Form.Item>
					<Button danger onClick={resetResume}>
						Стереть
					</Button>
				</Form.Item>
			)}
		</Form>
	);
};

export default Resume;