'use client'

import { useServey } from '@/hooks/useSurvey'
import { SurveySalesBasicInfo } from '@/api/surveySales'
import { useParams, useRouter } from 'next/navigation'

export default function SurveyDetail() {
  const params = useParams()
  const id = params.id
  const router = useRouter()

  const { surveyDetail, deleteSurvey, isDeletingSurvey, confirmSurvey } = useServey(Number(id))

  console.log('surveyDetail:: ', surveyDetail)

  const handleDelete = async () => {
    if (confirm('delete?')) {
      if (surveyDetail?.representative) {
        if (surveyDetail.detail_info?.id) {
          await deleteSurvey({ id: Number(surveyDetail.detail_info.id), isDetail: true })
        }
        await deleteSurvey({ id: Number(id), isDetail: false })
      }
      alert('delete success')
      router.push('/survey-sales')
    }
  }
  const handleSubmit = () => {
    if (confirm('submit?')) {
      confirmSurvey(Number(id))
    }
    alert('submit success')
    router.push('/survey-sales')
  }

  if (isDeletingSurvey) {
    return <div>Deleting...</div>
  }

  return (
    <div>
      <h1>SurveyDetail</h1>
      <p>{id}</p>
      <p>{surveyDetail?.representative}</p>
      <div className="flex gap-3">
        <button className="bg-blue-500 text-white px-2 py-1 rounded-md cursor-pointer" onClick={() => router.push('/survey-sales/write?id=' + id)}>
          edit
        </button>
        <button className="bg-blue-500 text-white px-2 py-1 rounded-md cursor-pointer" onClick={handleSubmit}>
          submit
        </button>
        <button className="bg-red-500 text-white px-2 py-1 rounded-md cursor-pointer" onClick={handleDelete}>
          delete
        </button>
        <button className="bg-gray-500 text-white px-2 py-1 rounded-md cursor-pointer" onClick={() => router.back()}>
          back
        </button>
      </div>
    </div>
  )
}