import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { Menu } from '@/shared/ui/menu';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { 
  HeaderType,
  HeaderNavigationProps
} from '@/entities/common/model/types';

export const HeaderNavigation = ({ 
  onBack, 
  headerTitle, 
  menuOn,
  headerType, 
  setMenuOn
}: HeaderNavigationProps) => {
  const {
    navigate,
    navigateBack
  } = useNavigate();
  
  const handleBack = () => {
    if(onBack){
      onBack();
    }
    else{
      navigateBack();
    }
  };
  const handleClose = () => {
    if(onBack){
      onBack();
    }
    else{
      navigateBack();
    }
  };
  const onClickToGoToAlarm = () => {
    navigate(PATHS.alarm.list);
  };
  
  return (
    <>
      {
        (headerType === HeaderType.Home
          || headerType === HeaderType.Alim 
          || headerType === HeaderType.LeftArrow
        ) &&
        <Menu 
          menuOn={ menuOn }
          setMenuOn={ setMenuOn }
        ></Menu>
      }
      { 
        (headerType !== HeaderType.NoHeader) &&
        <header className="header">
        {
          // 홈에서만 적용
          (headerType === HeaderType.Home) &&
          <div className="header-content">
            <div className="header-left">
              <h1 className="app-title blind">나이스가맹점관리자</h1>
                <div className="input-wrapper">
                  <select className="heading-select">
                    <option value="1">madzoneviper</option>
                    <option value="2">stormflarewolf</option>
                    <option value="3">blazefangco</option>
                  </select>
                </div>
            </div>
            <div className="header-right">
              <button 
                className="header-btn notification-btn"
                onClick={ () => onClickToGoToAlarm() }
              >
                <span className="notification-icon"></span>
                <span className="notification-badge"></span>
              </button>
              {
              /*
              <button className="header-btn profile-btn" id="profileBtn">
                  <span className="profile-icon">👤</span>
              </button>
              */
              }
            </div>
          </div>
        }
        {
          (headerType === HeaderType.Alim) &&
          <div className="header-content sub">
            <div className="header-center">{ headerTitle }</div>
            <div className="header-right">
              <button 
                className="header-btn notification-btn"
                onClick={ () => onClickToGoToAlarm() }
              >
                  <span className="notification-icon"></span>
                  <span className="notification-badge"></span>
              </button>
            </div>
          </div>
        }
        {
          (headerType === HeaderType.LeftArrow) && 
          <div className="header-content">
            <div className="header-left">
              <button className="header-btn">
                <img 
                  src={ IMAGE_ROOT + '/ico_back.svg' }
                  alt="뒤로가기"
                  onClick={ () => handleBack() }
                />
              </button>
            </div>
            <div className="header-center">{ headerTitle }</div>
          </div>
        }
        {
          (headerType === HeaderType.RightClose) && 
          <div className="header-content">
            <div className="header-center">{ headerTitle }</div>
            <div className="header-right">
              <button className="header-btn">
                <img 
                  src={ IMAGE_ROOT + '/ico_close.svg' }
                  alt="닫기"
                  onClick={ () => handleClose() }
                />
              </button>
            </div>
          </div>
        }
        </header>
      }
    </>
  );
};