import React, { useEffect } from 'react';
import styles from './style.less';
import { useDispatch, useSelector } from 'react-redux';
import { SpaceShipState } from 'models/spaceship.types';
import { getPortalDetailById } from 'models/spaceship';
import { useTitle } from 'components/easyUse';
import NavSideBar from '../component/NavListSidebar';
import SpaceShipEditHeader from '../component/Header';
import ConfigSidebar from '../component/ConfigSidebar';
import PreviewContent from '../component/PreviewContent';
import { deepFindOne } from 'utils/utils';
import { getHeight, getPortalId } from 'utils/spaceship';
import { RootState } from 'models';

const SpaceShipEdit = () => {
  const id = getPortalId();
  const dispatch = useDispatch();
  const spaceShip = useSelector<RootState>((state) => state.spaceShip) as SpaceShipState;
  const { curSelectedKeys, curPortalBaseInfo, curPortalNavigation = [] } = spaceShip;
  const { name = 'Loading' } = curPortalBaseInfo || {};
  useTitle(name);
  useEffect(() => {
    dispatch(getPortalDetailById(id));
  }, []);
  return (
    <div className={styles.container}>
      <SpaceShipEditHeader curSelectedKeys={curSelectedKeys} name={curPortalBaseInfo?.title || '未命名'} />
      <div className={styles.content}>
        {[0, 1].includes(curPortalBaseInfo?.navBarLayout) && <NavSideBar />}
        <div className={styles.previewWrapper} style={{ height: getHeight(curPortalBaseInfo) }}>
          {curPortalBaseInfo?.navBarLayout === 2 && <NavSideBar />}
          <PreviewContent curSelectedNavData={deepFindOne(curPortalNavigation || [], (item) => item.id === curSelectedKeys, `children`)} />
        </div>
        <ConfigSidebar />
      </div>
    </div>
  );
};

export default SpaceShipEdit;
