import { PATHS } from '@/shared/constants/paths';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { 
  FooterProps,
  FooterItemActiveKey
} from '@/entities/common/model/types';

export const FooterNavigation = ({ 
  setMenuOn,
  footerCurrentPage
}: FooterProps) => {
  const { navigate } = useNavigate();
  
  const onClickToNavigate = (path?: string) => {
    if(!!path){
      navigate(path);
    }
  };
  const onClickToOpenMenu = () => {
    setMenuOn(true);
  };

  const buttonItems = [
    {
      activeIcon: IMAGE_ROOT + '/home-active.svg',
      inactiveIcon: IMAGE_ROOT + '/home.svg',
      path: PATHS.home,
      activeKey: FooterItemActiveKey.Home,
      title: '홈'
    },
    {
      activeIcon: IMAGE_ROOT + '/chart-active.svg',
      inactiveIcon: IMAGE_ROOT + '/chart.svg',
      path: PATHS.transaction.allTransaction.list,
      activeKey: FooterItemActiveKey.Transaction,
      title: '거래조회'
    },
    {
      activeIcon: IMAGE_ROOT + '/money-active.svg',
      inactiveIcon: IMAGE_ROOT + '/money.svg',
      path: PATHS.settlement.list,
      activeKey: FooterItemActiveKey.Settlement,
      title: '정산내역'
    },
    {
      activeIcon: IMAGE_ROOT + '/users-active.svg',
      inactiveIcon: IMAGE_ROOT + '/users.svg',
      path: PATHS.account.user.manage,
      activeKey: FooterItemActiveKey.Account,
      title: '사용자관리'
    },
    {
      activeIcon: IMAGE_ROOT + '/more-active.svg',
      inactiveIcon: IMAGE_ROOT + '/more.svg',
      title: '더보기'
    },
  ];

  const getFooterButtonItems = () => {
    let rs = [];
    for(let i=0;i<buttonItems.length;i++){
      rs.push(
        <button
          key={ `footer-button-item-${i}` }
          className={ `tab-button ${((footerCurrentPage && footerCurrentPage === buttonItems[i]?.activeKey)? 'active': '')}` } 
          data-tab={ `tab-${i}` } 
          data-active-icon={ buttonItems[i]?.activeIcon } 
          data-inactive-icon={ buttonItems[i]?.inactiveIcon }
          onClick={ () => {
              if(!!buttonItems[i]?.path){
                onClickToNavigate(buttonItems[i]?.path);
              }
              else{
                onClickToOpenMenu();
              }
            }
          }
        >
          <div className="tab-icon">
            <img 
              className="tab-icon-img" 
              src={ (footerCurrentPage && footerCurrentPage === buttonItems[i]?.activeKey)? buttonItems[i]?.activeIcon: buttonItems[i]?.inactiveIcon } 
              alt={ buttonItems[i]?.title }
            />
          </div>
          <span className="tab-text">{ buttonItems[i]?.title }</span>
        </button>
      )
    }
    return rs;
  };

  return (
    <>
      <nav className="bottom-tabbar">
        { getFooterButtonItems() }
      </nav>
    </>
  );
};