'use client'
import { useRouter } from 'next/navigation'
import { useServey } from '@/hooks/useSurvey'

export default function DetailButton({ isTemporary, surveyId }: { isTemporary: boolean; surveyId: number }) {
  const router = useRouter()

  const { submitSurvey, deleteSurvey } = useServey(surveyId)

  const handleSubmit = async () => {
    if (isTemporary) {
      alert('一時保存されたデータは提出できません。')
      return
    }
    if (confirm('提出しますか？？')) {
      if (surveyId) {
        // TODO: 제출 페이지 추가
        alert('SUBMIT POPUP!!!!!!!!!!!')
        await submitSurvey()
      }
    }
  }
  const handleUpdate = () => {
    router.push(`/survey-sale/basic-info?id=${surveyId}&isTemp=${isTemporary}`)
  }
  const handleDelete = async () => {
    if (confirm('削除しますか？')) {
      if (surveyId) {
        await deleteSurvey()
        router.push('/survey-sale')
      }
    }
  }

  return (
    <div className="btn-flex-wrap">
      {isTemporary ? (
        <></>
      ) : (
        <>
          <div className="btn-bx">
            <button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
              リスト<i className="btn-arr"></i>
            </button>
          </div>
          <div className="btn-bx">
            <button className="btn-frame red icon" onClick={handleSubmit}>
              提出<i className="btn-arr"></i>
            </button>
          </div>
        </>
      )}
      <div className="btn-bx">
        <button className="btn-frame n-blue icon" onClick={handleUpdate}>
          修正<i className="btn-arr"></i>
        </button>
      </div>
      <div className="btn-bx">
        <button className="btn-frame n-blue icon" onClick={handleDelete}>
          削除<i className="btn-arr"></i>
        </button>
      </div>
    </div>
  )
}