/*
 * @Author: your name
 * @Date: 2022-04-11 15:53:05
 * @Description: 统一布局组件
 * @FilePath: /zl-large-screen/src/components/LargeScreenUnitWrap/index.tsx
 */

import React, { useEffect, useState } from 'react';
import Icon from '../Icon/index';
import { IBlockTitle } from '../../type/LargeScreenBlockTitle';
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, Menu } from 'antd';

import './style.scss';

function LargeScreenBlockTitle(props: IBlockTitle) {
  const {
    titleType,
    tabsList,
    title,
    tabsEvent,
    activeTab,
    rightBtn,
    scenesEvent,
    layerListEvent,
    layerType,
    clickBack,
    isClick = false
  } = props;
  const [layerTypeState, setLayerTypeState] = useState(layerType); // 2D/3D

  useEffect(() => {
    setLayerTypeState(layerType);
  }, [layerType]);

  //添加场景
  const addScene = () => {
    // 清空选中的页面
    scenesEvent?.('addScene');
  };

  // 2D/3D
  const items = [
    {
      key: '2D',
      label: '2D'
    },
    {
      key: '3D',
      label: '3D'
    }
  ];

  // 2D/3D点击事件
  const menuClick = (value: string) => {
    layerListEvent?.(null, value, value, 'changeLayerType');
  };
  return (
    <>
      {isClick ? (
        <div className="zl-ls-block-title-click" onClick={() => clickBack()}>
          <Icon style={{ marginRight: 8 }} name="icon-_pageBack" />
          <span>{title}</span>
        </div>
      ) : (
        <div
          style={{
            justifyContent: 'space-between'
          }}
          className={
            titleType !== 'tabs' ? 'zl-ls-block-title' : 'zl-ls-block-tabs'
          }
        >
          {title === '图层列表' ? (
            <div className="zl-ls-block-layer-title">
              <span>图层列表</span>
              <Dropdown
                overlayClassName="zl-ls-block-layer-dropdown"
                overlay={
                  <Menu
                    onClick={({ key }) => menuClick(key)}
                    selectedKeys={[layerTypeState]}
                    items={items}
                  />
                }
                trigger="click"
              >
                <div className="zl-ls-block-layer-dropdown-title">
                  <span>{layerTypeState}</span>
                  <DownOutlined />
                </div>
              </Dropdown>
            </div>
          ) : rightBtn ? (
            <>
              <span>{title ?? '页面'}</span>
              <p className="zl-ls-block-title-add" onClick={addScene}>
                <Icon name={rightBtn} />
              </p>
            </>
          ) : titleType === 'tabs' ? (
            <ul>
              {Array.isArray(tabsList) &&
                tabsList?.length > 0 &&
                tabsList?.map((item) => {
                  return (
                    <li
                      onClick={() => {
                        tabsEvent(item?.key);
                      }}
                      className={`${activeTab === item?.key ? 'active' : ''} ${
                        tabsList?.length > 2 ? 'three' : 'two'
                      }`}
                      key={item?.key}
                    >
                      <span>{item?.name}</span>
                    </li>
                  );
                })}
            </ul>
          ) : (
            <>{title ?? '页面'}</>
          )}
        </div>
      )}
    </>
  );
}

export default LargeScreenBlockTitle;