import React from 'react';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import HomeIcon from '@mui/icons-material/Home';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
import { useNavigate, useParams } from 'react-router-dom';

interface Props {
  page: number;
  totalPage: number;
  onClickPrev?: () => void;
  onClickNext?: () => void;
}

export default function BottomNav({
  page,
  totalPage,
  onClickPrev,
  onClickNext,
}: Props) {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { id } = useParams();

  const navClass = clsx(
    'rounded-full border border-white/30 bg-slate-900/80 backdrop-blur-md flex justify-center items-center cursor-pointer hover:bg-[#00AFDD] hover:border-[#00AFDD] hover:text-slate-950 transition-all shadow-lg active:scale-[0.95]'
  );

  // Clicking "Halaman Utama" in BottomNav returns to the Home Page of the active division (/:id)
  const backToDeputyHomePage = () => {
    if (id) {
      navigate(`/${id}`);
    } else {
      navigate('/group/main');
    }
  };

  return (
    <div className="fixed left-1/2 -translate-x-1/2 bottom-[18px] text-white z-[30] flex items-center justify-center space-x-[14px]">
      <div
        className={clsx('w-[44px] h-[44px]', navClass, {
          'opacity-0 pointer-events-none': page === 0,
        })}
        onClick={onClickPrev}
      >
        <ArrowBackIcon sx={{ fontSize: 22 }} />
      </div>
      <div
        className={clsx('px-[28px] py-[10px] space-x-[10px]', navClass)}
        onClick={backToDeputyHomePage}
      >
        <HomeIcon sx={{ fontSize: 20 }} />
        <div className="font-extrabold text-sm uppercase tracking-wider">{t('mainPage')}</div>
      </div>
      <div
        className={clsx('w-[44px] h-[44px]', navClass, {
          'opacity-0 pointer-events-none': page === totalPage - 1,
        })}
        onClick={onClickNext}
      >
        <ArrowForwardIcon sx={{ fontSize: 22 }} />
      </div>
    </div>
  );
}