import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import type { ShipForm as ShipFormType } from '../data';
import { SHIPPING_COMPANY_OPTIONS } from '../constants';

interface ShipFormProps {
  visible: boolean;
  onVisibleChange: (visible: boolean) => void;
  onSubmit: (values: ShipFormType) => Promise<boolean>;
}

const ShipFormComponent: React.FC<ShipFormProps> = ({ visible, onVisibleChange, onSubmit }) => {
  const intl = useIntl();

  return (
    <ModalForm<ShipFormType>
      title={intl.formatMessage({ id: 'order.ship.title', defaultMessage: '订单发货' })}
      open={visible}
      onOpenChange={onVisibleChange}
      onFinish={onSubmit}
      modalProps={{
        destroyOnHidden: true,
      }}
    >
      <ProFormSelect
        name="shippingCompany"
        label={intl.formatMessage({ id: 'order.ship.company', defaultMessage: '物流公司' })}
        rules={[
          {
            required: true,
            message: intl.formatMessage({ id: 'order.ship.company.required', defaultMessage: '请选择物流公司' }),
          },
        ]}
        options={SHIPPING_COMPANY_OPTIONS}
        placeholder={intl.formatMessage({ id: 'order.ship.company.placeholder', defaultMessage: '请选择物流公司' })}
      />
      <ProFormText
        name="shippingNo"
        label={intl.formatMessage({ id: 'order.ship.no', defaultMessage: '物流单号' })}
        rules={[
          {
            required: true,
            message: intl.formatMessage({ id: 'order.ship.no.required', defaultMessage: '请输入物流单号' }),
          },
        ]}
        placeholder={intl.formatMessage({ id: 'order.ship.no.placeholder', defaultMessage: '请输入物流单号' })}
      />
    </ModalForm>
  );
};

export default ShipFormComponent;
