import { ModalForm, ProFormTextArea } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, Form } from 'antd';
interface CancelTripProps {
  onFinished?: (note: string) => void;
}
const CancelTrip: React.FC<CancelTripProps> = ({ onFinished }) => {
  const intl = useIntl();
  const [form] = Form.useForm<{ note: string }>();
  return (
    <ModalForm
      title={intl.formatMessage({ id: 'trip.cancelTrip.title' })}
      form={form}
      modalProps={{
        destroyOnHidden: true,
        onCancel: () => console.log('run'),
      }}
      trigger={
        <Button color="danger" variant="solid">
          {intl.formatMessage({ id: 'trip.cancelTrip.button' })}
        </Button>
      }
      onFinish={async (values) => {
        onFinished?.(values.note);
        return true;
      }}
    >
      <ProFormTextArea
        name="note"
        label={intl.formatMessage({ id: 'trip.cancelTrip.reason' })}
        placeholder={intl.formatMessage({ id: 'trip.cancelTrip.placeholder' })}
        rules={[
          {
            required: true,
            message: intl.formatMessage({ id: 'trip.cancelTrip.validation' }),
          },
        ]}
      />
    </ModalForm>
  );
};

export default CancelTrip;