import type { ModalFormProps } from '@ant-design/pro-components';
import { ModalForm, ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import type { ProFormInstance } from '@ant-design/pro-components';
import type { IntlShape } from '@umijs/max';
import React from 'react';
import type { VehicleFormValues, VehicleStatus, VehicleType } from '../data';

export interface VehicleFormModalProps
  extends Pick<ModalFormProps<VehicleFormValues>, 'open' | 'onOpenChange' | 'onFinish'> {
  intl: IntlShape;
  formRef: React.RefObject<ProFormInstance<VehicleFormValues>>;
  submitting?: boolean;
  initialValues?: Partial<VehicleFormValues>;
}

const statusOptions: VehicleStatus[] = ['active', 'inactive', 'maintenance', 'retired'];

const typeOptions: VehicleType[] = ['car', 'truck', 'van', 'bus', 'other'];

const VehicleFormModal: React.FC<VehicleFormModalProps> = (props) => {
  const { intl, formRef, submitting, initialValues, ...rest } = props;

  return (
    <ModalForm<VehicleFormValues>
      {...rest}
      formRef={formRef}
      layout="vertical"
      width={520}
      modalProps={{
        destroyOnClose: true,
        maskClosable: false,
        confirmLoading: submitting,
      }}
      initialValues={{
        status: 'active',
        type: 'car',
        ...initialValues,
      }}
      title={intl.formatMessage({
        id: initialValues?.id ? 'pages.vehicle.edit' : 'pages.vehicle.add',
        defaultMessage: initialValues?.id ? '编辑车辆' : '新增车辆',
      })}
    >
      <ProFormText
        name="plateNumber"
        label={intl.formatMessage({
          id: 'vehicle.form.plateNumber',
          defaultMessage: '车牌号',
        })}
        placeholder={intl.formatMessage({
          id: 'vehicle.form.plateNumber.placeholder',
          defaultMessage: '请输入车牌号',
        })}
        rules={[
          {
            required: true,
            message: intl.formatMessage({
              id: 'vehicle.form.plateNumber.required',
              defaultMessage: '请输入车牌号',
            }),
          },
        ]}
      />

      <ProFormText
        name="brand"
        label={intl.formatMessage({
          id: 'vehicle.form.brand',
          defaultMessage: '品牌',
        })}
        placeholder={intl.formatMessage({
          id: 'vehicle.form.brand.placeholder',
          defaultMessage: '请输入品牌',
        })}
        rules={[
          {
            required: true,
            message: intl.formatMessage({
              id: 'vehicle.form.brand.required',
              defaultMessage: '请输入品牌',
            }),
          },
        ]}
      />

      <ProFormText
        name="model"
        label={intl.formatMessage({
          id: 'vehicle.form.model',
          defaultMessage: '车型',
        })}
        placeholder={intl.formatMessage({
          id: 'vehicle.form.model.placeholder',
          defaultMessage: '请输入车型',
        })}
        rules={[
          {
            required: true,
            message: intl.formatMessage({
              id: 'vehicle.form.model.required',
              defaultMessage: '请输入车型',
            }),
          },
        ]}
      />

      <ProFormSelect
        name="type"
        label={intl.formatMessage({
          id: 'vehicle.form.type',
          defaultMessage: '车辆类型',
        })}
        options={typeOptions.map((value) => ({
          value,
          label: intl.formatMessage({
            id: `vehicle.type.${value}`,
            defaultMessage: value,
          }),
        }))}
        rules={[
          {
            required: true,
            message: intl.formatMessage({
              id: 'vehicle.form.type.required',
              defaultMessage: '请选择车辆类型',
            }),
          },
        ]}
      />

      <ProFormSelect
        name="status"
        label={intl.formatMessage({
          id: 'vehicle.form.status',
          defaultMessage: '状态',
        })}
        options={statusOptions.map((value) => ({
          value,
          label: intl.formatMessage({
            id: `vehicle.status.${value}`,
            defaultMessage: value,
          }),
        }))}
        rules={[
          {
            required: true,
            message: intl.formatMessage({
              id: 'vehicle.form.status.required',
              defaultMessage: '请选择状态',
            }),
          },
        ]}
      />

      <ProFormText
        name="vin"
        label={intl.formatMessage({
          id: 'vehicle.form.vin',
          defaultMessage: '车架号',
        })}
        placeholder={intl.formatMessage({
          id: 'vehicle.form.vin.placeholder',
          defaultMessage: '请输入车架号（可选）',
        })}
      />

      <ProFormText
        name="ownerName"
        label={intl.formatMessage({
          id: 'vehicle.form.ownerName',
          defaultMessage: '车主/使用人',
        })}
        placeholder={intl.formatMessage({
          id: 'vehicle.form.ownerName.placeholder',
          defaultMessage: '请输入车主或使用人姓名（可选）',
        })}
      />

      <ProFormTextArea
        name="remark"
        label={intl.formatMessage({
          id: 'vehicle.form.remark',
          defaultMessage: '备注',
        })}
        fieldProps={{ autoSize: { minRows: 3, maxRows: 6 } }}
        placeholder={intl.formatMessage({
          id: 'vehicle.form.remark.placeholder',
          defaultMessage: '请输入备注信息（可选）',
        })}
      />
    </ModalForm>
  );
};

export default VehicleFormModal;

