import React, { useState } from 'react';
import classNames from 'classnames';
import styles from './navExpanIcon.less';
import { PortalType, ThumbColorType } from 'models/spaceship.types';
import { CaretLeftOutlined, CaretRightOutlined } from '@easyv/react-icons';

interface Props {
  them: ThumbColorType[keyof ThumbColorType];
  navBarLayout: PortalType['navBarLayout'];
  onClick: (e: boolean) => void;
}
const getStyleByOrder = (order) => {
  return order === 0 ? { transform: 'rotate(0deg)', right: '-17px', left: 'unset' } : { transform: 'rotate(180deg)' };
};

const NavExpanIcon = (props: Props) => {
  const { navBarLayout, them, onClick } = props;
  const [iconIsOpen, setIconIsOpen] = useState(false);
  const themeIsWhite = them === 'white';
  const LeftRightBtn = () => {
    return iconIsOpen ? (
      <div
        className={classNames(themeIsWhite ? styles.leftThemeWhite : styles.leftThemeBlack)}
        style={getStyleByOrder(navBarLayout || 0)}
        onClick={() => {
          setIconIsOpen(!iconIsOpen);
          onClick(!iconIsOpen);
        }}>
        <CaretRightOutlined />
      </div>
    ) : (
      <div
        style={getStyleByOrder(navBarLayout || 0)}
        className={classNames(themeIsWhite ? styles.leftThemeWhite : styles.leftThemeBlack)}
        onClick={() => {
          setIconIsOpen(!iconIsOpen);
          onClick(!iconIsOpen);
        }}>
        <CaretLeftOutlined />
      </div>
    );
  };
  const TopBtn = () => {
    return iconIsOpen ? (
      <div
        onClick={() => {
          setIconIsOpen(!iconIsOpen);
          onClick(!iconIsOpen);
        }}
        className={classNames(themeIsWhite ? styles.topThemeWhite : styles.topThemeBlack, {
          [styles.changeNavBtnOpenY]: iconIsOpen
        })}>
        <CaretRightOutlined />
      </div>
    ) : (
      <div
        onClick={() => {
          setIconIsOpen(!iconIsOpen);
          onClick(!iconIsOpen);
        }}
        className={classNames(themeIsWhite ? styles.topThemeWhite : styles.topThemeBlack, {
          [styles.changeNavBtnCloseY]: iconIsOpen
        })}>
        <CaretLeftOutlined />
      </div>
    );
  };
  return [0, 1].includes(navBarLayout!) ? <LeftRightBtn /> : <TopBtn />;
};

export default NavExpanIcon;
