'use client'

import { useHeaderStore } from '@/store/header'
import { useSideNavState } from '@/store/sideNavState'
import { usePathname, useRouter } from 'next/navigation'
import { useEffect } from 'react'

export default function Main() {
  const router = useRouter()
  const pathname = usePathname()
  const { setBackBtn } = useHeaderStore()
  const { reset } = useSideNavState()

  /**
   * 헤더 뒤로가기 버튼 컨트롤
   * 사이드바 초기화 컨트롤
   */
  useEffect(() => {
    if (pathname === '/') {
      setBackBtn(false)
    }
    //사이드바 초기화
    reset()
  }, [pathname])

  return (
    <>
      <div className="main-contens">
        <div className="main-head-block">
          <div className="head-block-tit">屋根材の照会</div>
          <div className="head-block-text">ご使用の屋根材の適合性をご確認いただけます</div>
          <div className="head-block-link-wrap">
            <button className="head-block-link">
              照会まさに移動<i className="block-arr"></i>
            </button>
          </div>
        </div>
        <div className="main-grid-wrap">
          <div className="main-grid-bx bx01">
            <div className="grid-bx-head">
              <div className="main-bx-icon">
                <img src="/assets/images/main/main_icon01.svg" alt="" />
              </div>
              <button className="main-bx-arr" onClick={() => router.push('/survey-sale')}></button>
            </div>
            <div className="grid-bx-body">
              <div className="grid-bx-body-tit">調査物件一覧</div>
              <div className="grid-bx-body-txt">作成物件確認</div>
            </div>
          </div>
          <div className="main-grid-bx bx02">
            <div className="grid-bx-head">
              <div className="main-bx-icon">
                <img src="/assets/images/main/main_icon02.svg" alt="" />
              </div>
              <button className="main-bx-arr" onClick={() => router.push('/survey-sale/basic-info')}></button>
            </div>
            <div className="grid-bx-body">
              <div className="grid-bx-body-tit">調査物件登録</div>
              <div className="grid-bx-body-txt">新規物件作成</div>
            </div>
          </div>
          <div className="main-grid-bx bx03">
            <div className="grid-bx-head">
              <div className="main-bx-icon">
                <img src="/assets/images/main/main_icon03.svg" alt="" />
              </div>
              <button className="main-bx-arr" onClick={() => router.push('/inquiry/list')}></button>
            </div>
            <div className="grid-bx-body">
              <div className="grid-bx-body-tit">1:1お問い合わせ リスト</div>
              <div className="grid-bx-body-txt">作成問い合わせの確認</div>
            </div>
          </div>
          <div className="main-grid-bx bx04">
            <div className="grid-bx-head">
              <div className="main-bx-icon">
                <img src="/assets/images/main/main_icon04.svg" alt="" />
              </div>
              <button className="main-bx-arr" onClick={() => router.push('/inquiry/regist')}></button>
            </div>
            <div className="grid-bx-body">
              <div className="grid-bx-body-tit">1:1問い合わせ登録</div>
              <div className="grid-bx-body-txt">新規お問い合わせの 作成</div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}