'use client';

import * as React from 'react';

import { signOut, useSession } from 'next-auth/react';
import { navLinks, statickNavlinks } from '@/lib/constants/navlinks';
import Link from 'next/link';
import { PeopleIcon } from '@/components/icons/people';

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';
import { ScrollArea } from '@/components/ui/scroll-area';

import { LogIn, Power } from 'lucide-react';
import { useToast } from '@/components/ui/use-toast';
import { pathNames } from '@/lib/constants/routes';

export function NavbarAccordion() {
  const { toast } = useToast();

  const { data, status } = useSession();
  const isAuthenticated = status === 'authenticated';
  const handleSignOut = async () => {
    try {
      await signOut({ redirect: true });
      toast({ title: 'Başarılı bir şekilde çıkış yapılıyor.', variant: 'success' });
    } catch (err) {
      toast({
        title: `Çıkış yapılırken bir hata oluştu. ${JSON.stringify(err)}`,
        variant: 'destructive',
      });
    }
  };
  return (
    <ScrollArea className='h-[500px]'>
      <Accordion type='single' collapsible className='mt-12' defaultValue=''>
        <section className='grid gap-9'>
          <div className='grid'>
            <AccordionItem value='item-1 relative'>
              <AccordionTrigger className='py-0 hover:text-primary hover:no-underline'>
                <button className='w-full flex items-center'>
                  <span className='sr-only'>Menüyü aç</span>
                  {isAuthenticated ? (
                    <div className='flex items-center gap-2'>
                      <PeopleIcon />
                      <p className='text-base overflow-hidden'>{data?.user.fullName}</p>
                    </div>
                  ) : (
                    'Hoşgeldin'
                  )}
                </button>
              </AccordionTrigger>
              <AccordionContent>
                <ul className='text-base flex flex-col gap-9 mt-9'>
                  {statickNavlinks.map(({ label, path }, idx) => (
                    <li key={idx}>
                      <Link href={path} className='h-full block relative mx-auto'>
                        {label}
                      </Link>
                    </li>
                  ))}
                  {isAuthenticated ? (
                    <li onClick={() => handleSignOut()} className='flex gap-2 items-center'>
                      <Power width={14} height={14} />
                      Çıkış Yap
                    </li>
                  ) : (
                    <li>
                      <Link href={pathNames.auth.login} className='flex gap-2 items-center'>
                        <LogIn width={14} height={14} />
                        Giriş yap
                      </Link>
                    </li>
                  )}
                </ul>
              </AccordionContent>
            </AccordionItem>
            <span className='bg-borderPrimary h-[1px] w-full mt-3'></span>
          </div>
          {navLinks.map((item) => (
            <AccordionItem value={item.label} key={item.path}>
              <AccordionTrigger className='py-0 hover:text-primary hover:no-underline'>
                <button className='w-full flex items-center'>
                  <span className='sr-only'>Menüyü aç</span>
                  <p className='text-base overflow-hidden'>{item.label}</p>
                </button>
              </AccordionTrigger>
              <AccordionContent>
                <ul className='text-base flex flex-col gap-4 mt-3 ml-2'>
                  {statickNavlinks.map(({ label, path }, idx) => (
                    <li key={idx}>
                      <Link
                        href={path}
                        className='h-full block relative mx-auto text-textSecondary'
                      >
                        {label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </AccordionContent>
            </AccordionItem>
          ))}
        </section>
      </Accordion>
    </ScrollArea>
  );
}