import React, { useEffect, useState } from "react";
import Account from "./Account/Account";
import axios from "axios";
import logo from "../public/assets/images/logo.png";
import Image from "next/image";
import Link from "next/link";
import { useShoppingCart } from "use-shopping-cart";

const Navbar = () => {

  const { cartCount } =
    useShoppingCart();

  // TODO: Send order to Prodigi for fulfillment after checkout
  const placeOrder = () => {
    const data = {
      image:
        "https://lh3.googleusercontent.com/ThkRa2jjUfh4bBdX_G13pCTgLuX2_SO4ObSdiKiYTNRnL6ZX5KaeZzZwmo9ZZEl76c7B0wJQF6aO31ZUHjKHjn4jGS3AoRYDN-0r",
    };
    axios
      .post(`/api/order`, data)
      .then(console.log("success"))
      .catch((err) => console.log(err));
  };

  return (
    <>
      <nav className="border-gray-200 bg-zinc-900 px-2 py-4 sm:px-4">
        <div className="container mx-auto flex flex-wrap items-center justify-between">
          <Link href="/">
            <Image
              src={logo}
              width={167}
              height={42}
              className="mr-3 h-6 cursor-pointer sm:h-9"
              alt="Tangible Logo"
            />
          </Link>
          <div className="flex md:order-2">
            <Link href="/cart">
              <div className="relative mr-4 inline-flex cursor-pointer items-center rounded-lg border-2 border-transparent bg-zinc-700 bg-opacity-30 px-5 py-2.5 text-center text-sm font-medium text-white backdrop-blur-lg backdrop-filter hover:border-[#5cd4ac]">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-5 w-5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  strokeWidth={2}
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
                  />
                </svg>
                {cartCount > 0 ? (
                  <div className="absolute top-1 right-2 flex h-4 w-4 items-center justify-center rounded-full bg-[#5cd4ac] text-xs text-white">
                    {cartCount}
                  </div>
                ) : null}
              </div>
            </Link>
            <Account />
            {/* <button 
              onClick={() => placeOrder()}
            >
              Place order 
            </button> */}
            <button
              data-collapse-toggle="mobile-menu-4"
              type="button"
              className="inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden"
              aria-controls="mobile-menu-4"
              aria-expanded="false"
            >
              <span className="sr-only">Open main menu</span>
              <svg
                className="h-6 w-6"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                  clipRule="evenodd"
                ></path>
              </svg>
              <svg
                className="hidden h-6 w-6"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                  clipRule="evenodd"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </nav>
    </>
  );
};

export default Navbar;