'use client'

import { useSurveySaleTabState } from '@/store/surveySaleTabState'
import { usePathname, useRouter } from 'next/navigation'
import { useEffect } from 'react'

export default function NavTab() {
  const router = useRouter()
  const pathname = usePathname()
  const router = useRouter()

  if (pathname === '/survey-sale') {
    return null
  }

  const { basicInfoSelected, roofInfoSelected, reset } = useSurveySaleTabState()

  useEffect(() => {
    return () => {
      reset()
    }
  }, [])

  const handleBasicInfoClick = () => {
    router.push('/survey-sale/basic-info')
  }

  const handleRoofInfoClick = () => {
    router.push('/survey-sale/roof-info')
  }

  return (
    <>
      <div className="sale-detail-tab-relative">
        <div className="sale-detail-tab-wrap">
          <div className="sale-detail-tab-inner">
            <button className={`sale-detail-tab ${basicInfoSelected ? 'act' : ''}`} onClick={handleBasicInfoClick}>
              基本情報
            </button>
            <button className={`sale-detail-tab ${roofInfoSelected ? 'act' : ''}`} onClick={handleRoofInfoClick}>
              電気 / 屋根情報
            </button>
          </div>
        </div>
      </div>
    </>
  )
}