import { FC, useState, useRef, useEffect } from 'react'
import { Gallery, LinkSquare, Setting4, Text } from 'iconsax-react'
import Logo from '@/assets/images/logo-small.svg'
import SettingSideBar from './components/SettingSideBar'
import { SideBarTab } from '../enum/SettingEnum'
import TextSidebar from './components/TextSidebar'
import ButtonSidebar from './components/ButtonSidebar'
import ImageSideBar from './components/ImageSideBar'
import { clx } from '@/helpers/utils'

const PersonalitySidebar: FC = () => {

    const [active, setActive] = useState<SideBarTab>(SideBarTab.SETTING)
    const sidebarRef = useRef<HTMLDivElement>(null)

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            // فقط در موبایل (عرض کمتر از 1280px) کار کند
            if (window.innerWidth < 1280 && sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
                setActive(SideBarTab.NONE)
            }
        }

        if (active !== SideBarTab.NONE) {
            document.addEventListener('mousedown', handleClickOutside)
        }

        return () => {
            document.removeEventListener('mousedown', handleClickOutside)
        }
    }, [active])

    return (
        <div ref={sidebarRef} className={clx(
            'bg-white  xl:rounded-4xl  xl:overflow-hidden xl:w-[360px] flex h-full sticky top-0',
            active === SideBarTab.NONE ? 'rounded-4xl' : 'rounded-r-4xl'
        )}>
            {active !== SideBarTab.NONE && (
                <div className='absolute rounded-l-4xl shadow-[-2px_0_4px_-1px_rgba(0,0,0,0.05)] xl:shadow-none xl:static bg-white right-10 h-full z-10 xl:w-[360px] w-[250px] p-6 overflow-y-auto'>
                    {
                        active === SideBarTab.SETTING ? <SettingSideBar />
                            : active === SideBarTab.TEXT ? <TextSidebar />
                                : active === SideBarTab.BUTTON ? <ButtonSidebar />
                                    : active === SideBarTab.IMAGE ? <ImageSideBar />
                                        : null
                    }
                </div>
            )}
            <div className='xl:w-20 xl:border-r py-5 border-gray-200 w-10 flex flex-col items-center pt-6 pb-6 h-full'>
                {
                    active !== SideBarTab.NONE && <img src={Logo} className='w-8' alt="Logo" />
                }
                <div className={clx(
                    'flex flex-col gap-10 mt-16',
                    active === SideBarTab.NONE && 'mt-4'
                )}>
                    <Setting4 size={22} color='black' variant={SideBarTab.SETTING === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.SETTING)} className='cursor-pointer' />
                    <Text size={22} color='black' variant={SideBarTab.TEXT === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.TEXT)} className='cursor-pointer' />
                    <LinkSquare size={22} color='black' variant={SideBarTab.BUTTON === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.BUTTON)} className='cursor-pointer' />
                    <Gallery size={22} color='black' variant={SideBarTab.IMAGE === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.IMAGE)} className='cursor-pointer' />
                </div>
            </div>
        </div>
    )
}

export default PersonalitySidebar