import classNames from 'classnames';
import React, { useState } from 'react';
import NavTreeSelect from './NavTreeSelect';
import styles from './lftRgtNavSidebar.less';
import { useSelector } from 'react-redux';
import { SpaceShipState } from 'models/spaceship.types';
import { RootState } from 'models';
import NavExpanIcon from './NavExpanIcon';

interface Props {
  style?: React.CSSProperties;
}
// 导航位置 0-左侧 1-右侧 2-顶部 3-底部 (服务端预留了底部，前端
const getNavClassNameByPortal = (
  portalData: SpaceShipState['curPortalBaseInfo'],
  display: boolean,
  loading?: boolean,
  id?: number,
) => {
  if (portalData?.navBarLayout === 0) {
    return portalData.thumbColor?.name === 'black'
      ? classNames(styles.navSidebar, styles.bcBlackLeft, {
          [styles.changeWidth]: display,
          [styles.loading]: loading && id,
        })
      : classNames(styles.navSidebar, styles.bcWhiteLeft, {
          [styles.changeWidth]: display,
          [styles.loading]: loading && id,
        });
  }
  if (portalData?.navBarLayout === 1) {
    return portalData.thumbColor?.name === 'black'
      ? classNames(styles.navSidebar, styles.bcBlackRight, {
          [styles.changeWidth]: display,
          [styles.loading]: loading && id,
        })
      : classNames(styles.navSidebar, styles.bcWhiteRight, {
          [styles.changeWidth]: display,
          [styles.loading]: loading && id,
        });
  }
};

const LftRgtNavSidebar = (props: Props) => {
  const { style = {} } = props;
  const spaceShip = useSelector<RootState>((state) => state.spaceShip) as SpaceShipState;
  const screenDetail = useSelector<RootState>(
    (state) => state.screenDetail,
  ) as RootState['screenDetail'];
  const { loading, id } = screenDetail;
  const { curPortalBaseInfo } = spaceShip;
  const [display, setDisplay] = useState(false);
  return (
    <div style={style} className={getNavClassNameByPortal(curPortalBaseInfo, display, loading, id)}>
      <div className={classNames(styles.navContent, { [styles.disabled]: loading && id })}>
        <div
          className={styles.navTitle}
          style={{ color: curPortalBaseInfo?.thumbColor?.name === 'white' ? '#181A24' : '#fff' }}>
          <span>{curPortalBaseInfo?.name}</span>
          {/* <Icon type="packup" /> */}
        </div>
        <NavTreeSelect type="navDisplay" />
      </div>
      <NavExpanIcon
        onClick={(e) => setDisplay(e)}
        them={curPortalBaseInfo?.thumbColor?.name || 'black'}
        navBarLayout={curPortalBaseInfo?.navBarLayout}
      />
    </div>
  );
};

export default LftRgtNavSidebar;
