import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronLeftIcon, ChevronRightIcon } from '@oxygen-ui/react-icons';
import clsx from 'clsx';
import { forwardRef, useEffect, useMemo, useState } from 'react';
import { useIsMobile } from '../hooks/use-is-mobile';
import Box from '../Box';
import Button from '../Button';
import Card from '../Card';
import CardContent from '../CardContent';
import IconButton, { IconButtonVariants } from '../IconButton';
import ListItem from '../ListItem';
import ListItemIcon from '../ListItemIcon';
import ListItemText from '../ListItemText';
import TransitionStepper from '../TransitionStepper';

/**
 * The Carousel component can be used to slide through content.
 *
 * Demos:
 *
 * - [Carousel(Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/patterns-carousel)
 *
 * API:
 *
 * - inherits [Box API](https://mui.com/material-ui/api/box/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
 * - ✅ `component` prop is supported.
 * - ✅ The `ref` is forwarded to the root element.
 *
 * @template C - The type of the component.
 * @param props - The props for the Carousel component.
 * @param ref - The ref to be forwarded to the Box component.
 * @returns The rendered Carousel component.
 */
const Carousel = forwardRef((_a, ref) => {
    var { autoPlay = false, autoPlayInterval = 5000, className, nextButtonText = 'Next', previousButtonText = 'Previous', steps, title } = _a, rest = __rest(_a, ["autoPlay", "autoPlayInterval", "className", "nextButtonText", "previousButtonText", "steps", "title"]);
    const [currentStep, setCurrentStep] = useState(0);
    const isLastStep = useMemo(() => currentStep === steps.length - 1, [steps, currentStep]);
    const isFirstStep = useMemo(() => currentStep === 0, [currentStep]);
    const isMobile = useIsMobile();
    useEffect(() => {
        if (!autoPlay) {
            return () => { };
        }
        const interval = setInterval(() => {
            if (isLastStep) {
                setCurrentStep(0);
            }
            else {
                setCurrentStep(currentStep + 1);
            }
        }, autoPlayInterval);
        return () => clearInterval(interval);
    }, [autoPlay, autoPlayInterval, currentStep, isLastStep]);
    const handleNextButtonClick = () => {
        if (isLastStep) {
            return;
        }
        setCurrentStep(currentStep + 1);
    };
    const handlePreviousButtonClick = () => {
        if (isFirstStep) {
            return;
        }
        setCurrentStep(currentStep - 1);
    };
    const generateCarouselSteps = () => steps === null || steps === void 0 ? void 0 : steps.map((step) => {
        const { title: stepTitle, description, illustration, action } = step;
        return (_jsxs(Box, Object.assign({ className: "oxygen-carousel-step" }, { children: [_jsx(Card, Object.assign({ elevation: 0, variant: "outlined", className: "oxygen-carousel-step-card" }, { children: _jsxs(ListItem, Object.assign({ component: CardContent }, { children: [illustration && _jsx(ListItemIcon, { children: illustration }), _jsx(ListItemText, { primary: stepTitle, secondary: description !== null && description !== void 0 ? description : null })] })) })), action && _jsx(Box, Object.assign({ className: "oxygen-carousel-step-button-bar" }, { children: action }))] }), `${stepTitle}-${description}`));
    });
    return (_jsxs(Box, Object.assign({ ref: ref, className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-carousel', { mobile: isMobile }, 'OxygenCarousel-root', { 'OxygenCarousel-mobile': isMobile }, className) }, rest, { children: [_jsxs(Box, Object.assign({ className: clsx(
                /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                'oxygen-carousel-top-bar', 'OxygenCarousel-topBar') }, { children: [_jsx(Box, Object.assign({ className: clsx(
                        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                        'oxygen-carousel-title', 'OxygenCarousel-title') }, { children: title })), _jsxs(Box, Object.assign({ className: clsx(
                        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                        'oxygen-carousel-mobile-buttons', 'OxygenCarousel-mobileButtons') }, { children: [_jsx(IconButton, Object.assign({ variant: IconButtonVariants.CONTAINED, color: "secondary", disabled: isFirstStep, onClick: handlePreviousButtonClick }, { children: _jsx(ChevronLeftIcon, {}) })), _jsx(IconButton, Object.assign({ variant: IconButtonVariants.CONTAINED, color: "secondary", disabled: isLastStep, onClick: handleNextButtonClick }, { children: _jsx(ChevronRightIcon, {}) }))] })), _jsxs(Box, Object.assign({ className: clsx(
                        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                        'oxygen-carousel-button-group', 'OxygenCarousel-buttonGroup') }, { children: [_jsx(Button, Object.assign({ variant: "text", color: "secondary", disabled: isFirstStep, onClick: handlePreviousButtonClick, startIcon: _jsx(ChevronLeftIcon, {}) }, { children: previousButtonText })), _jsx(Button, Object.assign({ variant: "text", color: "secondary", disabled: isLastStep, onClick: handleNextButtonClick, endIcon: _jsx(ChevronRightIcon, {}) }, { children: nextButtonText }))] }))] })), _jsx(Box, { children: _jsx(TransitionStepper, { animateOnSlide: true, steps: generateCarouselSteps(), currentStep: currentStep }) })] })));
});
export default Carousel;
function addCSS(css){var head = document.getElementsByTagName('head')[0];var s = document.createElement('style');s.setAttribute('type', 'text/css');s.appendChild(document.createTextNode(css));head.appendChild(s);}
addCSS("/**\n * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.oxygen-carousel {\n  position: relative;\n}\n.oxygen-carousel .oxygen-carousel-top-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.oxygen-carousel .oxygen-carousel-top-bar .oxygen-carousel-title {\n  flex-grow: 1;\n  align-items: center;\n  display: flex;\n  padding: 1rem 0;\n}\n.oxygen-carousel .oxygen-carousel-top-bar .oxygen-carousel-button-group {\n  flex-grow: 0;\n  display: flex;\n  gap: var(--oxygen-customComponents-Stepper-properties-button-gap);\n  justify-content: flex-end;\n}\n.oxygen-carousel .oxygen-carousel-step .oxygen-card {\n  padding: 0.5rem 1rem;\n}\n.oxygen-carousel .oxygen-carousel-step .oxygen-card .oxygen-list-item {\n  gap: 1rem;\n}\n.oxygen-carousel .oxygen-carousel-step .oxygen-carousel-step-button-bar {\n  padding-top: 1rem;\n  display: flex;\n  justify-content: flex-end;\n}\n.oxygen-carousel .oxygen-carousel-mobile-buttons {\n  display: none;\n}\n.oxygen-carousel.mobile .oxygen-carousel-button-group {\n  display: none;\n}\n.oxygen-carousel.mobile .oxygen-carousel-mobile-buttons {\n  display: flex;\n  gap: 1rem;\n}");