import { Box, IconButton } from "@mui/material";
import { useRef, useState, useCallback, useEffect } from "react";
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
export const SLIDER = ({
  cardWidth = 200,
  sliderData = [],
  triggerEventHandler,
  handleUpdateMultiExecutionResult,
  displayName,
}) => {
  const cardHeight = (cardWidth * 4) / 7;
  const [currentIndex, setCurrentIndex] = useState(0);
  const sliderRef = useRef(null);

  const handleOnClick = useCallback(() => {
    triggerEventHandler("click");
  }, [triggerEventHandler]);

  const handleScroll = (index) => {
    if (sliderRef.current) {
      const scrollAmount = index * (cardWidth + 20); // card width + margin
      sliderRef.current.scrollTo({
        left: scrollAmount,
        behavior: "smooth",
      });
      setCurrentIndex(index);
      handleUpdateMultiExecutionResult([
        {
          displayName,
          value: { selectedCell: { index } },
        },
      ]);
    }
  };
useEffect(()=>{
  setCurrentIndex(0)
  handleUpdateMultiExecutionResult([
    {
      displayName,
      value: { selectedCell: { index:0 } },
    },
  ]);
},[displayName, handleUpdateMultiExecutionResult])
  const handlePrev = () => {
    if (currentIndex > 0) {
      handleScroll(currentIndex - 1);
    }
  };

  const handleNext = () => {
    if (currentIndex < sliderData.length - 1) {
      handleScroll(currentIndex + 1);
    }
  };

  return (
    <div style={{ position: "relative", width: "100%" }}>
      {/* Slider */}
      <div
        ref={sliderRef}
        style={{
          overflow: "hidden",
          display: "flex",
          scrollBehavior: "smooth",
          width: "100%",
        }}
      >
        <div
          style={{
            display: "flex",
            transition: "transform 0.3s ease-in-out",
          }}
        >
          {sliderData?.length == 0 &&<div style={{textAlign:"center",color:"GrayText"}}> No Card Found</div>}
          {sliderData?.map((e, index) => (
            <Box
              key={index}
              component={"div"}
              sx={{
                width: `${cardWidth}px`,
                margin: "10px",
                marginRight: "20px",
                height: cardHeight,
                borderRadius: `${cardWidth / 23}px`,
                backgroundColor: "#1c1c1c",
                color: "#ffffff",
                padding: `${cardHeight / 10}px`,
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                boxShadow: "0 4px 8px rgba(0, 0, 0, 0.3)",
              }}
              onClick={handleOnClick}
            >
              {/* Card Content */}
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                }}
              >
             
                <div style={{ fontSize: `${cardHeight / 10 - 2}px` }}>
                  {e.bank_name}
                </div>
              </div>
              {/* <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                }}
              > */}
                <div
                  style={{
                    width: `${cardHeight / 5}px`,
                    height: `${cardHeight / 5}px`,
                    backgroundColor: "#d4a74d",
                    borderRadius: "5px",
                  }}
                ></div>
                <div
                  style={{
                    fontSize: `${cardHeight / 10 + 2}px`,
                    letterSpacing: "2px",
                    textAlign:"left",
                    width: cardWidth - 40,
                  }}
                >
                  **** **** **** {e.card_number?.slice(12)}
                </div>
              {/* </div> */}
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                }}
              >
                <div>
                  <div
                    style={{
                      fontSize: `${cardHeight / 20 + 4}px`,
                      fontWeight: "bold",
                    }}
                  >
                    
                    {e.owner_name}
                  </div>
                </div>
                <div
                  style={{
                    textAlign: "right",
                    fontSize: `${cardHeight / 20 + 2}px`,
                  }}
                >
                  <div>EXP</div>
                  <div>{e.expiry_date}</div>
                </div>
              </div>
            </Box>
          ))}
        </div>
      </div>

      {/* Navigation Buttons */}
      <IconButton
        size="small"
        disabled={currentIndex === 0}
        sx={{
          position: "absolute",
          left: "-10px",
          top: "50%",
          transform: "translateY(-50%)",
          zIndex: 1,
          // marginLeft: "-10px",
          backgroundColor: "#000",
          color: "#fff",
        }}
      >
        <ArrowLeftIcon onClick={handlePrev} />
      </IconButton>
      <IconButton
        size="small"
        disabled={currentIndex === sliderData.length - 1}
        sx={{
          position: "absolute",
          right: "-10px",
          top: "50%",
          transform: "translateY(-50%)",
          zIndex: 1,
          // marginLeft: "-10px",
          backgroundColor: "#000",
          color: "#fff",
        }}
      >
        <ArrowRightIcon onClick={handleNext} />
      </IconButton>

      {/* Dot Navigation */}
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          marginTop: "10px",
        }}
      >
        {sliderData?.map((_, index) => (
          <div
            key={index}
            onClick={() => handleScroll(index)}
            style={{
              width: "10px",
              height: "10px",
              borderRadius: "50%",
              backgroundColor: currentIndex === index ? "#000" : "#ccc",
              margin: "0 5px",
              cursor: "pointer",
            }}
          ></div>
        ))}
      </div>
    </div>
  );
};

export default SLIDER;
