import { PATHS } from '@/shared/constants/paths';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import moment from 'moment';
import { useAppAlarmMarkMutation } from '../api/use-app-alarm-mark-mutation';
import { AppAlarmMarkParams, AppAlarmMarkResponse } from '../model/types';
import { useStore } from '@/shared/model/store';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

export interface AlarmItemProps {
  appNotificationSequence?: number;
  appNotificationCategory?: string;
  notificationReceivedDate?: string;
  appNotificationTitle?: string;
  appNotificationContent?: string;
  appNotificationLink?: string;
  appNotificationCategories: Array<any>;
};

export const AlarmItem = ({
  appNotificationSequence,
  appNotificationCategory,
  notificationReceivedDate,
  appNotificationTitle,
  appNotificationContent,
  appNotificationLink,
  appNotificationCategories
}: AlarmItemProps) => {
  const { navigate } = useNavigate();
  const { t } = useTranslation();

  let userInfo = useStore.getState().UserStore.userInfo;
  const {mutateAsync: appAlarmMark} = useAppAlarmMarkMutation();
  
  const [appNotificationCategoryName, setAppNotificationCategoryName] = useState<string>('');

  const getCategoryName = () => {
    let myCategory = appNotificationCategories.filter((value, index) => {
      return value.code1 === appNotificationCategory;
    });
    return myCategory[0].desc1;
  };
  const onClickToNavigate = () => {
    let path = PATHS.support.notice.detail + appNotificationSequence;
    let pathState = {};

    console.log('appNotificationSequence : [' + appNotificationSequence + ']');
    console.log('appNotificationCategory : [' + appNotificationCategory + ']');
    console.log('notificationReceivedDate : [' + notificationReceivedDate + ']');
    console.log('appNotificationTitle : [' + appNotificationTitle + ']');
    console.log('appNotificationContent : [' + appNotificationContent + ']');
    console.log('appNotificationLink : [' + appNotificationLink + ']');
    
    if(appNotificationLink){
      path = appNotificationLink;
      /*
      if(appNotificationCategory === '10'){
        
      }
      else if(appNotificationCategory === '20'){

      }
      else if(appNotificationCategory === '30'){

      }
      else if(appNotificationCategory === '40'){

      }
      else if(appNotificationCategory === '60'){
        
      }
      */
    }
    
    navigate(path, {
      state: pathState
    });
  };

  const callAppAlarmMark = () => {
    if(!!userInfo.usrid && !!appNotificationSequence){
      let params: AppAlarmMarkParams = {
        appNotificationSequence: appNotificationSequence,
        usrid: userInfo.usrid
      };
      appAlarmMark(params).then((rs: AppAlarmMarkResponse) => {
        console.log(rs);
      }).finally(() => {
        onClickToNavigate();
      });
    }
  };

  useEffect(() => {
    setAppNotificationCategoryName(getCategoryName());
  }, [appNotificationCategory]);

  return (
    <div 
      className="notice-item" 
      onClick={ () => callAppAlarmMark() }
    >
      <div className="notice-content">
        <div className="notice-title">{ appNotificationTitle }</div>
        <div className="notice-meta">
          <strong>{ appNotificationCategoryName }</strong>
          <span>{ moment(notificationReceivedDate).format('YYYY.MM.DD HH:mm:ss') }</span>
        </div>
      </div>
      <div className="notice-arrow">
        <img
          src={ IMAGE_ROOT + '/Forward.svg' }
          alt={t('alarm.goTo', { category: appNotificationCategoryName })}
        />
      </div>
    </div>
  );
};