import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { 
  AccountUserTabKeys,
  AccountUserTabProps 
} from '../model/types';

export const AccountUserTab = ({
  activeTab,
  mid,
  usrid,
  idCL,
  status,
}: AccountUserTabProps) => {
  const { navigate } = useNavigate();

  const onClickToNavigation = (tab: AccountUserTabKeys) => {
    if(activeTab !== tab){
      if(tab === AccountUserTabKeys.LoginAuthInfo){
        navigate(PATHS.account.user.loginAuthInfo, {
          state: {
            mid: mid,
            usrid: usrid,
            idCL: idCL,
            status: status
          }
        });
      }
      else if(tab === AccountUserTabKeys.AccountAuth){
        navigate(PATHS.account.user.accountAuth, {
          state: {
            mid: mid,
            usrid: usrid,
            idCL: idCL,
            status: status
          }
        });
      }
    }
  };
  return(
    <>
      <div className="subTab">
        <button 
          className={`subtab-btn ${(activeTab === AccountUserTabKeys.LoginAuthInfo)? 'active': ''}` }
          onClick={ () => onClickToNavigation(AccountUserTabKeys.LoginAuthInfo) } 
        >로그인 인증정보</button>
        <button 
          className={`subtab-btn ${(activeTab === AccountUserTabKeys.AccountAuth)? 'active': ''}` }
          onClick={ () => onClickToNavigation( AccountUserTabKeys.AccountAuth) } 
        >계정권한</button>
      </div>
    </>
  );
};