import { TbCircleLetterEFilled } from "react-icons/tb";

import { FiShoppingBag } from "react-icons/fi";
import { MdOutlineDashboard } from "react-icons/md";
import { FaUserCircle } from "react-icons/fa";
import { MdFavorite } from "react-icons/md";
import { IoLogOut } from "react-icons/io5";
import { Link } from "react-router-dom";
import { Carousel, IconButton } from "@material-tailwind/react";

import Categoris from "../../components/Fragments/Categoris";


import CardProduct from "../../components/Elements/CardProduct";
import Drawer from "../../components/Fragments/Drawer";
import Footer from "../../components/Elements/Footer";

const Dasboard = () => {
    return (
        <>
        <Drawer>
        <div className=" grid  gap-5 ">
                

                <div className="mx-2">
                    <Carousel
                        className="rounded-xl max-h-72 max-w-full overflow-hidden"
                        prevArrow={({ handlePrev }) => (
                            <IconButton
                                variant="text"
                                color="white"
                                size="lg"
                                onClick={handlePrev}
                                className="!absolute top-2/4 left-4 -translate-y-2/4"
                            >
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    strokeWidth={2}
                                    stroke="currentColor"
                                    className="h-6 w-6"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
                                    />
                                </svg>
                            </IconButton>
                        )}
                        nextArrow={({ handleNext }) => (
                            <IconButton
                                variant="text"
                                color="white"
                                size="lg"
                                onClick={handleNext}
                                className="!absolute top-2/4 !right-4 -translate-y-2/4"
                            >
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    strokeWidth={2}
                                    stroke="currentColor"
                                    className="h-6 w-6"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
                                    />
                                </svg>
                            </IconButton>
                        )}
                    >
                       <div>
                      
                        <p className="text-black">dlkjbdlabwlawdanvdkawvdavdkivadiadiadvadvkakdbab Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, quisquam ea. Atque cum perferendis doloremque amet libero cumque eveniet soluta praesentium totam impedit, at molestias quas? Dignissimos, explicabo ducimus. Explicabo.</p>
                       </div>
                        <img
                            src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
                            alt="image 2"
                            className="h-full w-full object-cover"
                        />
                        <img
                            src="https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80"
                            alt="image 3"
                            className="h-full w-full object-cover"
                        />
                    </Carousel>
                </div>
                <div className="grid grid-cols-1 gap-2 mx-2">
                    <h1 className="text-xl font-bold">Categoris</h1>
                    <div className="flex justify-center items-center">
                        <Categoris></Categoris>
                    </div>
                </div>
                <div className="grid mx-2">
                    <div className="flex items-center justify-between">
                    <h1 className="text-xl font-bold">Recommendations</h1>
                    <Link className="underline text-md opacity-70 text-blue-800" to={"/seemore"}>See more</Link>
                    </div>
                    <div className="grid grid-cols-2 gap-4  my-3 md:grid-cols-4 xl:grid-cols-6 lg:grid-cols-5">
                    <CardProduct/>
                    <CardProduct/>
                    <CardProduct/>
                    <CardProduct/>
                    <CardProduct/>
                    <CardProduct/>
                    <CardProduct/>
                    <CardProduct/>
                       
                    </div>
                </div>
            </div>
        </Drawer>
                <Footer></Footer>
            
        </>
    )
}

const SideBar = () => {
    return (
        <>
            <div id="sidebar-mini" class="hs-overlay  hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform hidden fixed top-0 start-0 bottom-0 z-[60] w-20 bg-[#AFA0D7] border-e border-gray-200  [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300" role="dialog" tabindex="-1" aria-label="Mini Sidebar">
                <div class="flex flex-col justify-center items-center gap-y-2 py-4">
                    <div class="mb-3">
                        <a class="flex-none focus:outline-none focus:opacity-80" href="#">
                            <TbCircleLetterEFilled className="w-12 h-auto text-white" />
                        </a>
                    </div>

                    <div class="hs-tooltip [--placement:right] inline-block mb-2">
                        <button type="button" class="hs-tooltip-toggle size-[38px] inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none">
                            <MdOutlineDashboard className="text-xl" />

                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-gray-900 text-xs text-white rounded-lg whitespace-nowrap" role="tooltip">
                                Home
                            </span>
                        </button>
                    </div>

                    <div class="hs-tooltip [--placement:right] inline-block mb-2">
                        <button type="button" class="hs-tooltip-toggle size-[38px] inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none">
                            <FaUserCircle className="text-xl" />
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-gray-900 text-xs text-white rounded-lg whitespace-nowrap" role="tooltip">
                                Users
                            </span>
                        </button>
                    </div>

                    <div class="hs-tooltip [--placement:right] inline-block mb-2">
                        <button type="button" class="hs-tooltip-toggle size-[38px] inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none">
                            <FiShoppingBag className="text-xl" />
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-gray-900 text-xs text-white rounded-lg whitespace-nowrap" role="tooltip">
                                History Product
                            </span>
                        </button>
                    </div>

                    <div class="hs-tooltip [--placement:right] inline-block mb-2">
                        <button type="button" class="hs-tooltip-toggle size-[38px] inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none">
                            <MdFavorite className="text-xl" />
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-gray-900 text-xs text-white rounded-lg whitespace-nowrap" role="tooltip">
                                My Wishlist
                            </span>
                        </button>
                    </div>

                    <div class="hs-tooltip [--placement:right] inline-block mb-2">
                        <button type="button" class="hs-tooltip-toggle size-[38px] inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-red-500 focus:text-white disabled:opacity-50 disabled:pointer-events-none">
                            <IoLogOut className="text-xl" />
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-gray-900 text-xs text-white rounded-lg whitespace-nowrap" role="tooltip">
                                Logout
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <Footer></Footer>
        </>
    )
}

const Product = () => {
        // const [product, setProduct] = useState([]);
        // const keyApi = process.env.REACT_APP_API;

        // useEffect(() => {
        //     axios.get(`${keyApi}/api/product`).then((response) => {
        //       console.log("test", response.data);
        //       setProduct(response.data.data);
        //       console.log("bbb", product);
        //     });
        // }, [keyApi]);

        // const handleAddToCart = (item) => {
        //     axios.post(`${keyApi}/api/cart/`, item)
        //         .then(response => {
        //             console.log("Product added to cart:", response.data);
        //         })
        //         .catch(error => {
        //             console.error("There was an error adding the product to the cart!", error);
        //         });
        // };
    return (
        <>
           {/* {product.map((item, i) => {
             return (
                <div className="relative flex w-full max-w-[15rem] flex-col overflow-hidden rounded-lg border  bg-gray-100 shadow-md" key={i}>
                    <a
                        className="relative mx-3 mt-3 flex overflow-hidden rounded-xl justify-center"
                        href="#"
                    >
                        <img
                            className=" w-20 h-full "
                            src={"http://localhost:3000/" + item.image}
                            alt="product image"
                        />
                    </a>
                    <div className="mt-4 px-3 pb-5">
                        <a href="#">
                            <h5 className="text-lg tracking-tight text-slate-900">
                                {item.name}
                            </h5>
                        </a>
                        <div className="flex justify-between items-center mb-3 gap-3">
                            <p>
                                <span className="text-lg font-bold text-slate-900">Rp {item.price}</span>
                                <span className="text-sm text-red-500 line-through">Stok {item.stock}</span>
                            </p>
                            <div className="flex items-center">
                                <p className="font-bold text-md">4.5</p>
                                <svg
                                    aria-hidden="true"
                                    className="h-7 w-7 text-yellow-300"
                                    fill="currentColor"
                                    viewBox="0 0 20 20"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                </svg>
                            </div>
                        </div>
                        <a
                            href="#"
                            className="flex items-center justify-center rounded-md bg-slate-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-blue-300"
                            onClick={() => handleAddToCart(item)}
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                className="mr-2 h-5 w-5"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"

                            >
                                <path
                                    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>
                            Cart
                        </a>
                    </div>
                </div>
             );
           })} */}
        </>
    )
}



export default Dasboard