'use client'
import { useEffect, useState, useContext } from 'react'

import { useRouter } from 'next/navigation'
import { useRecoilState } from 'recoil'
import MainContents from './main/MainContents'
import { useMessage } from '@/hooks/useMessage'
import { stuffSearchState } from '@/store/stuffAtom'
import '@/styles/contents.scss'
import ChangePasswordPop from './main/ChangePasswordPop'
import { searchState } from '@/store/boardAtom'
import { QcastContext } from '@/app/QcastProvider'
import { sessionStore } from '@/store/commonAtom'
import { isObjectNotEmpty } from '@/util/common-utils'

import BoardDetailModal from './community/modal/BoardDetailModal'

export default function MainPage() {
  const [sessionState, setSessionState] = useRecoilState(sessionStore)
  const [chagePasswordPopOpen, setChagePasswordPopOpen] = useState(false)

  const router = useRouter()
  const { getMessage } = useMessage()

  const [searchTxt, setSearchTxt] = useState('')

  const [searchRadioType, setSearchRadioType] = useState('object')

  const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)

  const [searchForm, setSearchForm] = useRecoilState(searchState)

  const { qcastState, setIsGlobalLoading } = useContext(QcastContext)

  // 엔터 이벤트
  const handleByOnKeyUp = (e) => {
    if (e.key === 'Enter') {
      setIsGlobalLoading(true)
      //물건번호 일떄
      if (searchRadioType === 'object') {
        setStuffSearch({
          ...stuffSearch,
          schObjectNo: searchTxt.trim(),
          code: 'M',
        })
        router.push('/management/stuff', { scroll: false })
      } else {
        setSearchForm({ ...searchForm, searchValue: searchTxt.trim(), mainFlag: 'Y' })
        router.push('/community/faq')
      }
    }
  }

  // 라디오 변경 이벤트
  const handleOnChangeRadio = (e) => {
    setSearchRadioType(e.target.value)
  }

  // 돋보기 클릭
  const handleOnSubmit = () => {
    setIsGlobalLoading(true)
    if (searchRadioType === 'object') {
      setStuffSearch({
        ...stuffSearch,
        schObjectNo: searchTxt,
        code: 'M',
      })

      router.push('/management/stuff', { scroll: false })
    } else {
      setSearchForm({ ...searchForm, searchValue: searchTxt, mainFlag: 'Y' })
      router.push('/community/faq')
    }
  }

  useEffect(() => {
    if (isObjectNotEmpty(sessionState)) {
      if (sessionState?.pwdInitYn !== 'Y') {
        setChagePasswordPopOpen(true)
      }
    }
  }, [sessionState])

  // FAQ 팝업 관련
  const [open, setOpen] = useState(false)
  const [modalNoticeNo, setModalNoticeNo] = useState('')

  return (
    <>
      {open && <BoardDetailModal noticeNo={modalNoticeNo} setOpen={setOpen} />}
      {(!chagePasswordPopOpen && (
        <>
          <div className="background-bord"></div>
          <div className="main-contents">
            <div className="store-id-wrap">
              <div className="store-id-box">
                <div className="store-id-title">
                  {getMessage('main.storeId')}/ {getMessage('main.storeName')}
                </div>
              </div>
              <span className="store-arr"></span>
              <div className="store-id-name">
                {qcastState?.saleStoreId} / {qcastState?.saleStoreName}
              </div>
            </div>
            <div className="main-search-wrap">
              <div className="search-raido-wrap">
                <div className="d-check-radio">
                  <input type="radio" name="radio01" id="object" value="object" defaultChecked onChange={handleOnChangeRadio} />
                  <label htmlFor="object">{getMessage('main.objectNo')}</label>
                </div>
                <div className="d-check-radio">
                  <input type="radio" name="radio01" id="faq" value="faq" onChange={handleOnChangeRadio} />
                  <label htmlFor="faq">{getMessage('main.faq')}</label>
                </div>
              </div>
              <div className="search-input-box">
                <input
                  type="text"
                  className="main-search"
                  placeholder=""
                  onKeyUp={handleByOnKeyUp}
                  onChange={(e) => {
                    setSearchTxt(e.target.value)
                  }}
                />
                <button className="search-icon" onClick={handleOnSubmit}></button>
              </div>
            </div>
            <MainContents setFaqOpen={setOpen} setFaqModalNoticeNo={setModalNoticeNo} />
          </div>
        </>
      )) || (
        <>
          <ChangePasswordPop setChagePasswordPopOpen={setChagePasswordPopOpen} />
        </>
      )}
    </>
  )
}