'use client'

import { useEffect, useState } from 'react'

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

import { Swiper, SwiperSlide } from 'swiper/react'

import type { HeaderProps } from '@/types/Header'

import 'swiper/css'
import { useSideNavState } from '@/store/sideNavState'

// type HeaderProps = {
//   name: string //header 이름
//   backBtn: boolean // 뒤로가기 버튼 유무
// }

export default function Header({ name }: HeaderProps) {
  const router = useRouter()
  const pathname = usePathname()
  const { sideNavIsOpen, setSideNavIsOpen, reset } = useSideNavState()
  const [isShowBackBtn, setIsShowBackBtn] = useState<boolean>(false)

  if (pathname === '/login') {
    return null
  }

  useEffect(() => {
    if (pathname !== '/') {
      setIsShowBackBtn(true)
    }
    //사이드바 초기화
    reset()
  }, [pathname])

  return (
    <>
      <div className="header-warp">
        <header>
          <div className="header-inner">
            {isShowBackBtn && (
              <div className="back-button-wrap">
                <button className="back-button" onClick={() => router.back()}></button>
              </div>
            )}
            <h2 className="logo">
              <Link href={'/'}>{name}</Link>
            </h2>
            <div className="side-button-wrap">
              <button className="side-button" onClick={() => setSideNavIsOpen(true)}></button>
            </div>
          </div>
          <div className={`side-nav ${sideNavIsOpen ? 'active' : ''}`}>
            <div className="side-nav-inner">
              <div className="side-nav-header">
                <div className="side-header-profile">
                  <div className="profile-img">
                    <img src="/assets/images/layout/side_nav_profile.svg" alt="profile" />
                  </div>
                  <div className="profile-group">
                    <div className="profile-name">HONG GILDONG</div>
                    <div className="profile-company">Interplug corp.</div>
                  </div>
                </div>
                <div className="side-close-wrap">
                  <button className="side-close-btn" onClick={() => setSideNavIsOpen(false)}></button>
                </div>
              </div>
              <div className="side-swiper-wrap">
                <Swiper slidesPerView={1.6} spaceBetween={12} className="mySwiper">
                  <SwiperSlide>
                    <div className="side-swiper-card">
                      <div className="side-swiper-icon icon01"></div>
                      <div className="side-swiper-infor">私は作成した物件</div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="side-swiper-card">
                      <div className="side-swiper-icon icon02"></div>
                      <div className="side-swiper-infor">私は作成したお問 い合わせ</div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide>
                    <div className="side-swiper-card">
                      <div className="side-swiper-icon icon01"></div>
                      <div className="side-swiper-infor">私は作成したお問 い合わせ</div>
                    </div>
                  </SwiperSlide>
                </Swiper>
              </div>
              <nav className="side-nav-wrap">
                <ul className="side-nav-list">
                  <li className="side-nav-item">
                    <button onClick={() => router.push('/survey-sale')}>調査物件一覧</button>
                  </li>
                  <li className="side-nav-item">
                    <button onClick={() => router.push('/survey-sale/basic-info')}>調査物件登録</button>
                  </li>
                  <li className="side-nav-item">
                    <button onClick={() => router.push('/inquiry/list')}>1:1お問い合わせ</button>
                  </li>
                  <li className="side-nav-item">
                    <button onClick={() => router.push('/inquiry/regist')}>1:1お問い合わせ登録</button>
                  </li>
                  <li className="side-nav-item">
                    <button>パスワードリセット</button>
                  </li>
                </ul>
              </nav>
              <div className="side-nav-footer">
                <ul className="side-footer-list">
                  <li className="side-footer-item">
                    <button className="bold">LOGOUT</button>
                  </li>
                  <li className="side-footer-item">
                    <button>Jynoadmin</button>
                  </li>
                  <li className="side-footer-item">
                    <button onClick={() => router.push('/')}>HOME</button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </header>
      </div>
    </>
  )
}