import { DatePicker, Form, Input, Modal, Select } from 'antd';
import FormItem from 'antd/es/form/FormItem';
import dayjs from 'dayjs';
import type React from 'react';
import { useEffect, useMemo, useState } from 'react';
import { ApiError } from '../../api/client';
import { fetchRelatedGroup } from '../../services/api/directories/company_groups';
import { getCompanyGroupsThunk } from '../../store/slices/companyGroupsSlice/thunks';
import { useAppDispatch, useAppSelector } from '../../store/store';
import type { RelatedGroupFormType } from '../../types/relatedGroup/relatedGroup';
import { useNotificationApi } from '../../utils/useNotification';

type Props = {
	open: boolean;
	onCancel: () => void;
	onOk: (values: RelatedGroupFormType) => void | Promise<void>;
	relatedGroupId?: string;
	kind: 'gsk' | 'gsz';
};

export const RelatedGroupForm: React.FC<Props> = ({ open, onCancel, onOk, relatedGroupId, kind }) => {
	const [form] = Form.useForm<RelatedGroupFormType>();
	const notification = useNotificationApi();
	const dispatch = useAppDispatch();
	const [initialDataLoading, setInitialDataLoading] = useState(false);
	const [confirmLoading, setConfirmLoading] = useState(false);
	const companyGrops = useAppSelector((state) => state.company_groups.raw_rows);
	const companyGropsLoading = useAppSelector((state) => state.company_groups.loading);

	async function getInitialData() {
		if (!relatedGroupId) return;
		setInitialDataLoading(true);
		try {
			const data = await fetchRelatedGroup(relatedGroupId);
			await dispatch(getCompanyGroupsThunk());
			form.setFieldsValue({
				crm_id: data?.crm_id,
				name: data?.name,
				created_date: data?.created_date ?? dayjs().format('YYYY-MM-DD'),
				company_group_id: data?.company_group_id,
			});
		} catch (e) {
			if (e instanceof ApiError) {
				notification.error({ description: e.message });
			}
		} finally {
			setInitialDataLoading(false);
		}
	}

	const handleOk = async () => {
		setConfirmLoading(true);
		try {
			const { created_date, name, crm_id, company_group_id } = await form.validateFields();
			await onOk({
				created_date: created_date ?? dayjs().format('YYYY-MM-DD'),
				name,
				crm_id,
				company_group_id: relatedGroupId ? undefined : company_group_id,
				kind: relatedGroupId ? undefined : kind,
			});
		} catch (e) {
			if (e instanceof ApiError) {
				notification.error({
					description: e.message,
				});
			}
		} finally {
			setConfirmLoading(false);
		}
	};

	const handleCancel = () => {
		form.resetFields();
		onCancel();
	};

	const companyGroupOptions = useMemo(() => {
		return companyGrops?.map((company) => company && { value: company.id, label: company.name });
	}, [companyGrops]);

	useEffect(() => {
		getInitialData();
	}, [open]);

	return (
		<Modal
			title={`${relatedGroupId ? 'Изменить' : 'Создать'} группу связанных ${kind === 'gsk' ? 'компаний' : 'заемщиков'}`}
			open={open}
			onCancel={handleCancel}
			onOk={handleOk}
			okText={`${relatedGroupId ? 'Сохранить' : 'Создать'}`}
			cancelText='Отмена'
			destroyOnHidden
			loading={initialDataLoading}
			confirmLoading={confirmLoading}>
			<Form form={form} layout='vertical'>
				<FormItem name='crm_id' label='ID в CRM'>
					<Input placeholder='Генерируется автоматически' />
				</FormItem>
				<FormItem name='name' label='Наименование' rules={[{ required: true, message: 'Укажите наименование' }]}>
					<Input />
				</FormItem>
				<Form.Item name='company_group_id' label='ГК' rules={[{ required: true, message: 'Выберите ГК' }]}>
					<Select
						disabled={!!relatedGroupId}
						allowClear
						loading={companyGropsLoading}
						options={companyGroupOptions}
						showSearch
						optionFilterProp='label'
						notFoundContent={companyGropsLoading ? 'Загрузка' : 'Нет вариантов'}
					/>
				</Form.Item>
				<Form.Item
					name='created_date'
					label='Дата создания'
					getValueProps={(value: string | undefined) => ({
						value: value ? dayjs(value) : undefined,
					})}
					normalize={(value) => (value ? value.format('YYYY-MM-DD') : undefined)}>
					<DatePicker style={{ width: '100%' }} format='DD.MM.YYYY' placeholder='ДД.ММ.ГГГГ' />
				</Form.Item>
			</Form>
		</Modal>
	);
};