import { AlarmList } from '@/entities/alarm/ui/alarm-list';
import { HeaderType } from '@/entities/common/model/types';
import { useStore } from '@/shared/model/store';
import {
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

export const ListPage = () => {
  const { t } = useTranslation();
  let totalAppNotificationCategories = useStore.getState().CommonStore.appNotificationCategories;
  const [appNotificationCategories, setAppNotificationCategories] = useState<Array<any>>(totalAppNotificationCategories);

  useSetHeaderTitle(t('alarm.title'));
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);

  const [appNotificationCategory, setAppNotificationCategory] = useState<string>('');

  const resetAlarmCategories = () => {
    if(appNotificationCategories){
      let newAppNotificationCategories = appNotificationCategories.filter((value, index) => {
        return value.code1 !== '****' && value.code2 === '*';
      });
      console.log(newAppNotificationCategories)
      setAppNotificationCategories(newAppNotificationCategories);
    }
  };

  useEffect(() => {
    resetAlarmCategories();
  }, [totalAppNotificationCategories])
  
  return (
    <>
      <main className="pop">
        <div className="sub-wrap">
          <div className="notice-tabs">
            <button
              className={ `tab36 ${(appNotificationCategory === '')? 'on': ''}`}
              onClick={ () => setAppNotificationCategory('') }
            >{t('alarm.all')}</button>
            { !!appNotificationCategories &&
              appNotificationCategories.map((value, index) => (
                <button 
                  className={ `tab36 ${(appNotificationCategory === value.code1)? 'on': ''}`}
                  onClick={ () => setAppNotificationCategory(value.code1) }
                >{ value.desc1 }</button>    
              ))
            }
          </div>
          <AlarmList
            appNotificationCategory={ appNotificationCategory }
            appNotificationCategories={ appNotificationCategories }
          ></AlarmList>
        </div>
      </main>
    </>
  );
};