"use client";
import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "motion/react";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import style from "./Slider.module.css";
import AnimatedContainer from "../../AnimatedConainer/AnimatedContainer";
import { useHeaderStore } from "@core/Store/Header.Store";
import { useNavigation } from "@core/app/hooks/goto";

import { sliderFrames } from "@core/app/Services/SliderFrames";

const frames = sliderFrames;

const FrameSlider: React.FC = () => {
    const headerState = useHeaderStore();
    const { goTo } = useNavigation();
    const [currentIndex, setCurrentIndex] = useState<number>(0);
    const [direction, setDirection] = useState<number>(0);
    const [intervalId, setIntervalId] = useState<NodeJS.Timeout>();

    const changeFrame = (newDirection: number) => {
        setDirection(newDirection);
        setCurrentIndex((prevIndex) => (prevIndex + newDirection + frames.length) % frames.length);
    };

    const goToFrame = (index: number) => {
        setDirection(index > currentIndex ? 1 : -1);
        setCurrentIndex(index);
    };

    const variants = {
        enter: (direction: number) => ({
            x: direction > 0 ? 300 : -300,
            opacity: 0,
        }),
        center: { x: 0, opacity: 1 },
        exit: (direction: number) => ({
            x: direction > 0 ? -300 : 300,
            opacity: 0,
        }),
    };

    useEffect(() => {
        const interval = setInterval(() => {
            changeFrame(1);
        }, 5000);

        setIntervalId(interval);

        return () => clearInterval(interval);
    }, []);

    return (
        <AnimatedContainer
            className={style.slider}
            color="#4d19ae"
            minSize={150}
            maxSize={500}
            style={{
                background:
                    "linear-gradient(180deg, var(--wine-darkest) 0%, var(--wine-dark) 100%)",
            }}
        >
            <button
                onClick={() => {
                    changeFrame(-1);
                    clearInterval(intervalId);
                }}
                className={style.buttonLeft}
                aria-label="Anterior"
            >
                <ArrowBackIosIcon sx={{ marginLeft: "10px", marginTop: "4px" }} />
            </button>
            <button
                onClick={() => {
                    changeFrame(1);
                    clearInterval(intervalId);
                }}
                className={style.buttonRight}
                aria-label="Siguiente"
            >
                <ArrowForwardIosIcon sx={{ marginLeft: "2px", marginTop: "4px" }} />
            </button>

            <AnimatePresence initial={false} custom={direction}>
                <motion.div
                    key={frames[currentIndex].id}
                    custom={direction}
                    variants={variants}
                    initial="enter"
                    animate="center"
                    exit="exit"
                    transition={{ duration: 0.8 }}
                    drag="x"
                    dragConstraints={{ left: 0, right: 0 }}
                    dragElastic={0.2}
                    onDragEnd={(event, info) => {
                        if (info.offset.x > 100) changeFrame(-1);
                        else if (info.offset.x < -100) changeFrame(1);
                    }}
                    className={style.sliderFrameContainer}
                    style={{
                        backgroundImage: `url(${frames[currentIndex].image})`,
                    }}
                    onClick={() => {
                        clearInterval(intervalId);
                    }}
                    onTouchStart={() => {
                        clearInterval(intervalId);
                    }}
                >
                    <div className={style.sliderLeftData}>
                        <h1>{frames[currentIndex].title}</h1>
                        <p>{frames[currentIndex].description}</p>
                        {frames[currentIndex].buttonText && (
                            <div>
                                <motion.button
                                    whileHover={{ scale: 1.1 }}
                                    whileTap={{ scale: 0.9 }}
                                    animate={{
                                        scale: [1, 1.1, 1],
                                        transition: {
                                            duration: 1,
                                            repeat: Infinity,
                                            repeatType: "loop",
                                        },
                                    }}
                                    onClick={() => {
                                        headerState.setPublicFindCategoryId(
                                            frames[currentIndex].showCategoryId
                                        );
                                        goTo("/landing/find");
                                    }}
                                >
                                    {frames[currentIndex].buttonText}
                                </motion.button>
                            </div>
                        )}
                    </div>
                    <div className={style.sliderRightData}>&nbsp;</div>
                </motion.div>
            </AnimatePresence>

            <div
                style={{
                    position: "absolute",
                    bottom: 20,
                    left: "50%",
                    transform: "translateX(-50%)",
                    display: "flex",
                    gap: "10px",
                }}
            >
                {frames.map((_, index) => (
                    <div
                        key={index}
                        onClick={() => goToFrame(index)}
                        style={{
                            backgroundColor:
                                currentIndex === index ? "white" : "rgba(255, 255, 255, 0.5)",
                        }}
                        className={style.sliderDots}
                    ></div>
                ))}
            </div>
        </AnimatedContainer>
    );
};

export default FrameSlider;
