import {
  BetaSchemaForm,
  type ProFormColumnsType,
} from '@ant-design/pro-components';
import { type FormInstance, Modal, message } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import { cancelOrder } from '@/services/trade/order';

const CancleOrderModal: React.FC<{
  open?: boolean;
  id?: number;
  onClose?: () => void;
}> = (props) => {
  const formRef = useRef<FormInstance>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const columns: ProFormColumnsType[] = [
    {
      title: '',
      dataIndex: 'cancelReason',
      valueType: 'radio',
      fieldProps: {
        options: [
          { value: '用户主动取消', label: '用户主动取消' },
          { value: '选项二', label: '选项二' },
          { value: '选项三', label: '选项三' },
          { value: '选项四', label: '选项四' },
          { value: '选项五', label: '选项五' },
          { value: '选项六', label: '选项六' },
          { value: '选项七', label: '选项七' },
        ],
        style: {
          display: 'flex',
          flexDirection: 'column',
          gap: '8px',
          marginTop: '6px',
          background: '#f0f0f0',
          padding: '8px',
          borderRadius: '8px',
        },
      },
    },
    {
      title: '取消备注',
      dataIndex: 'cancelRemark',
      valueType: 'textarea',
    },
  ];

  const handleOk = useCallback(async () => {
    try {
      setLoading(true);
      const values = formRef.current?.getFieldsValue();
      console.log(values, props.id, 'ok');
      await cancelOrder({ id: props.id, ...values });
      message.success('取消成功');
      props.onClose?.();
    } finally {
      setLoading(false);
    }
  }, [open, props.id]);
  return (
    <Modal
      title="取消订单"
      open={props.open}
      onOk={handleOk}
      onCancel={props?.onClose}
      confirmLoading={loading}
    >
      <span>是否确认取消订单？</span>
      <BetaSchemaForm
        layoutType="Form"
        formRef={formRef}
        columns={columns || []}
        layout="horizontal"
        submitter={false}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
      />
    </Modal>
  );
};

export default React.memo(CancleOrderModal);