import React from "react";
import { Box, IconButton } from "@mui/material";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import mainImage1 from "../../assets/images/MAINHEADER-01.webp";
import mainImage2 from "../../assets/images/MAINHEADER-02.webp";
import mainImage3 from "../../assets/images/MAINHEADER-03.webp";
import mainImage4 from "../../assets/images/MAINHEADER-04.webp";
import mainImage5 from "../../assets/images/MAINHEADER-05.webp";
import mainImage6 from "../../assets/images/MAINHEADER-06.webp";
import mainImage8 from "../../assets/images/MAINHEADER-08.webp";
import mainImage10 from "../../assets/images/MAINHEADER-10.png";
import mainImage11 from "../../assets/images/MAINHEADER-11.webp";
import mainImage13 from "../../assets/images/MAINHEADER-13.webp";

import mainImageMobile from "../../assets/images/mainwallpaper-mobile.jpg";
import { Carousel } from 'react-responsive-carousel';

const CarouselContainer = () => {

  const baseItems = [
    // Banner click targets. Update productType/title/titles here when changing banner destinations.
    { img_src: mainImage13, alt_name: "Eid's Time For Love", productType: "Apparel", title: "Eid's Time For Love", titles: ["EID'S TIME FOR LOVE"] },
    { img_src: mainImage11, alt_name: "ND X Marii for Amber", productType: "Apparel", title: "ND X Marii for Amber", titles: ["ND X MARII FOR AMBER"] },
    { img_src: mainImage10, alt_name: "Oasis Abaya", productType: "Apparel", title: "Oasis abaya", titles: ["OASIS ABAYA COLLECTION", "MIRAGE COLLECTION"] },
    { img_src: mainImage8, alt_name: "Somewhere Somehow Someone", productType: "Apparel", title: "Somewhere Somehow Someone", titles: ["SOMEWHERE SOMEHOW SOMEONE"] },
    { img_src: mainImage6, alt_name: "Oasis Abaya Collection", productType: "Apparel", title: "Oasis abaya", titles: ["OASIS ABAYA COLLECTION", "MIRAGE COLLECTION"] },
    { img_src: mainImage5, alt_name: "Raya Romantics", productType: "Apparel", title: "Raya Romantics", titles: ["RAYA ROMANTICS COLLECTION 2025"] },
    // { img_src: mainImage3, alt_name: "Amber Home", productType: "HOME" },
    { img_src: mainImage3, alt_name: "Amber Home", clickable: false },
    // { img_src: mainImage4, alt_name: "Amber Beauty Fragrance", productType: "BEAUTY", title: "Fragrances", titles: ["FRAGRANCES"] },
    { img_src: mainImage4, alt_name: "Amber Beauty Fragrance", clickable: false },
    { img_src: mainImage2, alt_name: "Amber Beauty Cosmetics", productType: "BEAUTY", title: "Cosmetics", titles: ["COSMETICS"] },
    { img_src: mainImage1, alt_name: "Amber Apparel", clickable: false },
  ];

  const items = [...baseItems, ...baseItems];

  const navigateToBanner = ({ productType, title, titles, img_src }) => {
    if (!productType) return;

    sessionStorage.setItem("amber-select-product-type", productType);
    sessionStorage.removeItem("amber-select-collection");
    sessionStorage.removeItem("amber-select-collections");

    if (titles?.length > 0) {
      sessionStorage.setItem("amber-select-collection", JSON.stringify({
        title,
        image: {
          url: img_src
        }
      }));
      sessionStorage.setItem("amber-select-collections", JSON.stringify(titles));
    }

    window.location.href = "/products";
  };

  return (

    <Carousel showStatus={false} autoPlay={true} infiniteLoop={true} interval={5000} showIndicators={false} stopOnHover={false}>
      {items?.map((item, index) => (
        <Box
          key={index}
          onClick={() => {
            if (item.clickable !== false) navigateToBanner(item);
          }}
          onKeyDown={(event) => {
            if (item.clickable !== false && event.key === "Enter") navigateToBanner(item);
          }}
          role={item.clickable === false ? undefined : "button"}
          tabIndex={item.clickable === false ? undefined : 0}
          sx={{
            width: "100%",
            height: "100%",
            cursor: item.clickable === false ? "default" : "pointer",
            outline: "none"
          }}
        >
          {/*
          Old image-click code:
          <Box
            component="img"
            src={item.img_src}
            alt={item.alt_name}
            onClick={() => navigateToBanner(item)}
            sx={{
              width: "100%",
              height: "100%",
              zIndex: 0,
              filter: "brightness(0.9)",
              cursor: item.clickable === false ? "default" : "pointer"
            }}
          />
          */}
          <Box
            component="img"
            src={item.img_src}
            alt={item.alt_name}
            sx={{
              width: "100%",
              height: "100%",
              zIndex: 0,
              filter: "brightness(0.9)",
              pointerEvents: "none"
            }}
          />
        </Box>
      ))}
    </Carousel>


  );
};

export default CarouselContainer;