import { Link } from "react-router-dom";
import logo from "../assets/logo.png";
import { motion } from "framer-motion";

import {
  FaBars,
  FaCartArrowDown,
  FaLocationDot,
  FaMagnifyingGlass,
  FaSortDown,
  FaX,
} from "react-icons/fa6";
import { useRef, useState } from "react";
import { TopNavBottom } from "./TopNavBottom";
import Logo from "./Logo";
export default function TopNav() {
  const [showAll, setShowAll] = useState(false);
  const [SideNav, setSideNav] = useState(false);
  const sideNav = useRef();

  const listItems = [
    {
      _id: "1",
      title: "All",
    },
    {
      _id: "2",
      title: "Camping",
    },
    {
      _id: "3",
      title: "Fishing",
    },
    {
      _id: "4",
      title: "Prepping",
    },
  ];
  return (
    <div className="w-full bg-darkBrown sticky top-0 z-10">
      <div className="w-full max-w-container mx-auto text-white flex items-center justify-between h-24 px-4 py-3 gap-4">
        <div className="px-2 flex items-center ">
          <Logo />
        </div>
        <div className="headerHover hidden mdl:inline-flex">
          <FaLocationDot />
          <p className="text-sm text-lightText font-light flex flex-col">
            Deliver to
            <span className="font-semibold -mt-1 text-white">Jeremy</span>
          </p>
        </div>
        <div className="h-10 hidden rounded-md mdl:flex flex-grow relative">
          <span
            onClick={() => setShowAll(!showAll)}
            className="w-14 h-full bg-gray-200 hover:bg-gray-300 border-2 cursor-pointer text-gray-800 duration-300 text-sm font-titleFont flex items-center justify-center rounded-tl-md rounded-bl-md"
          >
            <span>All</span>
            <span>
              <FaSortDown />
            </span>
          </span>
          {showAll && (
            <span>
              <ul className=" absolute w-56 h-80 top-10 left-0 overflow-y-scroll overflow-x-hidden bg-white border-[1px] border-gray-800 text-black p-2 flex-col gap-1 z-50">
                {listItems.map((item) => {
                  <li
                    key={item._id}
                    className="tracjing-wide font-titleFont border-b-[1px] border-transparent hover:border-gray-800 duration-200 cursor-pointer"
                  >
                    {item.title}
                  </li>;
                })}
              </ul>
            </span>
          )}
          <input
            className="h-full text-base flex-grow outline-none border-none px-2"
            type="text"
          />
          <span className="w-12 h-full flex items-center justify-center bg-green hover:bg-sky_blue rounded-tr-md rounded-br-md">
            <FaMagnifyingGlass />
          </span>
        </div>
        <div className="flex flex-col items-start justify-center headerHover">
          <p className="text-sm mdl:text-xs text-white mdl:text-gray-200 text-lightText font-light">
            Hello, <Link className="text-green hover:text-sky_blue hover:underline cursor-pointer" to={"/signin"}>sign in</Link>
          </p>
          <p className="text-sm font-semibold -mt-1 text-white hidden mdl:inline-flex">
            Accounts & list{" "}
            <span>
              <FaSortDown />
            </span>
          </p>
        </div>
        <div className="hidden mdl:inline-flex flex-col items-start justify-center headerHover">
          <p className=" text-sm mdl:text-xs text-white mdl:text-gray-200 font-light">
            Returns
          </p>
          <p className="text-sm font-semibold -mt-1 text-white">& Orders</p>
        </div>
        <div className="flex gap-2">
          <div>
            <Link
              to={"/cart"}
              className="flex flex-col items-start justify-center headerHover relative"
            >
              <FaCartArrowDown />
              <p className="text-sm font-semibold -mt-1 text-white">
                Cart
                <span className="absolute text-xs top-0 left-6 font-semibold p-1 h-4 bg-sky_blue text-black rounded-full flex justify-center items-center">
                  0
                </span>
              </p>
            </Link>
          </div>
          <div
            onClick={() => setSideNav(true)}
            className="headerHover flex items-center gap-1"
          >
            <FaBars />
          </div>
        </div>
      </div>
      <TopNavBottom />
      {SideNav && (
        <div className="w-full h-screen text-black dark:text-white fixed top-0 left-0 bg-darkBrown bg-opacity-50">
          <div className="w-full h-full relative">
            <motion.div
              ref={sideNav}
              initial={{ x: -500, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{ duration: 0.5 }}
              className="w-full md:w-[350px] h-full bg-gray-100 border border-black dark:bg-gray-900 dark:border-gray-600"
            >
              <div className="w-full bg-darkBrown text-white py-2 px-6 flex items-center gap-4">
                <h3 className="w-full font-titleFont font-bold text-lg tracking-wide">
                  Hello, please sign in
                </h3>
                <span
                  onClick={() => setSideNav(false)}
                  className="cursor-pointer self-end py-2 px-4 border border-white rounded-sm"
                >
                  <FaX />
                </span>
              </div>
            </motion.div>
          </div>
        </div>
      )}
    </div>
  );
}
