'use client'

import { useServey } from '@/hooks/useSurvey'
import { useParams, useSearchParams } from 'next/navigation'
import { useEffect, useState } from 'react'
import DetailForm from './DetailForm'
import RoofDetailForm from './RoofDetailForm'

export default function DataTable() {
  const params = useParams()
  const id = params.id

  const searchParams = useSearchParams()
  const tab = searchParams.get('tab')
  const isTemp = searchParams.get('isTemporary')

  const { surveyDetail, isLoadingSurveyDetail } = useServey(Number(id))
  const [isTemporary, setIsTemporary] = useState(isTemp === 'true')

  const { validateSurveyDetail } = useServey(Number(id))

  useEffect(() => {
    if (surveyDetail?.DETAIL_INFO) {
      const validate = validateSurveyDetail(surveyDetail.DETAIL_INFO)
      if (validate.trim() !== '') {
        setIsTemporary(false)
      }
    }
  }, [surveyDetail])

  if (isLoadingSurveyDetail) {
    return <div>Loading...</div>
  }

  return (
    <>
      <div className="sale-data-table-wrap">
        <table className="sale-data-table">
          <colgroup>
            <col style={{ width: '80px' }} />
            <col />
          </colgroup>
          <tbody>
            <tr>
              <th>登録番号</th>
              {isTemporary ? (
                <td>
                  <span className="text-red-500">仮保存</span>
                </td>
              ) : (
                <td>{surveyDetail?.ID}</td>
              )}
            </tr>
            <tr>
              <th>登録日</th>
              <td>{surveyDetail?.REG_DT ? new Date(surveyDetail?.REG_DT).toLocaleString() : ''}</td>
            </tr>
            <tr>
              <th>更新日時</th>
              <td>{surveyDetail?.UPT_DT ? new Date(surveyDetail?.UPT_DT).toLocaleString() : ''}</td>
            </tr>
            <tr>
              <th>提出可否</th>
              <td>
                {surveyDetail?.SUBMISSION_STATUS && surveyDetail?.SUBMISSION_DATE ? (
                  <>
                    {/* TODO: 제출한 판매점 ID 추가 필요 */}
                    <div>{new Date(surveyDetail.SUBMISSION_DATE).toLocaleString()}</div>
                    <div>{surveyDetail.STORE}</div>
                  </>
                ) : (
                  '-'
                )}
              </td>
            </tr>
            <tr>
              <th>ダウンロード</th>
              <td>
                <button className="data-down">
                  HWJ現地調査票確認<i className="down-icon"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      {/* {tab === 'roof-info' ? (
        <RoofDetailForm surveyDetail={surveyDetail} isLoadingSurveyDetail={isLoadingSurveyDetail} />
      ) : (
        <DetailForm surveyDetail={surveyDetail} isLoadingSurveyDetail={isLoadingSurveyDetail} />
      )} */}
    </>
  )
}