"use client";
import React, { useRef, useEffect, useState } from "react";
import NextIcon from "@mui/icons-material/NavigateNext";
import PreviousIcon from "@mui/icons-material/NavigateBefore";
import { motion } from "framer-motion";
import ProductItem from "../../ProductItem/ProductItem";
import { PublicServiceView } from "@core/Models/Service.model";
import { IconButton } from "@mui/material";

export interface ProductSectionProps {
    title: string;
    data: PublicServiceView[];
    showViewMore?: boolean;
    viewMoreColor?: string;
    showButtons?: boolean;
    onViewMore?: () => void;
}

const ProductSection = (props: ProductSectionProps): React.ReactElement => {
    const {
        title,
        data = [],
        showViewMore = false,
        viewMoreColor = "var(--wine-red)",
        showButtons = false,
    } = props;
    const containerRef = useRef<HTMLDivElement | null>(null);
    const [constraints, setConstraints] = useState({ left: 0, right: 0 });
    const [isDraging, setIsDraging] = useState(false);

    useEffect(() => {
        const container = containerRef.current;
        if (container) {
            const containerWidth = container.offsetWidth;
            const contentWidth = container.scrollWidth;
            // Calcula las restricciones dinámicas
            setConstraints({ left: -(contentWidth - containerWidth), right: 0 });
        }
    }, []);

    const handleWheelScroll = (event: React.WheelEvent<HTMLDivElement>) => {
        const container = event.currentTarget;
        container.scrollLeft += event.deltaY;
        return false;
    };

    const handleClickNext = () => {
        const container = containerRef.current;
        if (container) {
            container.scrollLeft += 300;
        }
    };

    const handleClickPrevious = () => {
        const container = containerRef.current;
        if (container) {
            container.scrollLeft -= 300;
        }
    };

    return (
        <>
            {data.length > 0 && (
                <>
                    <div
                        style={{
                            fontSize: "1.5rem",
                            fontWeight: "bold",
                            marginTop: "25px",
                            marginBottom: "5px",
                            marginLeft: "10px",
                            display: "flex",
                            flexDirection: "row",
                            justifyContent: "space-between",
                            alignItems: "center",
                        }}
                    >
                        <div style={{ paddingBottom: "10px" }}>{title}</div>

                        <div style={{ display: "flex", alignItems: "center" }}>
                            {showViewMore && (
                                <div
                                    style={{
                                        cursor: "pointer",
                                        fontSize: "1rem",
                                        color: viewMoreColor,
                                    }}
                                    onClick={() => {
                                        if (props.onViewMore) props.onViewMore();
                                    }}
                                >
                                    Ver más
                                </div>
                            )}
                            {showButtons && (
                                <>
                                    <IconButton
                                        style={{ color: viewMoreColor }}
                                        onClick={handleClickPrevious}
                                    >
                                        <PreviousIcon />
                                    </IconButton>
                                    <IconButton
                                        style={{ color: viewMoreColor }}
                                        onClick={handleClickNext}
                                    >
                                        <NextIcon />
                                    </IconButton>
                                </>
                            )}
                        </div>
                    </div>
                    <div
                        ref={containerRef}
                        style={{
                            width: "100%",
                            overflow: "hidden",
                            paddingLeft: "10px",
                            paddingRight: "10px",
                            paddingTop: "0px",
                            paddingBottom: "10px",
                        }}
                    >
                        <motion.div
                            drag="x"
                            dragConstraints={constraints}
                            style={{
                                display: "flex",
                                gap: "20px",
                                padding: "0 0px",
                                cursor: "grab",
                            }}
                            onWheel={handleWheelScroll}
                            onDragStart={() => {
                                setIsDraging(true);
                            }}
                            onDragEnd={() => {
                                setIsDraging(false);
                            }}
                        >
                            {data.map((product) => (
                                <ProductItem
                                    key={product.id}
                                    product={product}
                                    dragging={isDraging}
                                />
                            ))}
                        </motion.div>
                    </div>
                </>
            )}
        </>
    );
};

export default ProductSection;
