import { useTitle } from 'components/easyUse';
import EasyvNoData from 'components/EasyvNoData';
import Loading from 'components/Loading';
import SharePasswordPage from 'components/SharePassword';
import { RootState } from 'models';
import { getPortalDetailById, getSharedPortalById } from 'models/spaceship';
import { NavItemType, SpaceShipState } from 'models/spaceship.types';
import React, { useCallback, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getRouterConfig, pathNameIsSharedPortal } from 'utils/spaceship';
import PreviewContent from '../component/PreviewContent';

const getCurNavConfigById = (data: NavItemType[], id: number, callback: (x?: NavItemType) => void) => {
  const result = data.find((d) => d.id === id);
  result ? callback(result) : data.map((d) => d.children.length && getCurNavConfigById(d.children, id, callback));
};

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

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

  const [curSelectedNavData, setCurSelectedNavData] = useState<NavItemType>();
  const { name = 'Loading' } = curPortalBaseInfo || {};
  useTitle(name);
  useEffect(() => {
    if (isSpaceShipEdit) {
      dispatch(getPortalDetailById(id));
    } else {
      dispatch(getSharedPortalById(id, undefined, true));
    }
  }, []);

  useEffect(() => {
    getCurNavConfigById(curPortalNavigation || [], curSelectedKey!, (res) => {
      if (res) {
        setCurSelectedNavData(res);
      }
    });
  }, [curSelectedKey, curPortalNavigation]);

  const RenderAuthority = useCallback(() => {
    if (shareStatus === -1) {
      return (
        <div style={{ width: '100vw', height: '100vh', background: '#181b24' }}>
          <SharePasswordPage
            handleSumitPassword={(password) => {
              dispatch(getSharedPortalById(id, password, false));
            }}
          />
        </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 (
    <>
      {!isSpaceShipEdit && [-1, -2, 0, undefined].includes(shareStatus) ? (
        <RenderAuthority />
      ) : (
        <PreviewContent curSelectedNavData={curSelectedNavData} />
      )}
    </>
  );
};

export default NewPagePreview;
