'use client'

import { SurveyBasicInfo } from '@/types/Survey'
import { useSurvey } from '@/hooks/useSurvey'

export default function DataTable({ surveyDetail }: { surveyDetail: SurveyBasicInfo }) {
  /** 제출 상태 처리 */
  const submitStatus = () => {
    const { submissionTargetNm, submissionTargetId } = surveyDetail ?? {}
    if (!submissionTargetId && submissionTargetNm) {
      return <div>( {submissionTargetNm} )</div>
    }
    if (!submissionTargetId && !submissionTargetNm) {
      return null
    }
    return (
      <div>
        ({submissionTargetNm} - {submissionTargetId})
      </div>
    )
  }
  const { downloadSurveyPdf } = useSurvey()

  return (
    <>
      <div className="sale-data-table-wrap">
        <table className="sale-data-table">
          <colgroup>
            <col style={{ width: '80px' }} />
            <col />
          </colgroup>
          <tbody>
            <tr>
              <th>登録番号</th>
              <td>{surveyDetail?.srlNo}</td>
            </tr>
            <tr>
              <th>登録日</th>
              <td>{surveyDetail?.regDt ? new Date(surveyDetail.regDt).toLocaleString() : ''}</td>
            </tr>
            <tr>
              <th>更新日時</th>
              <td>{surveyDetail?.uptDt ? new Date(surveyDetail.uptDt).toLocaleString() : ''}</td>
            </tr>
            <tr>
              <th>提出可否</th>
              <td>
                {surveyDetail?.submissionStatus && surveyDetail?.submissionDate ? (
                  <>
                    <div>{new Date(surveyDetail.submissionDate).toLocaleString()}</div>
                    {submitStatus()}
                  </>
                ) : (
                  '-'
                )}
              </td>
            </tr>
            <tr>
              <th>ダウンロード</th>
              <td>
                {surveyDetail.submissionStatus ? (
                  <button className="data-down" onClick={() => downloadSurveyPdf(surveyDetail.id, `${surveyDetail.srlNo}.pdf`)}>
                    HWJ現地調査票確認<i className="down-icon"></i>
                  </button>
                ) : (
                  '-'
                )}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </>
  )
}