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

import LargeScreenComponentTabs from '../LargeScreenComponentTabs/index';
import LargeScreenComponentSearch from '../LargeScreenComponentSearch/index';
import LargeScreenComponentFiltr from '../LargeScreenComponentFiltr/index';
import LargeScreenComponentUpload from '../LargeScreenComponentUpload/index';
import LargeScreenComponentTitle from '../LargeScreenComponentTitle/index';
import LargeScreenComponentText from '../LargeScreenComponentText/index';
import LargeScreenComponentSelect from '../LargeScreenComponentSelect/index';
import LargeScreenComponentTree from '../LargeScreenComponentTree/index';
import LargeScreenComponentCollapse from '../LargeScreenComponentCollapse/index';
import LargeScreenComponentCard from '../LargeScreenComponentCard/index';
import LargeScreenComponentButton from '../LargeScreenComponentButton/index';
import LargeScreenComponentCheckBox from '../LargeScreenComponentCheckBox/index';
import LargeScreenComponentInputNumber from '../LargeScreenComponentInputNumber/index';
import ControlBtn from '../Control-btn/index';

import { ILargeScreenComponent } from '../../type/LargeScreenComponent';
import { useRecoilState } from 'recoil';
import { sidebarIndexAtom } from '../../store/page';
import { Spin } from 'antd';

import undeveloped_black from '../image/undeveloped_black.png';
import undeveloped_white from '../image/undeveloped_white.png';

import './style.scss';

const LargeScreenComponent: React.FC<ILargeScreenComponent> = (props) => {
  const {
    sidebarDetail = [],
    cardStyle,
    sidebarDetailEvent,
    clickControlBtn,
    componentLoading,
    sceneEvent //3D元件的点击事件
  } = props;
  const { loading, cardLoading } = componentLoading;
  const [controlClass, setControlClass] = useState<string>(''); //控制展开收起按钮样式
  const [wrapClass, setWrapClass] = useState<string>(''); //控制展开收起按钮样式
  const [iconType, setIconType] = useState<string>('icon-arrow-left-bold'); //控制展开收起按钮icon
  const [tabsUpdate, setTabsUpdate] = useState<string | number | boolean>(''); //保存select切换的值
  const [selectUpdate, setSelectUpdate] = useState<string | number | boolean>(
    ''
  ); //保存tabs切换的值
  const [searchUpdate, setSearchUpdate] = useState<string | number | boolean>(
    ''
  ); //保存tabs切换的值

  const [, setCurrentElement] = useRecoilState(sidebarIndexAtom); //页面当前选中的index
  // 更改类型
  const change = (value: any, key: string, type: string) => {
    sidebarDetailEvent(value, key, type);
  };

  useEffect(() => {
    //记录tabs切换的值 更新input的值
    Array.isArray(sidebarDetail) &&
      sidebarDetail?.length > 0 &&
      sidebarDetail.map((item) => {
        if (item?.type === 'tabs') {
          setTabsUpdate(item?.value);
        } else if (item?.type === 'select') {
          setSelectUpdate(item?.value);
        } else if (item?.type === 'filtr') {
          setSearchUpdate(item?.value);
        }
      });
  }, [sidebarDetail]);

  const renderComponent = (item) => {
    switch (item?.type) {
      case 'tabs':
        return (
          <LargeScreenComponentTabs
            key={item?.key}
            {...item}
            change={(value) => change(value, item?.key, item?.type)}
          />
        );
        break;
      case 'search':
        return (
          <LargeScreenComponentSearch
            key={item?.key}
            {...item}
            tabsUpdate={tabsUpdate}
            selectUpdate={selectUpdate}
            searchUpdate={searchUpdate}
            change={(...rest) => change(rest, item?.key, item?.type)}
          />
        );
        break;
      case 'filtr':
        return (
          <LargeScreenComponentFiltr
            key={item?.key}
            {...item}
            change={(...rest) => change(rest, item?.key, item?.type)}
          />
        );
        break;
      case 'upload':
        return (
          <LargeScreenComponentUpload
            key={item?.key}
            {...item}
            change={(...rest) => change(rest, item?.key, item?.type)}
          />
        );
        break;
      case 'text':
        return (
          <LargeScreenComponentText
            key={item?.key}
            {...item}
            change={() => change(item, item?.key, item?.type)}
          />
        );
        break;
      case 'select':
        return (
          <LargeScreenComponentSelect
            key={item?.key}
            {...item}
            change={(...rest) => change(rest, item?.key, item?.type)}
          />
        );
        break;
      case 'tree':
        return (
          <LargeScreenComponentTree
            key={item?.key}
            {...item}
            change={(...rest) => change(rest, item?.key, item?.type)}
          />
        );
        break;
      case 'collapse':
        return (
          <LargeScreenComponentCollapse
            key={item?.key}
            height={item?.height}
            {...item}
            cardStyle={cardStyle}
            change={(...rest) => change(rest, item?.key, item?.type)}
          />
        );
        break;
      case 'card':
        return (
          <LargeScreenComponentCard
            key={item?.key}
            height={item?.height}
            {...item}
            cardStyle={cardStyle}
            cardLoading={cardLoading}
            change={(...rest) => change(rest, item?.key, item?.type)}
            sceneEvent={sceneEvent}
          />
        );
        break;
      case 'button':
        return (
          <LargeScreenComponentButton
            key={item?.key}
            {...item}
            change={() => change(null, item?.key, item?.type)}
          />
        );
        break;
      case 'title':
        return <LargeScreenComponentTitle key={item?.key} {...item} />;
        break;
      case 'checkBox':
        return (
          <LargeScreenComponentCheckBox
            key={item?.key}
            {...item}
            change={(value) => change(value, item?.key, item?.type)}
          />
        );
        break;
      case 'inputNumber':
        return (
          <LargeScreenComponentInputNumber
            key={item?.key}
            change={(rest) => change(rest, item?.key, item?.type)}
            {...item}
          />
        );
        break;
    }
  };

  //展开收起的样式
  const controlBtnClick = () => {
    if (wrapClass) {
      setWrapClass('');
      setControlClass('');
      setIconType('icon-arrow-right-bold');
    } else {
      setWrapClass('zl-component-com-siler-close');
      setControlClass('zl-right-control-up');
      setIconType('icon-arrow-left-bold');
    }
    clickControlBtn?.('component');
  };
  return (
    <div className="zl-large-screen-component">
      <ControlBtn
        style={{
          right: -20,
          borderRadius: '0 4px 4px 0',
          boxShadow: ' 0 4px 9px 0 rgb(0 0 0 / 8%)'
        }}
        click={controlBtnClick}
        className={controlClass}
        iconType={iconType}
      />
      <div
        className={`zl-large-screen-component-wrap ${wrapClass}`}
        onScroll={() => {
          sidebarDetailEvent(null, null, 'scroll');
        }}
      >
        {sidebarDetail?.length === 0 ? (
          <div className="zl-large-screen-component-empty">
            <img
              className="black-undeveloped"
              src={undeveloped_black}
              alt="暂未开发"
              width="100%"
              height="100%"
            />
            <img
              className="white-undeveloped"
              src={undeveloped_white}
              alt="暂未开发"
              width="100%"
              height="100%"
            />
            <span className="undeveloped-text">正在开发敬请期待~</span>
          </div>
        ) : (
          <></>
        )}
        {sidebarDetail?.length > 0 &&
          sidebarDetail?.map((item) => {
            return renderComponent(item);
          })}
      </div>
      {loading ? (
        <div className="zl-large-screen-component-loading">
          <Spin />
        </div>
      ) : (
        <></>
      )}
    </div>
  );
};

export default LargeScreenComponent;