import { ChangeEvent, useEffect, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { useFaqListMutation } from '@/entities/support/api/use-faq-list-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
import { FaqItem } from '@/entities/support/model/types';
import { SupportFaqItem } from '@/entities/support/ui/faq-item';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';

export const FaqListPage = () => {
  const { navigate } = useNavigate();

  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
  const [searchValue, setSearchValue] = useState<string>('');
  const [resultList, setResultList] = useState<Array<FaqItem>>([]);

  useSetHeaderTitle('자주 묻는 질문');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(true);
  useSetOnBack(() => {
    navigate(PATHS.home);
  });

  const { mutateAsync: faqList } = useFaqListMutation();
  const callList = () => {
    let listParams = {
      category: 'st',
      searchValue: searchValue,
      ...{page: pageParam}
    };
    
    faqList(listParams).then((rs) => {
      console.log(rs)
      setResultList(rs.content);
    });
  };

  const onClickToAction = () => {
    callList();
  };

  const getFaqList = () => {
    let rs = [];
    for(let i=0;i<resultList.length;i++){
      rs.push(
        <SupportFaqItem
          key={ `key-support-faq-item-${i}` }
          sortNo={ resultList[i]?.sortNo }
          seq={ resultList[i]?.seq }
          category={ resultList[i]?.category }
          categoryName={ resultList[i]?.categoryName }
          title={ resultList[i]?.title }
          contents={ resultList[i]?.contents }
        ></SupportFaqItem>
      )
    }
    return rs;
  };

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

  useEffect(() => {
    callList();
  }, []);

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="faq-section">
              <div className="faq-search">
                <span 
                  className="ic16 search" 
                  aria-hidden="true"
                  onClick={ () => onClickToAction() }
                ></span>
                <input 
                  type="text" 
                  placeholder="검색어를 입력하세요"
                  value={ searchValue }
                  onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value) } 
                />
              </div>
              <div className="faq-filter">
                <span className="text">전체</span>
                <span 
                  className="ic20 arrow-down" 
                  aria-hidden="true"
                ></span>
              </div>
              <div className="faq-list">
              { getFaqList() }
              </div>
            </div>
            <div className="apply-row bottom-padding">
              <button 
                className="btn-50 btn-blue flex-1"
                onClick={ () => onClickToNavigation() }
              >1:1 문의하기</button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};