/*
 * @Author: your name
 * @Date: 2022-04-21 17:49:04
 * @Description:
 * @FilePath: /zl-large-screen/src/components/LargeScreenBoardTitle/index.tsx
 */

import React, { useContext } from 'react';

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

import { Tooltip, Popover, Switch, InputNumber, Select, Space } from 'antd';
import { CaretDownOutlined } from '@ant-design/icons';
import { Board } from '../LargeScreenBoard/index';
import {
  ILargeScreenBoardTitle,
  IBoardTitleIcon
} from '../../type/LargeScreenBoard';

const LargeScreenBoardTitle: React.FC<ILargeScreenBoardTitle> = (props) => {
  const { leftIcons: leftIconList, rightIcons: rightIconList } =
    useContext(Board);
  const { click } = props;

  const content = (icon) => {
    return (
      <div className="zl-ls-board-title-refrash zl-large-screen-setting-wrap">
        <p>
        <Space size="small" align="center">定时刷新：
          <Switch
            checked={icon?.data?.enable}
            size="small"
            onChange={() => click?.({...icon, data: {...icon?.data, enable:!icon?.data?.enable}})}
          />
          </Space>
        </p>
        <p>
        <Space size="small" align="center">刷新频率:
          <InputNumber
            style={{ width: 100, height: 30 }}
            min={1}
            value={icon?.data?.interval}
            onPressEnter={(e) => click?.({...icon, data: {...icon?.data, interval:e.target.value}})}
            onBlur={(e) => click?.({...icon, data: {...icon?.data, interval:e.target.value}})}
            onChange={(value:number) => click?.({...icon, data: {...icon?.data, interval: value},type:'change'})}
          />
          <Select
            suffixIcon={<CaretDownOutlined style={{ color: '#5d6773' }} />}
            dropdownClassName='zl-large-screen-select'
            value={icon?.data?.unit}
            style={{ width: 80 }}
            onChange={(value: string) => click?.({...icon, data: {...icon?.data, unit:value}})}
            options={[
              { value: '秒', label: '秒' },
              { value: '分钟', label: '分钟' },
              { value: '小时', label: '小时' },
              { value: '天', label: '天' }
            ]}
          />
          </Space>
        </p>
        <p className="zl-ls-board-title-refrash-tip">
          *
          为保证编辑时操作性能，定时刷新仅在预览及分享时生效，编辑模式下可手动刷新图表数据
        </p>
      </div>
    );
  };

  const returnIcon = (icon: IBoardTitleIcon): React.ReactNode => {
    const { name, disabled, label, selected = false, hasName, data, show = true, switcher = false } = icon;
    let classnames = hasName
      ? ['zl-ls-board-title-icon-wrap zl-ls-board-title-icon-wrap-hasName']
      : ['zl-ls-board-title-icon-wrap'];

    if (!disabled) {
      classnames.push('disabled');
    }
    if (selected) {
      classnames.push('selected');
    }
    if (icon?.key === 'interval') {
      return <div className="zl-ls-board-interval"></div>;
    } else {
      return (
        show? 
        <div className={classnames.join(' ')}>
          {hasName ? (
            <div
              className="zl-ls-board-title-icon-wrap-hasName"
              onClick={() => {
                if (icon?.key === 'clearLink') {
                  disabled && click?.(icon);
                } else if (!data) {
                  click?.(icon);
                }
              }}
            >
              {icon?.key === 'refreshChartsSetting' ? (
                <Popover
                  placement="bottom"
                  content={() => content(icon)}
                  trigger="click"
                  popupClassName="zl-ls-board-title-refrash-popover"
                >
                    <Icon name={name} />
                  <span>{label}</span>
                </Popover>
              ) : (
                <>
                  {switcher ? <Switch size="small" className="zl-ls-board-title-switch" checked={disabled} />
                    :<Icon name={name} />}
                  <span>{label}</span>
                </>
              )}
            </div>
          ) : (
            <Tooltip placement="bottom" title={label} key={icon?.key}>
              <Icon
                click={() => {
                  if (icon?.key === 'clearLink') {
                    disabled && click?.(icon);
                  } else {
                    click?.(icon);
                  }
                }}
                name={name}
              />
            </Tooltip>
          )}
        </div>
        :<></>
      );
    }
  };

  return (
    <div className="zl-ls-board-title">
      <div className="icon-box">
        {Array.isArray(leftIconList) &&
          leftIconList?.length > 0 &&
          leftIconList.map((icon) => {
            return returnIcon(icon);
          })}
      </div>
      <div className="icon-box" style={{ marginRight: 10 }}>
        {Array.isArray(rightIconList) &&
          rightIconList?.length > 0 &&
          rightIconList.map((icon) => {
            return returnIcon(icon);
          })}
      </div>
    </div>
  );
};

export default LargeScreenBoardTitle;