import { ChangeEvent, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { NoticeItem } from '@/entities/support/model/types';
import { SupportNoticeItem } from '@/entities/support/ui/notice-item';
import { HeaderType } from '@/entities/common/model/types';
import {
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';

export const NoticeListPage = () => {
  const { navigate } = useNavigate();
  const { t } = useTranslation();

  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
  const [searchKeyword, setSearchKeyword] = useState<string>('');
  const [selectedCategory, setSelectedCategory] = useState<string>('ALL');
  const [resultList, setResultList] = useState<Array<NoticeItem>>([]);

  useSetHeaderTitle(t('support.notice.title'));
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
    navigate(PATHS.home);
  });

  const { mutateAsync: noticeList } = useNoticeListMutation();
  const callList = () => {
    let listParams = {
      category: selectedCategory,
      searchKeyword: searchKeyword,
      ...{page: pageParam}
    };

    noticeList(listParams).then((rs) => {
      console.log(rs)
      setResultList(rs.content);
    });
  };

  const onClickToAction = () => {
    // Remove focus from active element
    if (document.activeElement instanceof HTMLElement) {
      document.activeElement.blur();
    }
    callList();
  };

  const getNoticeList = () => {
    let rs = [];
    for(let i=0;i<resultList.length;i++){
      rs.push(
        <SupportNoticeItem
          key={ `key-support-notice-item-${i}` }
          id={ resultList[i]?.id }
          title={ resultList[i]?.title }
          category={ resultList[i]?.category }
          regDate={ resultList[i]?.regDate }
          isNew={ resultList[i]?.isNew }
        ></SupportNoticeItem>
      )
    }
    return rs;
  };

  useEffect(() => {
    callList();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedCategory]);

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="notice114">
              <div className="notice-controls">
                <div className="notice-search">
                  <span 
                    className="ic16 search" 
                    aria-hidden="true"
                    onClick={ () => onClickToAction() }
                  ></span>
                  <input
                    type="text"
                    placeholder={t('support.notice.searchPlaceholder')}
                    value={ searchKeyword }
                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchKeyword(e.target.value) }
                    onKeyDown={ (e: React.KeyboardEvent<HTMLInputElement>) => {
                      if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
                        onClickToAction();
                      }
                    }}
                  />
                </div>
                <div className="notice-filter">
                  <select
                    className="flex-1"
                    value={selectedCategory}
                    onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectedCategory(e.target.value)}
                  >
                    <option value="ALL">{t('support.notice.categories.ALL')}</option>
                    <option value="NOTICE">{t('support.notice.categories.NOTICE')}</option>
                    <option value="EVENT">{t('support.notice.categories.EVENT')}</option>
                    <option value="SERVICE">{t('support.notice.categories.SERVICE')}</option>
                    <option value="IMPORTANT">{t('support.notice.categories.IMPORTANT')}</option>
                  </select>
                </div>
              </div>
              <div className="notice-list-114">
                { getNoticeList() } 
              </div>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};