'use client'
import { Fragment, useCallback, useContext, useEffect, useState } from 'react'

import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'

import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
import { dimmedStore, sessionStore } from '@/store/commonAtom'

import { useMessage } from '@/hooks/useMessage'
import { checkSession } from '@/lib/authActions'
import { useLogout } from '@/hooks/useLogout'

import QSelectBox from '@/components/common/select/QSelectBox'

import UserInfoModal from '@/components/myInfo/UserInfoModal'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'

import { stuffSearchState } from '@/store/stuffAtom'
import { QcastContext } from '@/app/QcastProvider'

import { usePopup } from '@/hooks/usePopup'
import { commonCodeState } from '@/store/commonCodeAtom'
import { isObjectNotEmpty } from '@/util/common-utils'
import { roofMaterialsAtom } from '@/store/settingAtom'
import { useMasterController } from '@/hooks/common/useMasterController'
import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
import { useSwal } from '@/hooks/useSwal'

export const ToggleonMouse = (e, act, target) => {
  const listWrap = e.target.closest(target)
  const ListItem = Array.from(listWrap.childNodes)
  ListItem.forEach((el) => {
    if (act === 'add') {
      el.classList.add('mouse')
    } else {
      el.classList.remove('mouse')
    }
  })
  if (act === 'add') {
    e.target.parentElement.classList.remove('mouse')
  }
}

export default function Header(props) {
  const [userInfoModal, setUserInfoModal] = useState(false)
  const router = useRouter()

  const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)

  const { closeAll } = usePopup()
  const { logoutProcess } = useLogout()

  const { userSession } = props
  const [sessionState, setSessionState] = useRecoilState(sessionStore)
  const { getMessage } = useMessage()
  const pathName = usePathname()
  // if (pathName.includes('login') || pathName.includes('join')) {
  //   return null
  // }
  const [selected, setSelected] = useState('')

  const { isGlobalLoading } = useContext(QcastContext)

  const dimmedState = useRecoilValue(dimmedStore)
  const isDimmed = dimmedState ? 'opacity-50 bg-black' : ''

  // Link 이동 자동 로그인
  const [globalLocaleState, setGlbalLocaleState] = useRecoilState(globalLocaleStore)
  const { promisePost } = useAxios(globalLocaleState)

  const qOrderUrl = process.env.NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL
  const qMusubiUrl = process.env.NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL

  const [SelectOptions, setSelectOptions] = useState([])

  const [commonCode, setCommonCode] = useRecoilState(commonCodeState)
  const { promiseGet } = useAxios()

  const { swalFire } = useSwal()

  /**
   * 지붕재 목록 Header에서 조회
   */
  const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
  const { getRoofMaterialList } = useMasterController()
  useEffect(() => {
    async function initRoofMaterial() {
      if (roofMaterials.length !== 0) {
        return
      }
      const { data } = await getRoofMaterialList()

      const roofLists = data.map((item, idx) => ({
        ...item,
        id: item.roofMatlCd,
        name: item.roofMatlNm,
        selected: idx === 0,
        index: idx,
        nameJp: item.roofMatlNmJp,
        length: item.lenBase && parseInt(item.lenBase),
        width: item.widBase && parseInt(item.widBase),
        raft: item.raftBase && parseInt(item.raftBase),
        layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL,
        hajebichi: item.roofPchBase && parseInt(item.roofPchBase),
        pitch: item.pitch ? parseInt(item.pitch) : 4,
        angle: item.angle ? parseInt(item.angle) : 21.8,
      }))
      setRoofMaterials(roofLists)
    }
    initRoofMaterial()
  }, [])

  useEffect(() => {
    const getCommonCode = async () => {
      await promiseGet({ url: '/api/commcode/qc-comm-code' }).then((res) => {
        setCommonCode(Object.groupBy(res.data, ({ clHeadCd }) => clHeadCd))
      })
    }

    if (!isObjectNotEmpty(commonCode)) {
      getCommonCode()
    }
  }, [])

  const getAutoLoginParam = async () => {
    await promisePost({ url: '/api/login/v1.0/user/login/autoLoginEncryptData', data: { loginId: userSession.userId } })
      .then((res) => {
        if (res) {
          setSelectOptions(
            userSession.storeId === 'T01'
              ? [
                  { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
                  { id: 1, name: 'HANASYS ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                  { id: 2, name: 'HANASYS Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                  { id: 3, name: getMessage('site.header.link2'), link: `https://q-warranty.q-cells.jp/seller_login`, target: '_blank' },
                  { id: 4, name: 'Q.PARTNERS', link: `https://q-partners.q-cells.jp/qcast_login.php`, target: '_blank' },

                ]
              : userSession.groupId === '60000'
                ? [
                    { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
                    { id: 1, name: 'HANASYS ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                    { id: 2, name: getMessage('site.header.link2'), link: `https://q-warranty.q-cells.jp/seller_login`, target: '_blank' },
                    { id: 3, name: 'Q.PARTNERS', link: `https://q-partners.q-cells.jp/qcast_login.php`, target: '_blank' },
                  ]
                : [
                    { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
                    { id: 1, name: 'HANASYS Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                    { id: 2, name: getMessage('site.header.link2'), link: `https://q-warranty.q-cells.jp/seller_login`, target: '_blank' },
                    { id: 3, name: 'Q.PARTNERS', link: `https://q-partners.q-cells.jp/qcast_login.php`, target: '_blank' },
                  ],
          )
          onChangeSelect({ id: 0, name: getMessage('site.header.link1') })
        }
      })
      .catch((error) => {
        alert(error.response.data.message)
      })
  }

  useEffect(() => {
    getAutoLoginParam()
  }, [userSession])

  const openEconomicSimulation = async () => {    
    const encRes = await promiseGet({
      url: '/api/pwrGnrSimulation/encData',
      option: { params: { saleStoreId: sessionState.storeId, userId: sessionState.userId } },
    })

    const { encSaleStoreId, encUserId } = encRes.data

    if (!encSaleStoreId || !encUserId) return
    
    window.open(
      `${process.env.NEXT_PUBLIC_ECONOMIC_SIMULATION_URL}?authYn=Y&encStoreId=${encodeURIComponent(encSaleStoreId)}&encRegId=${encodeURIComponent(encUserId)}`,
      'economicSimulation',
      `height=${screen.height},width=${screen.width},fullscreen=yes`
    )    
  }

  const menus = [
    { id: 0, name: 'header.menus.home', url: '/', children: [] },
    {
      id: 1,
      name: 'header.menus.management',
      url: '',
      children: [
        // { id: 3, name: 'header.menus.management.newStuff', url: '/management/stuff/tempdetail', children: [] },
        { id: 3, name: 'header.menus.management.newStuff', url: '/management/stuff/tempReg', children: [] },
        { id: 4, name: 'header.menus.management.stuffList', url: '/management/stuff', children: [] },
      ],
    },
    {
      id: 2,
      name: 'header.menus.community',
      url: '',
      children: [
        { id: 5, name: 'header.menus.community.notice', url: '/community/notice', children: [] },
        { id: 6, name: 'header.menus.community.faq', url: '/community/faq', children: [] },
        { id: 7, name: 'header.menus.community.archive', url: '/community/archive', children: [] },
      ],
    },
    { id: 8, name: 'qna.title', url: '/community/qna', children: [] },
    process.env.NEXT_PUBLIC_RUN_MODE !== 'production'
      ? { id: 9, name: 'header.menus.economic.simulation', action: openEconomicSimulation, children: [] }
      : null,
  ].filter(Boolean)

  const syncSession = useCallback(() => {
    setSessionState({ ...userSession })
  })

  useEffect(() => {
    syncSession()
  }, [userSession])

  const onChangeSelect = (option) => {
    setSelected(option)
  }

  const navPage = () => {
    if (selected.link) {
      if (selected.target === '_blank') {
        window.open(selected.link)
      } else {
        location.href = selected.link
      }
    }
  }

  // 물건메뉴 이외 클릭시 물건 리코일 비우기
  const removeStuffRecoil = (menu) => {
    //menu.id 0 HOME
    //menu.id 3 신규물건등록
    //menu.id 4 물건리스트
    //menu.id 5 공지사항
    //menu.id 6 FAQ
    //menu.id 7 자료실
    if (menu.id === 0 || menu.id === 5 || menu.id === 6 || menu.id === 7) {
      setStuffSearch({
        ...stuffSearch,
        code: 'DELETE',
      })
    }
  }

  const getMenuTemplate = (menus) => {
    return menus.map((menu) => {
      return (
        <li
          key={`${menu.id}`}
          className={'nav-item'}
          onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
          onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
        >
          {menu.children.length === 0 ? (
            menu.action ? (
              <button key={`${menu.id}`} className="no-arrow" onClick={() => menu.action()}>
                {getMessage(menu.name)}
              </button>
            ) : (
            <Link
              key={`${menu.id}`}
              href={menu.url}
              replace={true}
              onClick={(e) => {

                if(pathName === '/floor-plan') {
                  e.preventDefault() // 기본 네비게이션 방지
                  e.stopPropagation() // 이벤트 전파 방지
                  swalFire({
                    text     : getMessage('common.link.confirm'), // 적절한 확인 메시지
                    type     : 'confirm',
                    confirmFn: () => {
                      // 확인 버튼 클릭 시 실행
                      removeStuffRecoil(menu)
                      if (pathName === '/' && menu.id !== 8) {
                        window.location.reload()
                      } else {
                        router.push(menu.url)
                      }
                      router.push(menu.url)
                    }
                  })
                } else {
                  removeStuffRecoil(menu)
                  if (pathName === '/' && menu.id !== 8) {
                    window.location.reload()
                  } else {
                    router.push(menu.url)
                  }
                }
              }}
            >
              {getMessage(menu.name)}
            </Link>
            )
          ) : (
            <Fragment key={`${menu.id}`}>
              <button>{getMessage(menu.name)}</button>
              <ul className="nav-depth2">
                {menu.children.map((m) => {
                  return (
                    <li
                      key={`${m.id}`}
                      className={'nav-depth2-item'}
                      onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                      onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                    >
                      <Link
                        scroll={false}
                        href={m.url}
                        replace={true}
                        onClick={(e) => {
                          if(pathName === '/floor-plan') {
                            e.preventDefault() // 기본 네비게이션 방지
                            e.stopPropagation() // 이벤트 전파 방지
                             swalFire({
                               text: getMessage('common.link.confirm'), // 적절한 확인 메시지
                               type: 'confirm',
                               confirmFn: () => {
                                 // 확인 버튼 클릭 시 기존 로직 실행
                                 removeStuffRecoil(m)
                                 router.push(m.url)
                               }
                             })
                            } else {
                             removeStuffRecoil(m)
                            }
                          }
                        }
                      >
                        {getMessage(m.name)}
                      </Link>
                    </li>
                  )
                })}
              </ul>
            </Fragment>
          )}
        </li>
      )
    })
  }

  return (
    <>
      {!(pathName.includes('login') || pathName.includes('join') || sessionState.pwdInitYn === 'N') && (
        <header className={isDimmed}>
          <div className="header-inner">
            <div className="header-right">
              <h1 className="logo">
                <Link
                  href={'/'}
                  onClick={(e) => {
                    setStuffSearch({
                      ...stuffSearch,
                      code: 'DELETE',
                    })
                    if (pathName === '/') {
                      window.location.reload()
                    } else if(pathName === '/floor-plan') {
                      e.preventDefault() // 기본 네비게이션 방지
                      e.stopPropagation() // 이벤트 전파 방지
                      swalFire({
                        text: getMessage('common.link.confirm'), // 적절한 확인 메시지
                        type: 'confirm',
                        confirmFn: () => {
                          // 확인 버튼 클릭 시 기존 로직 실행
                          //removeStuffRecoil(m)
                          router.push('/')
                        }
                      })
                    }


                  }}
                ></Link>
              </h1>
              <nav>
                <ul className="nav-list ">{getMenuTemplate(menus)}</ul>
              </nav>
            </div>
            <div className="header-left">
              <div className="profile-box">
                <Link
                  href="#"
                  onClick={() => {
                    setUserInfoModal(true)
                    closeAll()
                  }}
                >
                  <button className="profile">{userSession.userNm}</button>
                </Link>
                {userInfoModal && <UserInfoModal userId={sessionState.userId} userInfoModal={userInfoModal} setUserInfoModal={setUserInfoModal} />}
              </div>
              <div className="sign-out-box">
                <button
                  className="sign-out"
                  onClick={() => logoutProcess()}
                >
                  {getMessage('header.logout')}
                </button>
              </div>
              <div className="select-box">
                <QSelectBox options={SelectOptions} onChange={onChangeSelect} title={getMessage('site.header.link1')} />
              </div>
              <div className="btn-wrap">
                <button className="btn-frame small dark" onClick={() => navPage()}>
                  {getMessage('header.go')}
                </button>
              </div>
            </div>
          </div>
        </header>
      )}
    </>
  )
}
