/*
 * @Author: your name
 * @Date: 2022-04-21 10:57:31
 * @Description:
 * @FilePath: /zl-large-screen/src/components/LargeScreenElement/LargeScreenElementCards/index.tsx
 */

import React from 'react';

import { ILargeScreenElementCardsProps } from '../../../type/LargeScreenElement';

import SearchInput from '../../SearchInput/index';
import LargeScreenElementSubMenu from '../LargeScreenElementSubMenu/index';
import LargeScreenElementCardList from '../LargeScreenElementCardList/index';
import LargeScreenComponent from '../../LargeScreenComponent/index';

const LargeScreenElementCards: React.FC<ILargeScreenElementCardsProps> = (
  props
) => {
  const {
    search,
    structure,
    subList,
    subSilderClick,
    cardList,
    dragStart,
    sidebarDetail,
    cardStyle,
    componentLoading,
    sidebarDetailEvent,
    doubleClick,
    sceneEvent,
    cardMouseDown
  } = props;

  return (
    <div className="zl-ls-element-content-cards">
      {structure && structure?.includes('search') ? (
        <SearchInput change={search} />
      ) : null}
      <div
        className="zl-ls-element-content-cards-content"
        style={{
          height: structure?.includes('search') ? 'calc(100% - 36px)' : '100%'
        }}
      >
        {structure && structure?.includes('subSilder') ? (
          <>
            <LargeScreenElementSubMenu list={subList} click={subSilderClick} />
            <LargeScreenElementCardList
              list={cardList}
              sceneEvent={sceneEvent}
              cardMouseDown={cardMouseDown}
            />
          </>
        ) : null}
        {structure && structure?.includes('cardList') ? (
          <LargeScreenElementCardList
            list={cardList}
            dragStart={dragStart}
            doubleClick={doubleClick}
            cardMouseDown={cardMouseDown}
          />
        ) : null}
        {structure && structure?.includes('component') ? (
          <LargeScreenComponent
            sidebarDetail={sidebarDetail}
            cardStyle={cardStyle}
            componentLoading={componentLoading}
            sidebarDetailEvent={sidebarDetailEvent}
            sceneEvent={sceneEvent}
            cardMouseDown={cardMouseDown}
          />
        ) : null}
      </div>
    </div>
  );
};

export default LargeScreenElementCards;