import logoImg from '@/assets/images/logo.png';
import luxembourgLogoImg from '@/assets/images/luxembourg-logo.png';
import { openDrawer } from '@/redux/drawer/drawer.slice';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { openLegend } from '@/redux/legend/legend.slice';
import { openLoginModal } from '@/redux/modal/modal.slice';
import { IconButton } from '@/shared/IconButton';
import Image from 'next/image';

export const NavBar = (): JSX.Element => {
  const dispatch = useAppDispatch();

  const openDrawerInfo = (): void => {
    dispatch(openDrawer('project-info'));
  };

  const openDrawerPlugins = (): void => {
    dispatch(openDrawer('available-plugins'));
  };

  const openDrawerExport = (): void => {
    dispatch(openDrawer('export'));
  };

  const openDrawerLegend = (): void => {
    dispatch(openLegend());
  };

  const openModalLogin = (): void => {
    dispatch(openLoginModal());
  };

  return (
    <div className="flex min-h-full w-[88px] flex-col items-center justify-between bg-cultured py-8">
      <div data-testid="nav-buttons">
        <div className="mb-8 flex flex-col gap-[10px]">
          <IconButton icon="info" onClick={openDrawerInfo} />
          <IconButton icon="page" />
          <IconButton icon="plugin" onClick={openDrawerPlugins} />
          <IconButton icon="export" onClick={openDrawerExport} />
        </div>
        <div className="flex flex-col gap-[10px]">
          <IconButton icon="admin" onClick={openModalLogin} />
          <IconButton icon="legend" onClick={openDrawerLegend} />
        </div>
      </div>

      <div className="flex flex-col items-center gap-[20px]" data-testid="nav-logos-and-powered-by">
        <Image
          className="rounded rounded-e rounded-s bg-white-pearl pb-[7px]"
          src={luxembourgLogoImg}
          alt="luxembourg logo"
          height={41}
          width={48}
        />
        <Image src={logoImg} alt="logo" height={48} width={48} />
        <span className="h-16 w-14 text-center text-[8px] leading-4">
          Powered by: MINERVA Platform (v16.0.8)
        </span>
      </div>
    </div>
  );
};