import { FC, useState, useRef, useEffect } from 'react'
import { Gallery, LinkSquare, Setting4, Text, Profile2User } 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 SocialSidebar from './components/SocialSidebar'
import { clx } from '@/helpers/utils'
import { usePersonalityStore } from './store/Store'
import { ElementType } from './types/Types'

const PersonalitySidebar: FC = () => {

    const [active, setActive] = useState<SideBarTab>(SideBarTab.SETTING)
    const sidebarRef = useRef<HTMLDivElement>(null)
    const { selectedElement, activeSection } = usePersonalityStore()

    // Auto-switch to relevant tab when element is selected
    useEffect(() => {
        if (selectedElement) {
            switch (selectedElement.type) {
                case ElementType.TEXT:
                    setActive(SideBarTab.TEXT)
                    break
                case ElementType.BUTTON:
                    setActive(SideBarTab.BUTTON)
                    break
                case ElementType.IMAGE:
                    setActive(SideBarTab.IMAGE)
                    break
                case ElementType.SOCIAL:
                    setActive(SideBarTab.SOCIAL)
                    break
                default:
                    break
            }
        }
    }, [selectedElement])

    // وقتی بین بخش‌ها (header, content, footer) جابجا می‌شود، تب را به تنظیمات تغییر بده
    useEffect(() => {
        setActive(SideBarTab.SETTING)
    }, [activeSection])

    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 />
                                        : active === SideBarTab.SOCIAL ? <SocialSidebar />
                                            : 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'
                    />
                    {
                        activeSection !== 'content' && <>
                            <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'
                            />
                            <Profile2User
                                size={22}
                                color={'black'}
                                variant={SideBarTab.SOCIAL === active ? 'Bold' : 'Outline'}
                                onClick={() => setActive(SideBarTab.SOCIAL)}
                                className='cursor-pointer'
                            />
                        </>
                    }
                </div>
            </div>
        </div>
    )
}

export default PersonalitySidebar