"use client"
import React, { useContext, useState } from "react";
import {signOut, useSession} from 'next-auth/react'
import Image from 'next/image';
import Link from 'next/link';
import { IoCloseOutline } from "react-icons/io5";
import { HiBars2 } from "react-icons/hi2";
import { BsBox2Heart } from "react-icons/bs";
import { CartContext } from "../AppContext";


const Header = () => {
    const text = "Donut worry about things";
    const Letter = text.split("");

    const [nav, setNav] = useState(false);

    //use session
    const session = useSession();
    const status = session?.status;

    //add to cart
    const {cartProducts} = useContext(CartContext);

    //use userdata
    const userData = session.data?.user;
    let userName = userData?.name || userData?.email;
    if(userName && userName.includes(' ')){
        userName = userName.split(' ')[0]
    }
    

  return (
    <div className='w-full h-full'>
        <div className='flex justify-between py-10 px-5 md:px-8 lg:px-10'>
            <Link href='/' className='flex justify-center relative px-4'>
                <div className='mt-5 md:mt3 flex flex-col items-center'>
                <Image src='/logo.png' width={120} height={120} alt='' className='w-[70px] md:w-[100px]'/>
                </div>
                <div className='circle absolute mt-10'>
                {Letter.map((item, index) => {
                    return (
                    <span key={index} className="letter inline-block absolute -top-[50px] md:-top-[70px] text-xs text-[#95743D]" style={{transform: `rotate(${index * 14.5}deg)`}}>{item}</span>
                    );
                })}
                </div>
            </Link>
            <div className='mt-5'>
                <ul className="hidden md:flex flex-row gap-10 text-xs font-semibold uppercase text-[#95743D]">
                <Link href='/' className="">Home</Link>
                <Link href='/menu' className="">Menu</Link>
                <Link href='/about' className="">about</Link>
                <Link href='/contact' className="">contact</Link>
                </ul>
            </div>
            <div className='mt-3'>
                <div className="flex justify-end md:justify-center items-center w-full text-white">
                <ul className="hidden md:flex flex-row gap-4 text-xs font-semibold uppercase text-[#95743D] items-center">
                    {status === 'authenticated' && (
                        <>
                            <Link href={'/profile'} className="text-gray-700 text-sm capitalize">{userName}</Link>
                            <Link href='/cart' className="flex gap-1 items-center"><BsBox2Heart/>({cartProducts.length})</Link>
                            <button onClick={() => signOut()} className="px-4 py-2 border border-[#DCA0AE] rounded-full hover:bg-[#DCA0AE] hover:text-white duration-300 uppercase">Logout</button>
                        </>
                    )}
                    {status === 'unauthenticated' && (
                        <>
                            <Link href='/cart' className="flex gap-1 items-center"><BsBox2Heart/>({cartProducts.length})</Link>
                            <Link href='/login' className="">Login</Link>
                            <Link href='/register' className="px-4 py-2 border border-[#DCA0AE] rounded-full hover:bg-[#DCA0AE] hover:text-white duration-300">Register</Link>
                        </>
                    )}
                </ul>
                <div onClick={() => setNav(!nav)} className="cursor-pointer pr-4 z-20 text-[#95743D] md:hidden "> {nav ? <IoCloseOutline size={30} /> : <HiBars2 size={30} />}</div>
                {nav && (
                    <ul className="w-full h-[80%] flex justify-start items-center text-center absolute top-0 left-0 bg-gradient-to-b from-[#f8cdc6] to-[#FDE2DE] text-[#95743D] z-10">
                    <li onClick={() => setNav(!nav)} className="w-full flex flex-col gap-5 cursor-pointer capitalize text-xl px-5">
                        <div className="flex flex-col gap-20 justify-between">
                            <div className="flex flex-col gap-3">
                                <Link  href='/'>Home</Link>
                                <Link  href='/menu' >menu</Link>
                                <Link  href='/about' >about</Link>
                                <Link  href='/contact' >contact</Link>
                            </div>
                            <div className="flex flex-col gap-2 items-center text-lg">
                                {status === 'authenticated' && (
                                    <>
                                        <Link href={'/profile'} className="text-gray-700 text-sm capitalize">{userName}</Link>
                                        <Link href='/cart' className="flex gap-1 items-center text-sm">Your cart({cartProducts.length})</Link>
                                        <button onClick={() => signOut()} className="w-[100px] p-1 border border-[#95743D] rounded-full">Logout</button>
                                    </>
                                )}
                                {status === 'unauthenticated' && (
                                    <>
                                        <Link  href='/login' className="border border-[#95743D] p-1 w-[100px] rounded-full">login</Link>
                                        <Link  href='/register' className="bg-[#95743D] p-1 w-[100px] text-white rounded-full">Register</Link>
                                    </>
                                )}
                            </div>
                        </div>
                    </li>        
                    </ul>
                )}
                </div>
            </div>
        </div>
    </div>
  )
}

export default Header