import {
  ProFormCheckbox,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
} from '@ant-design/pro-components';
import { Divider, Space, Typography } from 'antd';
import React from 'react';
import type { ProdReservationInfoVO } from '@/services/prod/prod-manager/rule';

const { Text, Title } = Typography;
type ValueConfig = {
  reservationSwitch?: number;
  prodReservationConfig?: ProdReservationInfoVO;
};
interface ProdReservationConfigProps {
  value?: ValueConfig;
  onChange?: (value?: ValueConfig) => void;
}
const ProdReservationConfig: React.FC<ProdReservationConfigProps> = (props) => {
  return (
    <>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          gap: 12,
        }}
      >
        <div>
          <Title level={4}>服务区域配置</Title>
          <Text type="secondary">
            默认服务区域为全城，开启此配置，可自定义可服务区域以及超区时的限制规则
          </Text>
        </div>

        <ProFormSwitch
          name="reservationSwitch"
          label="应用配置"
          labelCol={{ span: 13 }}
          fieldProps={{
            onChange: (checked) => {
              props.onChange?.({
                reservationSwitch: checked ? 1 : 0,
              });
            },
            checkedChildren: '开启',
            unCheckedChildren: '关闭',
          }}
        />
      </div>
      <Divider />
      <ProFormDigit
        name="advanceHours"
        label="预约时间约定"
        wrapperCol={{ span: 11 }}
        rules={[
          {
            required: true,
            message: '请输入提前预约时间',
          },
        ]}
        fieldProps={{
          placeholder: '请输入提前预约时间',
          min: 0,
          max: 24,
          addonBefore: '提前',
          addonAfter: '小时',
        }}
      />
      <ProFormRadio.Group
        name="reservationDateRange"
        label="预约日期范围"
        options={[
          { label: '7天', value: 7 },
          { label: '10天', value: 10 },
          { label: '15天', value: 15 },
          { label: '30天', value: 30 },
        ]}
        rules={[
          {
            required: true,
            message: '请选择预约日期范围',
          },
        ]}
      />
      <ProFormRadio.Group
        name="allowChange"
        label="更改预约时间"
        options={[
          { label: '允许更改预约时间', value: 1 },
          { label: '禁止更改预约时间', value: 0 },
        ]}
        rules={[
          {
            required: true,
            message: '请选择更改预约时间',
          },
        ]}
      />
      <ProFormRadio.Group
        name="changeTimeRule"
        label="时间更改规则"
        options={[
          { label: '服务开始前 1小时 可更改预约时间', value: 1 },
          { label: '服务开始前 2小时 可更改预约时间', value: 2 },
          { label: '服务开始前 3小时 可更改预约时间', value: 3 },
        ]}
        rules={[
          {
            required: true,
            message: '请选择时间更改规则',
          },
        ]}
      />
      <ProFormRadio.Group
        name="maxChangeTimes"
        label="更改次数规则"
        options={[
          { label: '允许修改 1 次', value: 1 },
          { label: '允许修改 2 次', value: 2 },
          { label: '允许修改 3 次', value: 3 },
        ]}
        rules={[
          {
            required: true,
            message: '请选择时间更改规则',
          },
        ]}
      />
    </>
  );
};

export default React.memo(ProdReservationConfig);
