'use client'

import Link from 'next/link'
import Image from 'next/image'

import Search from '@/components/community/Search'
import Pagination from '@/components/community/Pagination'
import Table from '@/components/community/Table'

import { useContext } from 'react'

import { useEffect, useState } from 'react'
import { useResetRecoilState, useRecoilValue, useRecoilState } from 'recoil'
import { useMessage } from '@/hooks/useMessage'

import { searchState } from '@/store/boardAtom'

import { QcastContext } from '@/app/QcastProvider'

export default function Faq() {
  const { getMessage } = useMessage()
  const resetSearch = useResetRecoilState(searchState)
  const [isInitialized, setIsInitialized] = useState(false)

  const search = useRecoilValue(searchState)
  const [searchForm, setSearchForm] = useRecoilState(searchState)

  const { setIsGlobalLoading } = useContext(QcastContext)

  useEffect(() => {
    if (search.mainFlag === 'N') {
      resetSearch()
    } else {
      //메인에서 FAQ 조회 왔을때 로딩바 해제
      setIsGlobalLoading(false)
      setSearchForm({ ...searchForm, mainFlag: 'N' })
    }
    setIsInitialized(true)
  }, [])

  if (!isInitialized) {
    return null
  }

  const boardType = {
    boardTitle: getMessage('board.faq.title'),
    subTitle: getMessage('board.faq.sub.title'),
    clsCode: 'FAQ',
  }

  return (
    <>
      <div className="sub-header">
        <div className="sub-header-inner">
          <ul className="sub-header-title-wrap">
            <li className="title-item">
              <Link className="sub-header-title" href={'#'}>
                {getMessage('board.faq.title')}
              </Link>
            </li>
          </ul>
          <ul className="sub-header-location">
            <li className="location-item">
              <span className="home">
                <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
              </span>
            </li>
            <li className="location-item">
              <span>{getMessage('header.menus.community')}</span>
            </li>
            <li className="location-item">
              <span>{getMessage('board.faq.title')}</span>
            </li>
          </ul>
        </div>
      </div>
      <div className="sub-content">
        <div className="sub-content-inner">
          <div className="sub-table-box">
            <Search title={boardType.boardTitle} subTitle={boardType.subTitle} isSelectUse={true} />
            <Table clsCode={boardType.clsCode} />
            <Pagination />
          </div>
        </div>
      </div>
    </>
  )
}