import TreeSelectedGroup from '@/components/shared/TreeSelectedGroup';
import { PlusOutlined } from '@ant-design/icons';
import {
  ProForm,
  ProFormInstance,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Button, Col, Flex, Form, Row, Tag, Tooltip } from 'antd';
import dayjs from 'dayjs';
import { MutableRefObject, useState } from 'react';
import { tagPlusStyle, ZoneFormData, ZoneFormField } from '../type';
import AddConditionForm from './AddConditionForm';
import GeometryForm from './GeometryForm';
interface ZoneFormProps {
  shape?: number;
  formRef: MutableRefObject<ProFormInstance<ZoneFormData> | null | undefined>;
}

const ZoneForm = ({ formRef, shape }: ZoneFormProps) => {
  const intl = useIntl();
  const [isConditionModalOpen, setIsConditionModalOpen] = useState(false);
  const handleGroupSelect = (groupId: string | string[] | null) => {
    formRef.current?.setFieldsValue({ [ZoneFormField.AreaId]: groupId });
  };
  const selectedGroupIds = Form.useWatch(
    ZoneFormField.AreaId,
    formRef.current || undefined,
  ) as string | string[] | null | undefined;
  const conditionData = Form.useWatch(
    ZoneFormField.AreaConditions,
    formRef.current || undefined,
  );

  const handleConditionsClose = (indexToRemove: number) => {
    formRef.current?.setFieldValue(
      ZoneFormField.AreaConditions,
      conditionData?.filter((_, index) => index !== indexToRemove),
    );
  };
  return (
    <>
      <Row gutter={16}>
        {/* Tên */}
        <Col xs={24} md={12}>
          <ProFormText
            name={ZoneFormField.AreaName}
            label={intl.formatMessage({
              id: 'common.name',
              defaultMessage: 'Tên',
            })}
            rules={[
              {
                required: true,
                message: intl.formatMessage({
                  id: 'banzone.form.name.required.message',
                  defaultMessage: 'Tên khu vực không được để trống!',
                }),
              },
            ]}
            required
          />
        </Col>

        {/* Loại */}
        <Col xs={24} md={12}>
          <ProFormSelect
            name={ZoneFormField.AreaType}
            label={intl.formatMessage({
              id: 'common.type',
              defaultMessage: 'Loại',
            })}
            required
            rules={[
              {
                required: true,
                message: intl.formatMessage({
                  id: 'banzone.form.area_type.required.message',
                  defaultMessage: 'Loại khu vực không được để trống',
                }),
              },
            ]}
            placeholder={intl.formatMessage({
              id: 'banzone.form.area_type.placeholder',
              defaultMessage: 'Chọn loại khu vực',
            })}
            options={[
              {
                label: intl.formatMessage({
                  id: 'banzone.area.fishing_ban',
                  defaultMessage: 'Cấm đánh bắt',
                }),
                value: 1,
              },
              {
                label: intl.formatMessage({
                  id: 'banzone.area.move_ban',
                  defaultMessage: 'Cấm di chuyển',
                }),
                value: 2,
              },
              {
                label: intl.formatMessage({
                  id: 'banzone.area.safe',
                  defaultMessage: 'Vùng an toàn',
                }),
                value: 3,
              },
            ]}
          />
        </Col>
      </Row>
      <Row gutter={16}>
        {/* Tỉnh */}
        <Col xs={24} md={12}>
          <ProForm.Item
            name={ZoneFormField.AreaId}
            label={intl.formatMessage({
              id: 'common.province',
              defaultMessage: 'Tỉnh',
            })}
            rules={[
              {
                required: true,
                message: intl.formatMessage({
                  id: 'banzone.form.province.required.message',
                  defaultMessage: 'Tỉnh quản lý không được để trống!',
                }),
              },
            ]}
          >
            <TreeSelectedGroup
              groupIds={selectedGroupIds ?? ''}
              onSelected={handleGroupSelect}
            />
          </ProForm.Item>
        </Col>

        {/* Có hiệu lực */}
        <Col xs={24} md={12}>
          <ProFormSwitch
            name={ZoneFormField.AreaEnabled}
            label={intl.formatMessage({
              id: 'banzone.is_enable',
              defaultMessage: 'Có hiệu lực',
            })}
            valuePropName="checked"
          />
        </Col>
      </Row>
      <ProFormTextArea
        name={ZoneFormField.AreaDescription}
        label={intl.formatMessage({
          id: 'common.description',
          defaultMessage: 'Mô tả',
        })}
        placeholder={intl.formatMessage({
          id: 'banzone.form.description.placeholder',
          defaultMessage: 'Nhập mô tả khu vực',
        })}
        autoSize={{ minRows: 3, maxRows: 5 }}
      />
      <Form.Item
        name={ZoneFormField.AreaConditions}
        label={intl.formatMessage({
          id: 'banzone.condition',
          defaultMessage: 'Điều kiện',
        })}
      >
        <Flex gap="10px 4px" wrap>
          {(conditionData || []).map((condition, index) => {
            // console.log("Condition: ", condition);

            let tootip = '';
            let label = '';

            const { type } = condition;
            switch (type) {
              case 'month_range': {
                label = intl.formatMessage({
                  id: 'banzone.condition.yearly',
                  defaultMessage: 'Hàng năm',
                });
                const fromMonth = condition.from + 1;
                const toMonth = condition.to + 1;
                tootip = `Tháng từ ${fromMonth} đến tháng ${toMonth}`;

                break;
              }
              case 'date_range': {
                label = intl.formatMessage({
                  id: 'banzone.condition.specific_time',
                  defaultMessage: 'Thời gian cụ thể',
                });

                const fromDate = dayjs(condition.from).format('DD/MM/YYYY');
                const toDate = dayjs(condition.to).format('DD/MM/YYYY');
                tootip = `Từ ${fromDate} đến ${toDate}`;

                break;
              }
              case 'length_limit':
                label = intl.formatMessage({
                  id: 'banzone.condition.length_limit',
                  defaultMessage: 'Chiều dài cho phép',
                });
                tootip = `Chiều dài tàu từ ${condition.min} đến ${condition.max} mét`;
                break;
              default:
                label = intl.formatMessage({
                  id: 'common.undefined',
                  defaultMessage: 'Không xác định',
                });
            }

            return (
              <Tooltip title={tootip} key={index}>
                <Tag
                  closable
                  onClick={() => setIsConditionModalOpen(true)}
                  onClose={(e) => {
                    e.preventDefault();
                    handleConditionsClose(index);
                  }}
                  color={
                    type === 'month_range'
                      ? 'blue'
                      : type === 'date_range'
                      ? 'green'
                      : 'volcano'
                  }
                >
                  {label}
                </Tag>
              </Tooltip>
            );
          })}
          <Button
            style={tagPlusStyle}
            icon={<PlusOutlined />}
            onClick={() => setIsConditionModalOpen(true)}
          >
            <FormattedMessage
              id="banzone.condition.add"
              defaultMessage="Thêm điều kiện"
            />
          </Button>
        </Flex>
      </Form.Item>
      <GeometryForm shape={shape} form={formRef} />
      <AddConditionForm
        isVisible={isConditionModalOpen}
        setVisible={setIsConditionModalOpen}
        initialData={conditionData}
        onFinish={(newConditions) => {
          try {
            formRef.current?.setFieldValue(
              ZoneFormField.AreaConditions,
              newConditions,
            );
          } catch (e) {
            console.error('Error setting form value:', e);
          }
        }}
      />
    </>
  );
};

export default ZoneForm;
