import { ModalForm, ProFormSelect, ProFormTextArea } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import type { CancelForm as CancelFormType } from '../data';
import { CANCEL_REASON_OPTIONS } from '../constants';

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

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

  return (
    <ModalForm<CancelFormType>
      title={intl.formatMessage({ id: 'order.cancel.title', defaultMessage: '取消订单' })}
      open={visible}
      onOpenChange={onVisibleChange}
      onFinish={onSubmit}
      modalProps={{
        destroyOnHidden: true,
      }}
    >
      <ProFormSelect
        name="reason"
        label={intl.formatMessage({ id: 'order.cancel.reason', defaultMessage: '取消原因' })}
        rules={[
          {
            required: true,
            message: intl.formatMessage({ id: 'order.cancel.reason.required', defaultMessage: '请选择取消原因' }),
          },
        ]}
        options={CANCEL_REASON_OPTIONS}
        placeholder={intl.formatMessage({ id: 'order.cancel.reason.placeholder', defaultMessage: '请选择取消原因' })}
      />
      <ProFormTextArea
        name="description"
        label={intl.formatMessage({ id: 'order.cancel.description', defaultMessage: '详细说明' })}
        placeholder={intl.formatMessage({ id: 'order.cancel.description.placeholder', defaultMessage: '请输入详细说明（选填）' })}
        fieldProps={{
          rows: 4,
        }}
      />
    </ModalForm>
  );
};

export default CancelOrderFormComponent;
