'use client'

import { useState, 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 { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'

import { GlobalDataContext } from '@/app/GlobalDataProvider'
import { SessionContext } from '@/app/SessionProvider'

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

  const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState)

  const { isGlobalLoading } = useContext(QcastContext)

  const { managementState } = useContext(GlobalDataContext)

  const [buttonStyle, setButtonStyle] = useState('')

  const { setMenuNumber } = useCanvasMenu()

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

  useEffect(() => {
    if (isObjectNotEmpty(managementState)) {
      if (managementState?.createSaleStoreId === 'T01') {
        if (session?.storeId !== 'T01') {
          setButtonStyle('none')
        }
      }
    }
  }, [managementState])

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

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

    const param = {
      pid: '1',
      objectNo: objectNo,
    }

    setMenuNumber(null)
    const url = `/floor-plan?${queryStringFormatter(param)}`

    router.push(url)
  }

  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" style={{ display: buttonStyle }}>
                  <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>
    </>
  )
}