import classNames from 'classnames';
import EasyvNoData from '@/components/EasyvNoData';
import Loading from '@/components/Loading';
import message from '@/components/message';
import ScreenDetail from '@/containers/screen-detail/components/screenDetail';
import { RootState } from 'models';
import { NavItemType, SpaceShipState } from '@/models/spaceship.types';
import React, { useCallback, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { getScreenDataByPathName } from '@/services/screen';
import styles from './style.less';
interface Props {
  curSelectedNavData: NavItemType;
}

const getTextByQuoteType = (v: -1 | 0) => {
  return v === -1 ? '本页还未引用任何内容' : '本页已设置为空，预览不进行展示';
};

const PreviewContent = (props: Props) => {
  const spaceShip = useSelector<RootState>((state) => state.spaceShip) as SpaceShipState;
  const { curPortalBaseInfo, curPortalNavigation } = spaceShip;
  const { curSelectedNavData } = props;
  const [display, setDisplay] = useState<0 | 1 | 2>(0); // 0 loading 1存在大屏展示 2不存在大屏

  useEffect(() => {
    if (curSelectedNavData?.quoteType === 2) {
      if (curSelectedNavData?.screenId === 0) {
        setDisplay(2);
        return;
      }
      getScreenDataByPathName({
        params: { screenId: curSelectedNavData?.screenId },
        options: {
          error: () => {
            if (curSelectedNavData?.screenId !== 0) {
              message.error('应用不存在');
            }
          },
        },
      }).then((res) => {
        if (res) {
          setDisplay(1);
          return;
        }
        setDisplay(2);
      });
    }
  }, [curSelectedNavData]);

  const RenderContent = useCallback(() => {
    switch (curSelectedNavData?.quoteType) {
      case 1: {
        if (curSelectedNavData.quotelink) {
          return (
            <iframe
              width="100%"
              height="100%"
              frameBorder={0}
              src={curSelectedNavData.quotelink}></iframe>
          );
        }
        return (
          <EasyvNoData
            theme={curPortalBaseInfo?.thumbColor?.name}
            style={{ height: 'inherit', objectFit: 'contain' }}
            text="本页还未引用任何内容"
          />
        );
      }
      case 2: {
        if (display === 0) {
          return <Loading />;
        }
        if (display == 1) {
          return <ScreenDetail screenId={curSelectedNavData.screenId} />;
        }
        return (
          <EasyvNoData
            theme={curPortalBaseInfo?.thumbColor?.name}
            style={{ height: 'inherit', objectFit: 'contain' }}
            text="本页还未引用任何内容"
          />
        );
      }
      case -1:
      case 0: {
        return (
          <EasyvNoData
            theme={curPortalBaseInfo?.thumbColor?.name}
            style={{ height: 'inherit', objectFit: 'contain' }}
            text={getTextByQuoteType(curSelectedNavData?.quoteType)}
          />
        );
      }
      default:
        return <Loading />;
    }
  }, [curSelectedNavData, display]);

  return (
    <div
      className={classNames(styles.previewContent, {
        [styles.bcWhite]: curPortalBaseInfo?.thumbColor?.name === 'white',
      })}
      style={{ animation: 'mymove 2s infinite' }}>
      <div id="spaceship-previewContainer" className={styles.screenContainer}>
        <RenderContent />
      </div>
    </div>
  );
};

export default PreviewContent;
