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

const { Text, Title } = Typography;

type ValueConfig = {
  regionSwitch?: number;
  prodServiceAreasInfo?: ProdServiceAreasInfoVO;
};
interface ProdServiceAreasInfoProps {
  value?: ValueConfig;
  onChange?: (value?: ValueConfig) => void;
}
const ProdServiceAreasInfo: React.FC<ProdServiceAreasInfoProps> = (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="regionSwitch"
          label="应用配置"
          labelCol={{ span: 13 }}
          fieldProps={{
            onChange: (checked) => {
              props.onChange?.({
                regionSwitch: checked ? 1 : 0,
              });
            },
            checkedChildren: '开启',
            unCheckedChildren: '关闭',
          }}
        />
      </div>

      <Divider />

      <ProFormSelect
        name="areaNameList"
        label="服务区域"
        options={[
          '鼓楼区',
          '台江区',
          '晋安区',
          '马尾区',
          '闽侯县',
          '福清市（县级市）',
          '长乐区',
          '罗源县',
          '永泰县',
          '平潭县',
        ]}
        fieldProps={{
          mode: 'multiple',
        }}
        placeholder="请选择服务区域"
        rules={[
          {
            required: true,
            message: '请选择服务区域',
            type: 'array',
          },
        ]}
      />
      <ProFormRadio.Group
        name="ruleType"
        label="超区规则"
        options={[
          { label: '拒单', value: 0 },
          { label: '接单-收超区费', value: 2 },
          { label: '接单-收超区费-收超区费', value: 3 },
        ]}
        rules={[
          {
            required: true,
            message: '请选择服务区域',
          },
        ]}
      />
      <ProFormDigit
        rules={[
          {
            required: true,
            message: '请设置费用',
          },
        ]}
        label="设置费用"
        name="fee"
      />
    </>
  );
};

export default React.memo(ProdServiceAreasInfo);