'use client'

import { useEffect, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { handleFileDown } from '@/util/board-utils'
import { useMessage } from '@/hooks/useMessage'
import { sessionStore } from '@/store/commonAtom'
import { useRecoilState } from 'recoil'

export default function QnaDetailModal({ qnaNo, setOpen, qnaType }) {
  const { getMessage } = useMessage()
  // api 조회 관련
  const { get } = useAxios()
  const [boardDetail, setBoardDetail] = useState({})
  const [sessionState, setSessionState] = useRecoilState(sessionStore)

  useEffect(() => {
    // 상세 조회
    const fetchDetail = async (qnaNo) => {
      const url = `/api/board/detail`
      const params = new URLSearchParams({
        noticeNo      : qnaNo,
        qnaNo         : qnaNo,
        schNoticeClsCd: 'QNA',
        compCd        : 5200,
        loginId       : sessionState.userId,
        langCd        : 'JA',
      })
      const apiUrl = `${url}?${params.toString()}`

      const resultData = await get({ url: apiUrl })

      if (resultData) {
        if (resultData.result.code === 200) {
          const boardDetail = resultData.data
          setBoardDetail(boardDetail)
        } else {
          alert(resultData.result.message)
        }
      }
    }

    fetchDetail(qnaNo)
  }, [])

  return (
    <>
      <div key={qnaNo} className="modal-popup community">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <button
                type="button"
                className="modal-close"
                onClick={() => {
                  setOpen(false)
                }}
              >
                {getMessage('board.sub.btn.close')}
              </button>
            </div>
            <div className="modal-body">
              <div className="oneonone-header-wrap">
                <div className="oneonone-title"> {qnaType} {boardDetail.qstTitle}</div>
                <div className="oneonone-infor">
                  <div className="profile">{boardDetail.regUserNm}</div>
                  <div className="date">{boardDetail.regDt}</div>
                </div>
              </div>
              <div className="oneonone-detail">
                {boardDetail.listFile && (
                  <dl className="community_detail-file-wrap">
                    <dt>{getMessage('qna.detail.sub.fileList')}</dt>
                    {boardDetail.listFile.map((boardFile) => (
                      <dd key={boardFile.encodeFileNo}>
                        <button type="button" className="down" onClick={() => handleFileDown(boardFile.fileNo, 'NO')}>
                          {boardFile.srcFileNm}
                        </button>
                      </dd>
                    ))}
                  </dl>
                )}
                <div
                  className="community_detail-inner"
                  dangerouslySetInnerHTML={{
                    __html: boardDetail.qstContents ? boardDetail.qstContents.replaceAll('\n', '<br/>') : '',
                  }}
                ></div>
              </div>
              {boardDetail?.answerYn === 'Y' && (
              <div className="oneonone-answer">
                <div className="answer-title-wrap">
                  <div className="answer-title">Hanwha Japan {getMessage('qna.detail.sub.answer')}</div>
                  <div className="oneonone-infor">
                    <div className="profile">{boardDetail.ansRegNm}</div>
                    <div className="date">{boardDetail.ansRegDt}</div>
                  </div>
                </div>
                <div
                  className="community_detail-inner"
                  dangerouslySetInnerHTML={{
                    __html: boardDetail.ansContents ? boardDetail.ansContents.replaceAll('\n', '<br/>') : '',
                  }}
                ></div>
                {boardDetail.ansListFile && (
                  <dl className="community_detail-file-wrap">
                    <dt>{getMessage('qna.detail.sub.fileList')}</dt>
                    {boardDetail.ansListFile.map((boardFile) => (
                      <dd key={boardFile.encodeFileNo}>
                        <button type="button" className="down" onClick={() => handleFileDown(boardFile.fileNo, 'N')}>
                          {boardFile.srcFileNm}
                        </button>
                      </dd>
                    ))}
                  </dl>
                )}
              </div>
              )}

            </div>
          </div>
        </div>
      </div>

    </>
  )
}