'use client'

import { useContext, useEffect } from 'react'

import Link from 'next/link'
import Image from 'next/image'
import { useRouter, useSearchParams } from 'next/navigation'

import { useSetRecoilState } from 'recoil'

import { QcastContext } from '@/app/QcastProvider'
import { useMessage } from '@/hooks/useMessage'
import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
import { queryStringFormatter } from '@/util/common-utils'

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

  const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState)

  const { isGlobalLoading } = useContext(QcastContext)

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

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

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

    const param = {
      pid: '1',
      objectNo: objectNo,
    }
    const url = `/floor-plan?${queryStringFormatter(param)}`

    router.push(url)
  }

  return (
    !isGlobalLoading && (
      <>
        <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('stuff.temp.subTitle2')}
                    </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.detail')}</span>
                  </li>
                </ul>
              </>
            )}
          </div>
        </div>
      </>
    )
  )
}