import { useTitle } from 'components/easyUse';
import EasyvNoData from 'components/EasyvNoData';
import Loading from 'components/Loading';
import message from 'components/message';
import SharePasswordPage from 'components/SharePassword';
import { RootState } from 'models';
import { getPortalDetailById, getSharedPortalById } from 'models/spaceship';
import { SpaceShipState } from 'models/spaceship.types';
import React, { useCallback, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getRouterConfig, pathNameIsSharedPortal } from 'utils/spaceship';
import { deepFindOne, pwdValidate } from 'utils/utils';
import NavSideBar from '../component/NavListSidebar';
import PreviewContent from '../component/PreviewContent';
import styles from './style.less';

const CurPagePreview = () => {
  const hrefConfig = getRouterConfig();
  const { id } = hrefConfig;
  const isSpaceShipEditOrPreview = !pathNameIsSharedPortal(); //如果是驾驶舱编辑和驾驶舱预览
  const dispatch = useDispatch();

  const spaceShip = useSelector<RootState>((state) => state.spaceShip) as SpaceShipState;
  const { curSelectedKeys, shareStatus, curPortalBaseInfo, curPortalNavigation = [] } = spaceShip;

  const { name = 'Loading' } = curPortalBaseInfo || {};

  useTitle(name);

  useEffect(() => {
    if (isSpaceShipEditOrPreview) {
      dispatch(getPortalDetailById(id));
    } else {
      dispatch(getSharedPortalById(id, undefined, true));
    }
  }, []);

  const RenderAuthority = useCallback(() => {
    if (shareStatus === -1) {
      return (
        <div style={{ width: '100vw', height: '100vh', background: '#181b24' }}>
          <SharePasswordPage
            handleSumitPassword={(password) => {
              if (pwdValidate(password)) {
                dispatch(getSharedPortalById(id, password, false));
                return;
              }
              message.error('请输入字母或数字,长度6-20位');
            }}
          />
        </div>
      );
    }
    if (shareStatus === -2) {
      return (
        <EasyvNoData
          theme={curPortalBaseInfo?.thumbColor?.name}
          style={{ height: 'inherit', objectFit: 'contain' }}
          text="token过期或token不存在"
        />
      );
    }
    if (shareStatus === 0) {
      return (
        <EasyvNoData
          style={{ height: '100vh', background: '#181924' }}
          text={
            <>
              <p style={{ color: '#fff', fontSize: 16, lineHeight: '40px', fontWeight: 600, textAlign: 'center' }}>
                您访问的门户应用不存在或已被删除
              </p>
              <p style={{ color: '#B4B7C1', fontSize: 14, textAlign: 'center' }}>
                您访问的门户应用不存在或已被删除，请确认访问的门户应用是否存在
              </p>
            </>
          }
        />
      );
    }
    return <Loading />;
  }, [shareStatus, id]);

  return (
    <>
      {!isSpaceShipEditOrPreview && [-1, -2, 0, undefined].includes(shareStatus) ? (
        <RenderAuthority />
      ) : (
        <div className={styles.container}>
          <div className={styles.content}>
            {[0, 1].includes(curPortalBaseInfo?.navBarLayout || 0) && <NavSideBar />}
            <div className={styles.previewWrapper}>
              {curPortalBaseInfo?.navBarLayout === 2 && <NavSideBar />}
              <PreviewContent
                curSelectedNavData={deepFindOne(curPortalNavigation || [], (item) => item.id === curSelectedKeys, `children`)}
              />
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default CurPagePreview;
