'use client';

import '@styles/nav.css';
import Image from "next/image";
import Link from "next/link";
import { useState, useEffect } from "react"; 
import { signIn, signOut, useSession, getProviders } from 'next-auth/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser } from '@fortawesome/free-solid-svg-icons'
import { faBars } from '@fortawesome/free-solid-svg-icons'
import { toast } from 'react-toastify';



import logo from "@public/assets/SWAP-IT-Logo.png";

const Nav = () => {
    const {data : session} = useSession();
    const [providers, setProviders ] = useState(null);
    const [toggleDropdown, settoggleDropdown] = useState(false);
    
    
    useEffect(() => {
        (async () => {
            const res = await getProviders();
            setProviders(res);
        })();
    }, []);

  return (
    <>
    <div className="nav-container">
        <Link href="/">
            <div className="nav-logo">
                <Image className="nav-logo-img" src={logo} alt='Logo'></Image>
            </div>
        </Link>
        {/* Desktop */}
        {/* <div className="nav-filter-wrapper">
            <p className="nav-filter-title">Filter by:</p>
            <div className="nav-filter">
                <div className="nav-option">
                    <input value="option1" name="btn" type="radio" className="nav-option-input"/>
                    <div className="nav-option-btn">
                        <span className="nav-option-span">Books</span>
                    </div>
                </div>
                <div className="nav-option">
                    <input value="option2" name="btn" type="radio" className="nav-option-input"/>
                    <div className="nav-option-btn">
                        <span className="nav-option-span">Stationary</span>
                    </div>
                </div>
                <div className="nav-option">
                    <div className="nav-option-btn">
                        <select name="" id="" className="nav-option-select">
                            <option value="">College</option>
                            <option value="">SIES Graduate School of Technology</option>
                            <option value="">LTCE</option>
                        </select>
                    </div>
                    // <input  value="option3" name="btn" type="radio" className="nav-option-input"/> 
                </div>
                <div className="nav-option">
                    <input  value="option4" name="btn" type="radio" className="nav-option-input"/>
                    <div className="nav-option-btn">
                        <span className="nav-option-span">None</span>
                    </div>
                </div>
            </div>
        </div> */}
        {/* Buttons */}
        <div className="nav-link-buttons">

            { session?.user? (
                <>
                <div className="nav-links" >
                    <Link href="/" className="link" style={{"marginRight" : "1rem"}} >
                        <div className="nav-links-sell button">
                            Home
                        </div>
                    </Link>
                    <Link href="/sell" className="link" style={{"marginRight" : "1rem"}} >
                        <div className="nav-links-sell button">
                            Sell
                        </div>
                    </Link>
                    <div className="nav-links-user" style={{"marginRight" : "1rem"}} onClick={() => settoggleDropdown((prev) => !prev)} >
                        <div className="nav-link-user-image">
                            {(session?.user.image)!=null ?(
                                <>
                                    <Image src={session?.user.image} alt='Profile' width={50} height={50}></Image>
                                </>
                            ):(
                                <>
                                    <FontAwesomeIcon icon={faUser} />
                                    
                                </>
                            )
                            }
                        </div>
                        {toggleDropdown &&
                            <div className="nav-links-userInfo">
                                <div className="nav-links-userInfoWrapper">
                                    <Link className="link" href="/profile">
                                            Profile
                                    </Link>
                                    <Link className="link" href="/" onClick={signOut}>
                                        Sign Out
                                    </Link>
                                </div>
                            </div>
                        }
                    </div>
                </div>
                </>
            ): (
                <>
                    <Link href="/" className="link" >
                        <div className="nav-links-sell button" style={{"marginRight": "1rem"}}>
                            Home
                        </div>
                    </Link>
                    <Link href="/" className="link">
                        <div className="nav-links-sell button" style={{"marginRight": "1rem"}} onClick={()=>toast.error("SignIn First!")}>
                            Sell
                        </div>
                    </Link>
                    <Link href='/' className='link'style={{"marginRight": "1rem"}}>
                        <div className="nav-links-sell" >
                            <button type='button' className='button nav-links-login' key={providers?.name} onClick={() => {signIn(providers?.id)?toast.success("Successfully LoggedIn"):toast.error("Failed to Login")}}>
                                        SignIn/SignUp
                            </button>
                        </div>
                    </Link>
                </>
            )}
        </div>
        {/* Monile view */}
        <div className="nav-sidebar" onClick={() => settoggleDropdown((prev) => !prev)}>
            <div className="nav-sidebar-icon">
                <FontAwesomeIcon icon={faBars} />
            </div>
            {toggleDropdown && (
                <div className="nav-dropdown">
                    {
                        session?.user? (
                            <>
                                <div className="nav-sidebar-links">
                                    <div className="nav-link-user-image">
                                        {((session?.user.image)!=null)?(
                                                <>
                                                    <Image src={session?.user.image} alt='Profile' width={50} height={50}></Image>
                                                </>
                                            ):(
                                                <>
                                                    <FontAwesomeIcon icon={faUser} />
                                                </>
                                            )
                                        }
                                    </div>
                                    <Link className="link" href="/profile">
                                        Profile
                                    </Link>
                                    <hr />
                                    <Link href="/" className="link" >
                                        <div className="nav-sidebar-links-sell">
                                            Home
                                        </div>
                                    </Link>
                                    <hr />
                                    <Link href="/sell" className="link" >
                                        <div className="nav-sidebar-links-sell">
                                            Sell
                                        </div>
                                    </Link>
                                    <hr />
                                    <Link className="link" href="/" onClick={signOut}>
                                        Sign Out
                                    </Link>
                                    <hr />
                                </div>
                            </>
                        ):(
                            <>
                                <div className="nav-sidebar-links">
                                    <Link href="/" className="link" >
                                        <div className="nav-sidebar-links-sell">
                                            Home
                                        </div>
                                    </Link>
                                    <hr />
                                    <Link href="/" className="link" >
                                        <div className="nav-sidebar-links-sell" onClick={toast.error("SignIn First!")}>
                                            Sell
                                        </div>
                                    </Link>
                                    <hr />
                                    <Link className="link" href="/"  key={providers?.name} onClick={() => signIn(providers?.id)}>
                                        SignIn/SignUp
                                    </Link>
                                    <hr />
                                </div>
                            </>
                        )
                    }
                </div>
            )}
        </div>
    </div>
    </>
  )
}

export default Nav;