navigation.tsx

'use client'

import React, { useState } from 'react'
import { usePathname } from 'next/navigation'

import {
    AddEventButtonIcon,
    AddScheduleButtonIcon,
    CalenderNavigationIcon,
    CategoryNavigationIcon,
    HomeNavigationIcon,
    MyInfoNavigationIcon,
    NavigationPlusIcon,
} from '@/components/icon'
import { NavigationItem } from '@/components/navigation/navigationItem'
import { eventStore, titleStore } from '@/store'

export function Navigation() {
    const pathname = usePathname()
    const { setTitle } = titleStore()
    const [isVisible, setIsVisible] = useState(false)
    const { resetEvent } = eventStore()

    const handleEventRegisterClick = () => {
        setTitle('행사 등록')
        resetEvent()
    }

    return (
        <div className="flex flex-col items-center justify-center w-full">
            <div
                className={`fixed grid grid-cols-2 w-48 h-48 z-30 bg-white rounded-full shadow-[0_-1px_4px_rgba(0,0,0,0.25)] transition-all duration-700 pb-16 ${isVisible ? 'opacity-100 -translate-y-[4rem]' : 'opacity-0 translate-y-10'}`}
            >
                <div className="absolute top-5 h-1/3 left-1/2 w-[1px] bg-gray-300" />
                <NavigationItem
                    uri={'/events/register'}
                    text={'행사 등록'}
                    isClicked={false}
                    onClick={() => {
                        handleEventRegisterClick()
                    }}
                >
                    <AddEventButtonIcon width="2rem" height="2rem" />
                </NavigationItem>
                <NavigationItem uri={'/schedule/register'} text={'일정 등록'} isClicked={false} onClick={() => setTitle('일정 등록')}>
                    <AddScheduleButtonIcon width="2rem" height="2rem" />
                </NavigationItem>
            </div>
            <div className="grid h-28 w-full grid-cols-5 mx-auto font-medium bg-white shadow-[0_-1px_4px_rgba(0,0,0,0.25)] z-40">
                <NavigationItem uri={'/'} text={'홈'} isClicked={pathname === '/'}>
                    <HomeNavigationIcon isClicked={pathname === '/'} width="3rem" height="3rem" />
                </NavigationItem>
                <NavigationItem uri={'/schedules'} text={'캘린더'} isClicked={pathname === '/schedules'}>
                    <CalenderNavigationIcon isClicked={pathname === '/schedules'} width="3rem" height="3rem" />
                </NavigationItem>
                <div className="inline-flex flex-col items-center justify-center p-2">
                    <button
                        className="w-20 h-20 inline-flex flex-col items-center justify-center bg-transparent shadow-[0_4px_4px_rgba(0,0,0,0.25)] rounded-full"
                        onClick={() => setIsVisible(!isVisible)}
                    >
                        <NavigationPlusIcon width="1.375rem" height="1.375rem" />
                    </button>
                </div>
                <NavigationItem uri={'/events'} text={'카테고리'} isClicked={pathname === '/events'}>
                    <CategoryNavigationIcon isClicked={pathname === '/events'} width="3rem" height="3rem" />
                </NavigationItem>
                <NavigationItem uri={'/setting'} text={'마이페이지'} isClicked={pathname === '/setting'}>
                    <MyInfoNavigationIcon isClicked={pathname === '/setting'} width="3rem" height="3rem" />
                </NavigationItem>
            </div>
        </div>
    )
}