import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { DefaultButton } from '@fluentui/react';
import { memo, useEffect, useRef } from 'react';
import { StepCard } from '../index.js';
import { DetailText } from './DetailText.js';
import { addButtonStyles, ButtonContainer, Container, icons } from './StepList.styles.js';
export const StepList = /*#__PURE__*/ memo(function StepsList({ steps , outputs , onDeleteClicked , onEditClicked , onDuplicateClicked , onSelect , onStartNewStep , buttonId ,  }) {
    const ref = useRef(null);
    useEffect(()=>{
        const f = ()=>{
            ref?.current?.scrollIntoView(false);
        };
        f();
    }, [
        steps
    ]);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            steps.map((step, index)=>{
                return /*#__PURE__*/ _jsx(StepCard, {
                    output: outputs[index],
                    onDelete: onDeleteClicked,
                    onEdit: onEditClicked,
                    onDuplicate: onDuplicateClicked,
                    onSelect: onSelect,
                    step: step,
                    index: index
                }, index);
            }),
            onStartNewStep && /*#__PURE__*/ _jsxs(ButtonContainer, {
                ref: ref,
                children: [
                    /*#__PURE__*/ _jsx(DefaultButton, {
                        styles: addButtonStyles,
                        iconProps: icons.add,
                        onClick: onStartNewStep,
                        id: buttonId,
                        children: "Add step"
                    }),
                    !steps?.length && /*#__PURE__*/ _jsx(DetailText, {
                        text: "Add your first preparation step"
                    })
                ]
            })
        ]
    });
});
