'use client'

import { useEffect } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { useMessage } from '@/hooks/useMessage'
import { useRouter, useSearchParams } from 'next/navigation'
import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
import { useSetRecoilState } from 'recoil'

export default function StuffSubHeader({ type }) {
  const { getMessage } = useMessage()
  const router = useRouter()

  const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState)

  useEffect(() => {
    window.scrollTo(0, 0)
  }, [])

  const searchParams = useSearchParams()
  const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set

  // url에 물건번호로 도면작성화면으로 이동
  const moveFloorPlan = () => {
    setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })

    //상단 헤더에서 이동할땐 무조건 첫번째 플랜으로
    router.push('/floor-plan/estimate/5/1')
  }

  return (
    <>
      <div className="sub-header">
        <div className="sub-header-inner">
          {type === 'list' && (
            <>
              <Link href={'#'}>
                <h1 className="sub-header-title">{getMessage('header.menus.management')}</h1>
              </Link>
              <ul className="sub-header-location">
                <li className="location-item">
                  <span className="home">
                    <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
                  </span>
                </li>
                <li className="location-item">
                  <span>{getMessage('header.menus.management')}</span>
                </li>
                <li className="location-item">
                  <span>{getMessage('header.menus.management.stuffList')}</span>
                </li>
              </ul>
            </>
          )}
          {type === 'temp' && (
            <>
              <ul className="sub-header-title-wrap">
                <li className="title-item">
                  <Link className="sub-header-title" href={'#'}>
                    {getMessage('stuff.temp.subTitle')}
                  </Link>
                </li>
              </ul>
              <ul className="sub-header-location">
                <li className="location-item">
                  <span className="home">
                    <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
                  </span>
                </li>
                <li className="location-item">
                  <span>{getMessage('header.menus.management')}</span>
                </li>
                <li className="location-item">
                  <span>{getMessage('header.menus.management.newStuff')}</span>
                </li>
              </ul>
            </>
          )}
          {type === 'detail' && (
            <>
              <ul className="sub-header-title-wrap">
                <li className="title-item">
                  <Link className="sub-header-title" href={'#'}>
                    {getMessage('stuff.temp.subTitle')}
                  </Link>
                </li>
                <li className="title-item">
                  <a className="sub-header-title" onClick={moveFloorPlan}>
                    <span className="icon drawing"></span>
                    {getMessage('plan.menu.plan.drawing')}
                  </a>
                </li>
              </ul>
              <ul className="sub-header-location">
                <li className="location-item">
                  <span className="home">
                    <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
                  </span>
                </li>
                <li className="location-item">
                  <span>{getMessage('header.menus.management')}</span>
                </li>
                <li className="location-item">
                  <span>{getMessage('header.menus.management.newStuff')}</span>
                </li>
              </ul>
            </>
          )}
        </div>
      </div>
    </>
  )
}