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 { HeaderType } from '@/entities/common/model/types';
import { useQnaListMutation } from '@/entities/support/api/use-qna-list-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { QnaItem } from '@/entities/support/model/types';
import { SupportQnaItem } from '@/entities/support/ui/qna-item';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';

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

  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
  const [selectedCategory, setSelectedCategory] = useState<string>('all');
  const [resultList, setResultList] = useState<Array<QnaItem>>([]);

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

  const { mutateAsync: qnaList } = useQnaListMutation();
  const callList = () => {
    let listParams = {
      category: selectedCategory,
      ...{page: pageParam}
    };
    
    qnaList(listParams).then((rs) => {
      console.log(rs)
      setResultList(rs.content);
    });
  };
  
  const getQnaList = () => {
    let rs = [];
    for(let i=0;i<resultList.length;i++){
      rs.push(
        <SupportQnaItem
          key={ `key-support-faq-item-${i}` }
          sortNo={ resultList[i]?.sortNo }
          seq={ resultList[i]?.seq }
          statusCode={ resultList[i]?.statusCode }
          statusName={ resultList[i]?.statusName }
          requestDate={ resultList[i]?.requestDate }
          requestName={ resultList[i]?.requestName }
          title={ resultList[i]?.title }
          contents={ resultList[i]?.contents }
          answer={ resultList[i]?.answer }
        ></SupportQnaItem>
      )
    }
    return rs;
  };

  const onClickToNavigation = () => {
    navigate(PATHS.support.qna.register);
  };

  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="inq117">
              <div className="inq-merchant">
                <div className="inq-title">{t('support.qna.merchant')}</div>
                <div className="notice-filter">
                  <select className="flex-1">
                    <option>{t('support.qna.all')}</option>
                  </select>
                </div>
              </div>
              <div className="notice-filter">
                <select
                      className="flex-1"
                      value={selectedCategory}
                      onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectedCategory(e.target.value)}>
                  <option value="all">{t('support.qna.categories.all')}</option>
                  <option value="01">{t('support.qna.categories.01')}</option>
                  <option value="02">{t('support.qna.categories.02')}</option>
                  <option value="03">{t('support.qna.categories.03')}</option>
                  <option value="04">{t('support.qna.categories.04')}</option>
                  <option value="05">{t('support.qna.categories.05')}</option>
                </select>
              </div>
              <div className="inq-list">
              { getQnaList() }  
              </div>
            </div>
            <div className="apply-row bottom-padding">
              <button 
                className="btn-50 btn-blue flex-1"
                onClick={ () => onClickToNavigation() }
              >{t('support.qna.inquiryButton')}</button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};