import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// CardsRow.tsx
import { useState, useRef, useEffect } from 'react';
import Card from './Card';
import './style.scss';
import { GetSvgIcon } from '..';
const CardsRow = ({ cards }) => {
    const [activeIndex, setActiveIndex] = useState(0);
    const cardWidth = 220; // Set the width of each card
    const cardsRowRef = useRef(null);
    useEffect(() => {
        if (cards.length > 0) {
            setActiveIndex(0);
        }
    }, []);
    useEffect(() => {
        if (cardsRowRef.current) {
            const activeCardElement = cardsRowRef.current.querySelector('.active');
            if (activeCardElement) {
                const rowWidth = cardsRowRef.current.getBoundingClientRect().width;
                const cardOffset = activeCardElement.getBoundingClientRect().left - cardsRowRef.current.getBoundingClientRect().left;
                if (cardOffset + cardWidth > rowWidth) {
                    cardsRowRef.current.scrollLeft += cardOffset + cardWidth - rowWidth;
                }
                else if (cardOffset < 0) {
                    cardsRowRef.current.scrollLeft += cardOffset;
                }
            }
        }
    }, [activeIndex, cards]);
    const handleNext = () => {
        if (activeIndex != cards.length - 1) {
            setActiveIndex((prevIndex) => (prevIndex + 1) % cards.length);
            if (cardsRowRef.current && activeIndex > 4) {
                cardsRowRef.current.scrollLeft += cardWidth;
            }
        }
    };
    const handlePrevious = () => {
        if (activeIndex != 0) {
            setActiveIndex((prevIndex) => (prevIndex - 1 + cards.length) % cards.length);
            if (cardsRowRef.current && activeIndex < cards.length - 4) {
                cardsRowRef.current.scrollLeft -= cardWidth;
            }
        }
    };
    return (_jsxs("div", { className: "cards-row-container", children: [_jsxs("span", { className: `button ${cards.length == 1 && 'hide'} ${activeIndex == 0 && 'disable'}`, onClick: handlePrevious, children: ["  ", _jsx(GetSvgIcon, { iconType: 'chevronLeft', iconSize: '16' })] }), _jsx("div", { className: "cards-row", ref: cardsRowRef, children: cards.map((content, index) => (_jsx(Card, { name: content.name, designation: content.designation, isError: content.isError, isActive: index === activeIndex }, index))) }), _jsxs("span", { className: `button ${cards.length == 1 && 'hide'} ${activeIndex == cards.length - 1 && 'disable'}`, onClick: handleNext, children: [" ", _jsx(GetSvgIcon, { iconType: 'chevronRight', iconSize: '16' })] })] }));
};
export default CardsRow;
