import React, { useState, useEffect } from 'react';
import ChartColorPicker from '../RegularColorPicker/ColorPicker';
import { InputNumber, Popover, Tooltip } from 'antd';

export default function twoInput(props: IProps) {
  const {
    color,
    max,
    min,
    index,
    theme = 'white',
    fillType = '',
    isPure = false,
    change,
    status,
    length
  } = props;
  const dom = document; // document
  const [close, setClose] = useState(true);
  const [minValue, setMinValue] = useState(min);
  const [maxValue, setMaxValue] = useState(max);
  const [visible, setVisible] = useState(false);
  const [oldMax, setOldMax] = useState(0);
  const [oldMin, setOldMin] = useState(0);
  useEffect(() => {
    setMinValue(min);
  }, [min]);

  useEffect(() => {
    setMaxValue(max);
  }, [max]);

  useEffect(() => {
    setOldMax(max);
  }, []);

  useEffect(() => {
    setOldMin(min);
  }, []);

  useEffect(() => {
    dom.addEventListener('mousedown', isPopover);
    return () => {
      dom?.removeEventListener('mousedown', isPopover);
    };
  }, []);

  const isPopover = (e) => {
    if (
      !(
        elementContains(
          document.querySelector('.color-pick-select'),
          e.target
        ) ||
        elementContains(document.querySelector('.colorPopover'), e.target) ||
        elementContains(
          document.querySelector('.zl-large-screen-setting'),
          e.target
        )
      )
    ) {
      setClose(true);
    }
  };
  // 判断父元素是否包含某个元素
  const elementContains = (parent, child) =>
    parent !== child && parent?.contains(child);

  //确认事件
  const handleChange = (params, type) => {
    change(params, type, index - 1);
    setClose(true);
  };

  const content1 = (value) => {
    return (
      <div>
        <ChartColorPicker
          theme={theme}
          type={fillType}
          isPure={isPure}
          value={value}
          gradientConfig={
            typeof value === 'string'
              ? {
                  current: 0,
                  colorGroups: [],
                  angle: 0
                }
              : value
          }
          footer={{ okText: '确认', cancelText: '取消' }}
          handleOk={(params) => {
            handleChange(params, 'twoInputColor');
          }}
          handleCancel={(_) => {}}
          handleParams={() => {
            setClose(true);
          }}
        />
      </div>
    );
  };

  return (
    <div className="toInput">
      <Popover
        placement="bottom"
        content={content1(color)}
        trigger="click"
        overlayClassName={`colorPopover ${
          theme !== 'white' ? 'dark' : 'white'
        }`}
        destroyTooltipOnHide={true}
        zIndex={1090}
        visible={!close}
      >
        <span
          className="showColor"
          style={{ background: color }}
          onClick={() => {
            setClose(!close);
          }}
        />
      </Popover>
      <InputNumber
        placeholder={
          minValue === -Infinity || minValue === Infinity ? '请输入' : ''
        }
        title={`${minValue === null ? '' : minValue}`}
        addonAfter="≤"
        value={minValue}
        controls={false}
        style={{ width: 88, height: 22 }}
        disabled={index === 1 ? false : true}
        onChange={(value) => {
          setMinValue(value);
        }}
        onBlur={() => {
          if (minValue === null) {
            setMinValue(oldMin);
          }
          change(
            minValue === null ? oldMin : minValue,
            'twoInputMin',
            index - 1
          );
        }}
        onPressEnter={() => {
          change(
            minValue === null ? oldMin : minValue,
            'twoInputMin',
            index - 1
          );
        }}
      />
      <span className="showIcon">~</span>
      <Tooltip
        title={'后面值需大于前面的值'}
        color={'red'}
        visible={maxValue <= minValue && visible}
      >
        <div
          onMouseOver={() => {
            setVisible(true);
          }}
          onMouseOut={() => {
            setVisible(false);
          }}
        >
          <InputNumber
            placeholder={
              maxValue === -Infinity || maxValue === Infinity ? '请输入' : ''
            }
            title={`${maxValue === null ? '' : maxValue}`}
            addonBefore={index === length ? '≤' : '<'}
            value={maxValue}
            controls={false}
            status={maxValue <= minValue ? 'error' : ''}
            style={{ width: 88, height: 22 }}
            onChange={(value) => {
              change?.(value, 'twoInputMaxChange', index - 1);

              setMaxValue(value);
            }}
            onBlur={() => {
              if (
                status !== '' ||
                (maxValue <= minValue && maxValue === 0) ||
                maxValue === null
              ) {
                setMaxValue(oldMax);
              }
              change(
                maxValue <= minValue || maxValue === null ? oldMax : maxValue,
                'twoInputMax',
                index - 1
              );
            }}
            onPressEnter={() => {
              if (status !== '') {
                setMaxValue(oldMax);
              }

              change(
                maxValue <= minValue ? oldMax : maxValue,
                'twoInputMax',
                index - 1
              );
            }}
          />
        </div>
      </Tooltip>
    </div>
  );
}

export interface IProps {
  color: string;
  max: number;
  mix?: number;
  min?: number;
  index?: number;
  theme?: string;
  fillType?: string;
  isPure?: boolean;
  change?: Function;
  status?: string;
  length?: number;
}