/* eslint-disable react/jsx-boolean-value */
import React, { useState, useEffect } from 'react';
import {
  Form,
  Modal,
  Input,
  notification,
  Radio,
  InputNumber,
  Checkbox,
  Switch,
  Tooltip,
  Row,
  Col,
} from 'antd';
import { SaveRoutes } from '@/services/hostmanager/hostmanager';
import { InfoCircleOutlined } from '@ant-design/icons';

const { Item } = Form;
const AddModal = props => {
  const { callBackSubmit = () => {}, pickItem, visible, onCancel } = props;
  const [loading, setLoading] = useState(false);
  const [current, setCurrent] = useState(false);
  const [advanced, setAdvanced] = useState(0);
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      let aa = pickItem.methods.replace(/\s/g, '');
      form.setFieldsValue({
        UpstreamPathTemplate: pickItem.upstreamPathTemplate,
        DownstreamPathTemplate: pickItem.downstreamPathTemplate,
        Methods: aa.split(','),
        Url: pickItem.url,
        IsAuthentication: pickItem.isAuthentication,
        Key: pickItem.key,
        Priority: pickItem.priority,
        UpstreamHost: pickItem.upstreamHost,
        AddHeasersToRequest: pickItem.addHeasersToRequest,
        UpstreamHeaderTransform: pickItem.upstreamHeaderTransform,
        DownstreamHeaderTransform: pickItem.downstreamHeaderTransform,
        Timeout: pickItem.timeout,
        QoSOptions: pickItem.qoSOptions,
        RateLimitOptions: pickItem.rateLimitOptions,
        CacheOptions: pickItem.cacheOptions,
        LoadBalancerOptions: pickItem.loadBalancerOptions,
        SecurityOptions: pickItem.securityOptions,
        RequestIdKey: pickItem.requestIdKey,
        ServiceName: pickItem.serviceName,
        ServiceNamespace: pickItem.serviceNamespace,
        DelegatingHandlers: pickItem.delegatingHandlers,
        ReRouteIsCaseSensitive: pickItem.reRouteIsCaseSensitive,
        DownstreamHttpMethod: pickItem.downstreamHttpMethod,
      });
      if (
        pickItem.upstreamHost ||
        pickItem.addHeasersToRequest ||
        pickItem.upstreamHeaderTransform ||
        pickItem.downstreamHeaderTransform ||
        pickItem.timeout ||
        pickItem.qoSOptions ||
        pickItem.rateLimitOptions ||
        pickItem.cacheOptions ||
        pickItem.loadBalancerOptions ||
        pickItem.securityOptions ||
        pickItem.requestIdKey ||
        pickItem.serviceName ||
        pickItem.serviceNamespace ||
        pickItem.delegatingHandlers ||
        pickItem.reRouteIsCaseSensitive ||
        pickItem.downstreamHttpMethod
      ) {
        setAdvanced(1);
        setCurrent(true);
      }
    } else {
      form.resetFields();
      setAdvanced(0);
      setCurrent(false);
    }
  }, [visible]);
  // 提交
  const onSubmit = () => {
    onCancel();
  };

  const layout = {
    layout: 'horizontal',
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
  };

  const plainOptions = ['GET', 'POST', 'PUT', 'DELETE'];

  const change = (e, event) => {
    if (e) {
      setAdvanced(1);
      setCurrent(true);
    } else {
      setAdvanced(0);
      setCurrent(false);
    }
  };

  return (
    <Modal
      title="查看网关配置"
      bodyStyle={{ width: '100%', maxHeight: '600px', overflow: 'scroll', minHeight: '360px' }}
      width="700px"
      destroyOnClose
      maskClosable={false}
      okText="关闭"
      {...props}
      onOk={() => onSubmit()}
      confirmLoading={loading}
      forceRender={true}
      getContainer={false}
    >
      <Form form={form} {...layout}>
        <Item
          label="上游路由模板"
          name="UpstreamPathTemplate"
          rules={[
            {
              validator: (rule, value) => {
                let aa = form.getFieldValue().UpstreamPathTemplate;
                console.log(aa.startsWith('/'));
                if (!aa.startsWith('/')) {
                  return Promise.reject('必须以/开头');
                }
                return Promise.resolve();
              },
            },
            {
              required: true,
              message: '请输入上游路由模板',
            },
          ]}
        >
          <Input
            allowClear
            style={{ width: '100%' }}
            placeholder="示例:/PandaOMS/PandaOMS/{url}"
            disabled
          />
        </Item>
        <Item
          label="下游路由模板"
          name="DownstreamPathTemplate"
          rules={[
            {
              validator: (rule, value) => {
                let aa = form.getFieldValue().DownstreamPathTemplate;
                console.log(aa.startsWith('/'));
                if (!aa.startsWith('/')) {
                  return Promise.reject('必须以/开头');
                }
                return Promise.resolve();
              },
            },
            {
              required: true,
              message: '请输入下游路由模板',
            },
          ]}
        >
          <Input allowClear placeholder="示例:/{url}" disabled />
        </Item>
        <Item
          label="上游请求方式"
          name="Methods"
          rules={[
            {
              required: true,
              message: '请选择上游请求方式',
            },
          ]}
        >
          <Checkbox.Group options={plainOptions} style={{ display: 'flex' }} disabled />
        </Item>
        <Item
          label="下游服务地址"
          name="Url"
          rules={[
            {
              required: true,
              message: '请输入下游服务地址',
            },
          ]}
        >
          <Input allowClear placeholder="示例:http://localhost:8050" disabled />
        </Item>
        <Item label="身份认证" name="IsAuthentication">
          <Radio.Group>
            <Radio value={true} disabled>
              开启
            </Radio>
            <Radio value={false} disabled>
              关闭
            </Radio>
          </Radio.Group>
        </Item>
        <Item
          label="关键字"
          name="Key"
          rules={[
            {
              required: true,
              message: '请输入关键字',
            },
          ]}
        >
          <Input allowClear disabled />
        </Item>
        <Row>
          <Col span={8}>
            <Item
              // label={
              //   <div>
              //     <Tooltip title="0默认级别最低,10最高,优先级越高越先匹配">
              //       <InfoCircleOutlined
              //         style={{
              //           color: 'rgb(24, 144, 255)',
              //           marginLeft: '0px',
              //           marginRight: '5px',
              //         }}
              //       />
              //     </Tooltip>
              //     <span>优先级</span>
              //   </div>
              // }
              label="优先级"
              name="Priority"
              labelCol={{ span: 12 }}
            >
              <InputNumber min={0} max={10} defaultValue={0} disabled />
            </Item>
          </Col>
          <Col span={16}>
            <Item>
              <span style={{ color: 'red' }}>0默认级别最低,10最高,优先级越高越先匹配</span>
            </Item>
          </Col>
        </Row>
        {/* <Switch
          checkedChildren="高级设置"
          unCheckedChildren="高级设置"
          onChange={change}
          checked={current}
          style={{ marginLeft: '40px', marginBottom: '15px' }}
        />
        {advanced === 1 ? (
          <>
            <Item label="上游host" name="UpstreamHost">
              <Input allowClear />
            </Item>
            <Item label="头部信息" name="AddHeasersToRequest">
              <Input allowClear />
            </Item>
            <Item label="上游头信息转发" name="UpstreamHeaderTransform">
              <Input allowClear />
            </Item>
            <Item label="下游头信息转发" name="DownstreamHeaderTransform">
              <Input allowClear />
            </Item>

            <Item label="超时设置" name="Timeout">
              <Input allowClear />
            </Item>
            <Item label="服务质量与熔断" name="QoSOptions">
              <Input allowClear />
            </Item>
            <Item label="限流配置" name="RateLimitOptions">
              <Input allowClear />
            </Item>
            <Item label="缓存" name="CacheOptions">
              <Input allowClear />
            </Item>
            <Item label="负载均衡" name="LoadBalancerOptions">
              <Input allowClear />
            </Item>
            <Item label="安全配置" name="SecurityOptions">
              <Input allowClear />
            </Item>
            <Item label="请求Id Key" name="RequestIdKey">
              <Input allowClear />
            </Item>
            <Item label="服务名" name="ServiceName">
              <Input allowClear />
            </Item>
            <Item label="服务空间" name="ServiceNamespace">
              <Input allowClear />
            </Item>
            <Item label="委托配置" name="DelegatingHandlers">
              <Input allowClear />
            </Item>
            <Item label="路由大小写敏感" name="ReRouteIsCaseSensitive">
              <Radio.Group>
                <Radio value={0}>否</Radio>
                <Radio value={1}>是</Radio>
              </Radio.Group>
            </Item>
            <Item label="下游请求方式" name="DownstreamHttpMethod">
              <Checkbox.Group options={plainOptions} />
            </Item>
          </>
        ) : (
          ''
        )} */}
      </Form>
    </Modal>
  );
};
export default AddModal;