import { Col, Form, Input, Modal, Row, Select } from 'antd';
import type React from 'react';
import { useEffect, useState } from 'react';
import { ApiError } from '../../api/client';
import { useMe } from '../../auth/useMe';
import { useAppSelector } from '../../store/store';
import type { CreateCompanyGroupProps } from '../../types/companyGroups/companyGroups';
import { useNotificationApi } from '../../utils/useNotification';
import { loadOffices } from '../Admin/UsersTable';

type Props = {
	open: boolean;
	onCancel: () => void;
	onOk: (values: CreateCompanyGroupProps) => void | Promise<void>;
};

export const CompanyGroupForm: React.FC<Props> = ({ open, onCancel, onOk }) => {
	const [form] = Form.useForm<CreateCompanyGroupProps>();
	const { me } = useMe();
	const notification = useNotificationApi();

	const activeCompanyGroup = useAppSelector((state) => state.company_groups.activeCompanyGroup);
	const [officesOptions, setOfficesOptions] = useState<{ value: string; label: string }[]>([]);
	const [loadingOptions, setLoadingOptions] = useState(false);
	const [confirmLoading, setConfirmLoading] = useState(false);

	async function getOfficesOptionsHandler() {
		setLoadingOptions(true);
		try {
			const res = await loadOffices();
			const options = res.map((elem) => elem && { value: elem.id, label: elem.name });
			setOfficesOptions(options);
		} catch (e) {
			if (e instanceof ApiError) {
				notification.error({ description: e.message });
			}
		} finally {
			setLoadingOptions(false);
		}
	}

	const handleOk = async () => {
		setConfirmLoading(true);
		try {
			const values = await form.validateFields();
			await onOk({
				...values,
				base_regional_office_id: values?.base_regional_office_id ? values?.base_regional_office_id : (me?.regional_office.id as string),
			});
		} catch (e) {
			if (e instanceof ApiError) {
				notification.error({
					description: e.message,
				});
			} else if (e instanceof Error && e.name !== 'ValidationError') {
				console.error(e);
			}
		} finally {
			setConfirmLoading(false);
		}
	};

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

	useEffect(() => {
		getOfficesOptionsHandler();
	}, [activeCompanyGroup]);

	return (
		<Modal
			title='Создать группу компаний'
			open={open}
			onCancel={handleCancel}
			onOk={handleOk}
			okText='Создать'
			cancelText='Отмена'
			destroyOnHidden
			confirmLoading={confirmLoading}
			width={720}>
			<Form form={form} layout='vertical'>
				<Form.Item name='name' label='Название ГК' rules={[{ required: true, message: 'Укажите название ГК' }]}>
					<Input placeholder='Например: Агроком' />
				</Form.Item>

				<Row gutter={16}>
					<Col span={12}>
						<Form.Item name='crm_id' label='ID ГК в CRM'>
							<Input placeholder='Генерируется автоматически' />
						</Form.Item>
					</Col>
					<Col span={12}>
						<Form.Item name='base_regional_office_id' label='Базовый РФ ГК'>
							<Select
								allowClear
								loading={loadingOptions}
								placeholder='— не указан —'
								options={officesOptions}
								showSearch
								optionFilterProp='label'
								notFoundContent={loadingOptions ? 'Загрузка' : 'Нет вариантов'}
							/>
						</Form.Item>
					</Col>
				</Row>
			</Form>
		</Modal>
	);
};