import { jsx as _jsx } from "react/jsx-runtime";
import clsx from 'clsx';
import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
import Box from '../Box';

/**
 * The TransitionStepper can be used to compose wizards and carousels.
 *
 * Demos:
 *
 * - [Stepper (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-stepper--overview)
 *
 * 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 TransitionStepper component.
 * @param ref - The ref to be forwarded to the Box component.
 * @returns The rendered TransitionStepper component.
 */
const TransitionStepper = forwardRef(({ animateOnSlide, className, currentStep = 0, steps }, ref) => {
    const [slideLeftPosition, setSlideLeftPosition] = useState(0);
    const [slideContainerWidth, setSlideContainerWidth] = useState(0);
    const slideContainerRef = useRef(null);
    const slideContainer = useCallback((position) => {
        if (!animateOnSlide) {
            return;
        }
        const slideBy = position;
        setSlideLeftPosition(slideBy * -1 * currentStep);
    }, [currentStep, animateOnSlide]);
    useEffect(() => {
        if (!(slideContainerRef === null || slideContainerRef === void 0 ? void 0 : slideContainerRef.current) || !animateOnSlide) {
            return () => { };
        }
        setSlideContainerWidth(slideContainerRef.current.offsetWidth);
        const handleResize = () => {
            const width = slideContainerRef.current.offsetWidth;
            setSlideContainerWidth(width);
            slideContainer(width);
        };
        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, [animateOnSlide, slideContainer]);
    useEffect(() => {
        slideContainer(slideContainerWidth);
    }, [slideContainerWidth, slideContainer]);
    if (animateOnSlide) {
        return (_jsx(Box, Object.assign({ className: clsx(
            /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
            'oxygen-transition-stepper', 'OxygenTransitionStepper-root', className), ref: slideContainerRef }, { children: _jsx(Box, Object.assign({ className: "OxygenTransitionStepper-container oxygen-transition-stepper-container", sx: { left: `${slideLeftPosition}px` } }, { children: steps.map((step) => (_jsx(Box, Object.assign({ ref: ref, sx: { width: slideContainerWidth } }, { children: step }), step.key))) })) })));
    }
    return steps[currentStep];
});
export default TransitionStepper;
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) 2024, 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-transition-stepper {\n  overflow: hidden;\n}\n.oxygen-transition-stepper .oxygen-transition-stepper-container {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  width: max-content;\n  position: relative;\n  transition: left 0.5s ease-in-out;\n}");