/*
 * @Author: your name
 * @Date: 2022-04-22 11:03:24
 * @Description:
 * @FilePath: /zl-large-screen/src/components/LargeScreenBoardZoom/index.tsx
 */

import React, { useState, useEffect } from 'react';

import Icon from '../Icon/index';

import { ILargeScreenBoardZoomProps } from '../../type/LargeScreenBoard';
import { Select, Slider, Dropdown, Tooltip, Menu } from 'antd';
import { add, subtract, bignumber, format } from 'mathjs';

const { Option } = Select;

let timer = null;
const LargeScreenBoardZoom: React.FC<ILargeScreenBoardZoomProps> = (props) => {
  const { zoomList, zoomChange, preview, zoomValue } = props;

  const [value, setValue] = useState<any>(zoomValue); //? Slider 这个组件 Value接受一个数字 算数的时候 类型有问题 应该初始化 <string | number>
  const [sliderValue, setSilderValue] = useState<any>(zoomValue * 100);
  useEffect(() => {
    setSilderValue(Math.round(zoomValue * 100));
    setValue(`${Math.round(zoomValue * 100)}%`);
  }, [zoomValue]);

  const _change = (value: number) => {
    clearTimeout(timer);
    setSilderValue(value);
    setValue(`${value}%`);

    timer = setTimeout(() => {
      //! 这个地方做了 截流 为了防止多次请求接口 现在 大屏就有这个问题
      const newValue = value / 100;
      zoomChange(newValue);
    }, 300);
  };

  const _selectChange = (key: number | string) => {
    const valueItem = zoomList.find((item) => {
      return item?.key + "" === key;
    });
    zoomChange(valueItem?.value);
  };

  const _set = (value: number, type: string) => {
    if (type === '-') {
      if (value > 0.1) {
        value = subtract(bignumber(value), bignumber(0.01));
      } else {
        value = 0.1;
      }
    } else {
      if (value >= 3) {
        value = 3;
      } else {
        value = add(bignumber(value), bignumber(0.01));
      }
    }

    const _value = parseFloat(format(value, 14));

    const newValue = Math.round(value * 100);
    setSilderValue(newValue);
    setValue(`${newValue}%`);
    zoomChange(_value);
  };

  // 预览
  const previewClick = () => {
    preview();
  };

  // 缩放列表
  const zoomMenu = (options) => {
    const menus = options.map((item) => {
      const { label, key } = item;
      return {
        label,
        key
      };
    });
    return (
      <Menu
        selectable
        selectedKeys={[sliderValue]}
        items={menus}
        onSelect={({ key }) => {
          _selectChange(key);
        }}
      />
    );
  };

  return (
    <div className="zl-ls-board-content-zoom">
      <div className="right-box">
        <Dropdown
          overlayClassName="zl-ls-board-content-select"
          className="select-wrap"
          overlay={() => zoomMenu(Array.isArray(zoomList) ? zoomList : [])}
          placement="bottom"
          trigger="click"
        >
          <Tooltip placement="top" title="缩放">
            {value === 'fit' || value === 'fill' ? '缩放中' : value}
          </Tooltip>
        </Dropdown>
        <div className={`zoom-prev ${sliderValue <= 10 ? "zoom-disabled" : "" }`} onClick={() => _set(zoomValue, '-')}>
          <Icon name="icon-minus" />
        </div>
        <div className="zoom-silder">
          <Slider
            onChange={_change}
            value={sliderValue}
            max={300}
            min={10}
            step={1}
          />
        </div>
        <div className={`zoom-next ${sliderValue >= 300 ? "zoom-disabled" : "" }`} onClick={() => _set(zoomValue, '+')}>
          <Icon name="icon-add" />
        </div>
        <div className="zoom-next" onClick={previewClick}>
          <Icon name="icon-_preview" />
        </div>
      </div>
    </div>
  );
};

export default LargeScreenBoardZoom;