import Navigation from '../Navigation'
import Main from '../Main'
import SearchModal from '../SearchModal'
import { usePartner } from '@/hooks/usePartner'
import { Icon, SnackbarList } from '@wordpress/components'
import useSnackBarStore from '@/stores/snackBarStore'
import Logo from '../Navigation/Logo'
import { Link, useParams } from '@tanstack/react-router'
import { cog, home, pin, search } from '@wordpress/icons'
import { useRoutes } from '@/hooks/useRoutes'
import { plugins } from '@wordpress/icons'
import useSearchStore from '@/stores/searchStore'
import { useQuery } from '@tanstack/react-query'
import { getGroupQueryOptions } from '@/shared/ploogins-groups/query-options'
import useSearchModalStore from '@/stores/searchModalStore'

const Layout = () => {

    const { color } = usePartner()
    const { isRoot, isSearch, isInstalled, isGroup, isSettings } = useRoutes()
    const { setOpen } = useSearchModalStore()
    const { query } = useSearchStore()
    const { snackBars, removeSnackBar } = useSnackBarStore()
    const { partnerUUID } = usePartner()
    const { uuid: groupUUID } = useParams({ strict: false })
    const { data: group, isPending: isGroupPending } = useQuery(getGroupQueryOptions(groupUUID ?? ''))


    return (
        <div className="fixed top-0 bottom-0 min-h-100vh right-0 left-0 h-100vh">
            <div className="h-full flex flex-col bg-neutral-800" style={{ backgroundColor: color }}>
                <div className="flex flex-col md:flex-row grow h-full">
                    <div className="md:hidden p-2">
                        <Link to="/">
                            <Logo size="small"/>
                        </Link>
                    </div>       

                    <Navigation/>

                    <Main/>

                    <div className="md:hidden p-2 flex items-center justify-between">

                        <Link
                            className={`block flex items-center gap-2 p-2 transition-colors ${isRoot
                                ? 'bg-neutral-600 !text-white'
                                : 'bg-neutral-800/50 !text-neutral-100 hover:bg-neutral-700/50'
                                }`}
                            to="/"
                        >
                            <Icon className="w-8 h-8 fill-current" icon={home} />
                        </Link>

                        <button role="button"
                            onClick={() => {
                                setOpen(true)
                            }}
                            className="block cursor-pointer flex items-center gap-2 p-2 transition-colors bg-neutral-800/50 !text-neutral-100 hover:bg-neutral-700/50"
                        >
                            <Icon className="w-8 h-8 fill-current" icon={search} />
                        </button>

                        {query && (
                            <Link
                                className={`block flex items-center gap-2 p-2 transition-colors ${isSearch
                                        ? 'bg-neutral-600 !text-white'
                                        : 'bg-neutral-800/50 !text-neutral-100 hover:bg-neutral-700/50'
                                    }`}
                                to="/search"
                            >
                                <Icon className="w-8 h-8 fill-current" icon={pin} />
                            </Link>
                        )}

                        <Link
                            className={`block flex items-center gap-2 p-2 transition-colors ${isInstalled
                                    ? 'bg-neutral-600 !text-white'
                                    : 'bg-neutral-800/50 !text-neutral-100 hover:bg-neutral-700/50'
                                }`}
                            to="/installed"
                        >
                            <Icon className="w-8 h-8 fill-current" icon={plugins} />
                        </Link>

                        {
                            isGroup && (
                                <Link
                                    className={`block flex items-center gap-2 p-2 transition-colors ${isGroup
                                        ? 'bg-neutral-600 !text-white'
                                        : 'bg-neutral-800/50 !text-neutral-100 hover:bg-neutral-700/50'
                                        }`}
                                    to="/group/$uuid"
                                    params={{ uuid: group?.uuid ?? '' }}
                                >
                                    {
                                        isGroupPending ? (
                                            <div className="w-8 h-8 rounded-lg bg-neutral-700 animate-pulse"></div>
                                        ) : (
                                            <img src={group?.icon} alt={group?.name} className="w-8 h-8 object-contain rounded-lg" />
                                        )
                                    }
                                </Link>
                            )
                        }

                        {!partnerUUID && (
                            <Link
                                className={`block flex items-center gap-2 p-2 transition-colors ${isSettings
                                    ? 'bg-neutral-600 !text-white'
                                    : 'bg-neutral-800/50 !text-neutral-100 hover:bg-neutral-700/50'
                                    }`}
                                to="/settings"
                            >
                                <Icon className="w-8 h-8 fill-current" icon={cog} />
                            </Link>
                        )}
                        
                    </div>

                </div>

                <SnackbarList
                    notices={snackBars}
                    onRemove={removeSnackBar}
                />
            </div>

            <SearchModal/>

        </div>
    );
}

export default Layout;