import React, { useState, useEffect } from 'react';
import isEqual from 'lodash/isEqual';
import styles from './API.less';
import { EasyBoolean, Input, Tooltip } from '@easyv/react-gui';
import { QuestionCircleOutlined } from '@ant-design/icons';


const SOCKET = ({
  type,
  dataList = [],
  dataConfig = {},
  onChange
}: {
  type: string;
  dataList: any;
  dataConfig: any;
  onChange: (config) => any;
}) => {
  const [dataId, setDataId] = useState('');
  const [baseURL, setBaseURL] = useState('');
  const [params, setParams] = useState('');
  const [reqFromBack, setReqFromBack] = useState(false);

  // init base url
  useEffect(() => {
    const baseURL = (dataList.find((o) => o.id === dataConfig.data_id) || {}).baseURL;
    setBaseURL(baseURL);
  }, [dataList, dataConfig.data_id]);

  // init data config
  useEffect(() => {
    !isEqual(dataId, dataConfig.data_id) && setDataId(dataConfig.data_id || '');
    !isEqual(params, dataConfig.params) && setParams(dataConfig.params || '');
    dataConfig.reqFromBack
      ? dataConfig.reqFromBack === (true || false) &&
        !isEqual(reqFromBack, dataConfig.reqFromBack) &&
        setReqFromBack(dataConfig.reqFromBack)
      : setReqFromBack(type === 'ws' ? false : true);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dataConfig]);

  const updateDataConfig = (dataConfig) => {
    onChange({
      data: {
        data_id: dataId,
        params,
        reqFromBack,
        ...dataConfig
      }
    });
  };

  const onBlur = () => {
 
  };

  const handlePath = (e) => {
    console.log(e);
  };

  const handleParams = (e) => {
    const value = e.target.value;
    setParams(value);
  };

  const handleReqFromBack = (value) => {
    setReqFromBack(value);
    updateDataConfig({ reqFromBack: value });
  };

  return (
    <div className={styles.apiContainer}>
      <div className={styles.apiWrap}>
        <label className={styles.label}>Base URL</label>
        <div style={{ flex: 1 }}>
          <Input value={baseURL} disabled title={baseURL} />
        </div>
      </div>
   
      <div className={styles.apiWrap}>
        <label className={styles.label}>参数</label>
        <div style={{ flex: 1 }}>
          <Input value={params} onChange={handleParams} onBlur={onBlur} />
        </div>
      </div>
      <div className={styles.apiWrap}>
        <label className={styles.label}>节流时长  <Tooltip title="每隔N毫秒接受一次服务器消息">
              <QuestionCircleOutlined className="whiteHover" />
            </Tooltip></label>
        <div style={{ flex: 1 }}>
          <Input type='number' value={200} onChange={handlePath} onBlur={onBlur} addonAfter="ms" />
        </div>
      </div>
      {type === 'api' && (
        <React.Fragment>
          <div style={{ color: '#AFBAC0', marginBottom: 20 }}>
            <EasyBoolean value={reqFromBack} onChange={handleReqFromBack}>
              后端发起请求
            </EasyBoolean>
            <Tooltip title="存在跨域问题可勾选">
              <QuestionCircleOutlined className="whiteHover" />
            </Tooltip>
          </div>
        </React.Fragment>
      )}
    </div>
  );
};

export default SOCKET;
