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

import React from 'react';

import LargeScreenSidebar from '../LargeScreenSidebar/index';
import LargeScreenScene from '../LargeScreenScene/index';
import LargeScreenLayer from '../LargeScreenLayer/index';
import LargeScreenElement from '../LargeScreenElement/index';
import LargeScreenSetting from '../LargeScreenSetting/index';
import LargeScreenBoard from '../LargeScreenBoard/index';
import LargeScreenComponent from '../LargeScreenComponent/index';
import LargeScreenPage from '../LargeScreenPage/index';

import { ILayoutOpt } from '../../type/largeScreenLayout';

import './style.scss';

function LargeScreenUnitWrap(props: ILayoutOpt) {
  const { width, show, component, ...args } = props;
  const returnDom = (name: string): any => {
    switch (name) {
      case 'LargeScreenSidebar':
        return <LargeScreenSidebar {...args} />;
      case 'LargeScreenComponent':
        return <LargeScreenComponent {...args} />;
      case 'LargeScreenPage':
        return <LargeScreenPage {...args} />;
      case 'LargeScreenPageAndLayer':
        return (
          <div className="zl-lagre-screen-wrap">
            <LargeScreenScene {...args} />
            <LargeScreenLayer {...args} />
          </div>
        );
      case 'LargeScreenLayer':
        return <LargeScreenLayer {...args} />;
      case 'LargeScreenElement':
        return <LargeScreenElement {...args} />;
      case 'LargeScreenSetting':
        return <LargeScreenSetting {...args} />;
      case 'LargeScreenBoard':
        return (
          <LargeScreenBoard
            {...args}
            toolBar={{ leftIcon: [], rightIcon: [] }}
            scale={1}
            zoomValue={1}
          />
        );
      default:
        return null;
    }
  };

  const returnStyle = (width: number | string): React.CSSProperties => {
    if (width === 'auto') {
      return {
        minWidth: 288,
        flex: '1 1'
      };
    } else if (typeof width === 'number') {
      return { width };
    } else {
      return {};
    }
  };
  if (show) {
    return (
      <div className="zl-ls-unit-wrap" style={returnStyle(width)}>
        {returnDom(component)}
      </div>
    );
  } else {
    // ! 这个地方直接判断 就不走 style判断
    // ! 样式判断会先渲染再次隐藏
    return null;
  }
}

export default LargeScreenUnitWrap;