'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 { 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 { managementState } = useContext(GlobalDataContext)

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

  const { setSelectedMenu } = useCanvasMenu()

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

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

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

  /**
   * 도면작성은 플랜1번의 도면작성화면으로 이동하기 때문에 -> 플랜1번이 삭제가능으로 변경되서 planList의 0번째로!
   * 1.물건작성하고 바로 -> planList 생성전. surface
   * 2.물건이 여러건있을때 1번 플랜의 estimateDate 여부로 selectedMenu 셋팅
   */
  const moveFloorPlan = () => {
    setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })

    const param = {
      pid: managementState?.planList?.length > 0 ? managementState?.planList[0].planNo : '1',
      objectNo: objectNo,
    }

    if (managementState?.planList?.length > 0) {
      if (managementState?.planList[0].estimateDate) {
        setSelectedMenu('module')
      } else {
        setSelectedMenu('surface')
      }
    } else {
      setSelectedMenu('surface')
    }

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

    router.push(url)
  }

  return (
    <>
      <div className="sub-header">
        <div className="sub-header-inner">
          {type === 'list' && (
            <>
              <Link href={'#'} scroll={false}>
                <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={'#'} scroll={false}>
                    {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={'#'} scroll={false}>
                    {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>
    </>
  )
}