import {
  CloseOutlined,
  PlusCircleOutlined,
  ZoomOutOutlined,
  MinusCircleOutlined,
  MinusOutlined,
} from '@ant-design/icons';
import { useState, useContext } from 'react';
import classNames from 'classnames';
import { ConfigProvider } from 'antd';
import './index.less';
const Header = (props) => {
  const [showIcon, setShowIcon] = useState(true);
  const [windowStatus, setWindowStatus] = useState(true);
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('panda-gis-tipHeader');
  const { headerSetting, events, changeStyle, changeScale } = props;
  const { scaleChange, windowChange, smallChange, tipClose } = events;
  const getWinChange = (icon) => {
    let name;
    setShowIcon(!icon);
    showIcon ? (name = 'large') : (name = 'middle');
    let windowStyle = changeStyle({ name });
    windowChange({ name, ...windowStyle });
  };
  const getWindowStatus = (flag) => {
    setWindowStatus(flag);
    let scaleStyle = changeScale(flag);
    smallChange({ flag, ...scaleStyle });
  };
  const iconStyle = () => {
    if (windowStatus) {
      return {
        icon: { display: 'inline-block' },
        other: { width: '70%' },
        header: { width: '30%' },
      };
    } else {
      return { icon: { display: 'none' }, other: { width: '0%' }, header: { width: '100%' } };
    }
  };
  return (
    <div className={classNames(`${prefixCls}-Tiphead`)}>
      <div
        onClick={getWindowStatus.bind(this, true)}
        className={classNames(`${prefixCls}-TipheadTitle`)}
        style={iconStyle().header}
      >
        <span>{headerSetting.layerName}</span>
        <span>-</span>
        <span>{headerSetting.oid}</span>
      </div>

      <div className={classNames(`${prefixCls}-iconList`)} style={iconStyle().other}>
        <div style={iconStyle().icon}>
          <span className={classNames(`${prefixCls}-icons`)} title="缩放" onClick={scaleChange}>
            <ZoomOutOutlined />
            <span className={classNames(`${prefixCls}-words`)}>缩放至</span>
          </span>
          <span
            className={classNames(`${prefixCls}-icons`)}
            onClick={getWinChange.bind(this, showIcon)}
          >
            {showIcon ? <PlusCircleOutlined /> : <MinusCircleOutlined />}
          </span>
          <span
            className={classNames(`${prefixCls}-icons`)}
            onClick={getWindowStatus.bind(this, false)}
          >
            <MinusOutlined />
          </span>
        </div>
        <span className={classNames(`${prefixCls}-icons`)} onClick={tipClose}>
          <CloseOutlined />
        </span>
      </div>
    </div>
  );
};
export { Header };
