import * as React from 'react';
import {
  FastRow,
  FastCol,
  FastTabs,
  FastModal,
  FastDrawer,
} from 'components/ui';
import { Component } from 'components/types';
import { isArray } from 'utils/isType';
import useLayout from './useLayout';
import './index.scss';

const LOADER_LIST = [
  Component.Basic.Loader.Type.modal,
  Component.Basic.Loader.Type.drawer,
  Component.Basic.Loader.Type.cover,
];

function Layout(props: any) {
  const {
    modules,
    layoutRef,
    componentsRef,
    getContent,
  } = props;
  const {
    tabs,
    exchanges,
    // covers,
    modals,
    drawers,
    allModulesMap,
    setLayoutState,
  } = useLayout(modules, layoutRef);

  // 布局变化回调
  const handleChange = (type: Component.Basic.Layout.Type) => (
    name: string,
    value: string,
  ) => setLayoutState(type, name, value);

  const setLayout = (moduleList: any[], loaderUuid?: string) => (
    <FastRow>
      {moduleList.map((module: any) => {
        const {
          uuid,
          type,
          col,
          modules: childModules,
          loader,
        } = module;
        let content = null;

        if (isArray(childModules) && childModules.length) {
          if (type === Component.Basic.Layout.Type.tabs) {
            const currentChildModule = childModules.find(
              (childModule: any) => childModule.uuid === tabs[uuid],
            );
            content = (
              <>
                <FastTabs
                  defaultActiveKey={tabs[uuid]}
                  onChange={(value: string) => {
                    handleChange(Component.Basic.Layout.Type.tabs)(uuid, value);
                    componentsRef.current[currentChildModule.filter].fetchData({
                      type: 'fetch',
                      moduleIds: [currentChildModule.uuid],
                    });
                  }}
                >
                  {childModules.map((childModule: any) => (
                    childModule.label
                    && <FastTabs.TabPane key={childModule.uuid} tab={childModule.label} />
                  ))}
                </FastTabs>
                {
                  currentChildModule.modules ? setLayout(currentChildModule.modules, loaderUuid)
                    : getContent(tabs[uuid], loaderUuid)
                }
              </>
            );
          } else if (type === Component.Basic.Layout.Type.exchange) {
            const currentChildModule = childModules.find(
              (childModule: any) => childModule.uuid === exchanges[uuid],
            );
            content = currentChildModule.modules ? setLayout(currentChildModule.modules, loaderUuid)
              : getContent(exchanges[uuid]);
          } else if (!LOADER_LIST.includes(loader)) {
            content = setLayout(childModules, loaderUuid);
          }
        } else if (!LOADER_LIST.includes(loader)) {
          content = getContent(uuid, loaderUuid);
        }
        return <FastCol key={uuid} span={col}>{content}</FastCol>;
      })}
    </FastRow>
  );

  return (
    <>
      {setLayout(modules)}
      {modals.map((uuid: string) => (
        <FastModal
          title={allModulesMap[uuid].title}
          key={uuid}
          visible
          footer={false}
          width={allModulesMap[uuid].width}
          onCancel={
            () => setLayoutState(Component.Basic.Loader.Type.modal, uuid, false)
          }
        >
          {allModulesMap[uuid].modules
            ? setLayout(allModulesMap[uuid].modules, uuid)
            : getContent(uuid, uuid)}
        </FastModal>
      ))}
      {
        drawers.map((uuid: string) => (
          <FastDrawer
            title={allModulesMap[uuid].title}
            key={uuid}
            visible
            footer={false}
            width={allModulesMap[uuid].width}
            mask={false}
            onClose={
              () => setLayoutState(Component.Basic.Loader.Type.drawer, uuid, false)
            }
          >
            {allModulesMap[uuid].modules
              ? setLayout(allModulesMap[uuid].modules, uuid) : getContent(uuid, uuid)}
          </FastDrawer>
        ))
      }
    </>
  );
}

export default Layout;