import React__default, { useState, useEffect } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import classnames from 'classnames';
import { H as Heading } from './Heading-es.js';
import { T as Text } from './Text-es.js';
import { C as Content } from './Content-es.js';
import { S as Switch } from './Switch-es.js';
import { B as Button } from './Button-es.js';
import { E as Emphasis } from './Emphasis-es.js';
import { M as Markdown } from './Markdown-es.js';

var styles = {"container":"o-b2tWQIZvw-","content":"NZtPT-dXFeQ-","action":"tDW-yhISuqQ-","savedIndicator":"Y-aeIDV1dL4-","featureContent":"iXr88Nr7vpk-","enabled":"GSDyu-sASro-","spinning":"gzT5ooqpZG4-"};

function FeatureSwitch({ children, description, disabled = false, enabled, externalLink = false, onEdit, onSwitch, hasSaveIndicator = false, title, }) {
    const [savedIndicator, setSavedIndicator] = useState(false);
    const featureContentClassnames = classnames(styles.featureContent, styles.content, enabled && styles.enabled);
    shouldShowSavedIndicator();
    return (React__default.createElement(Content, null,
        React__default.createElement("div", { className: styles.container },
            React__default.createElement("div", { className: styles.content },
                React__default.createElement(Content, null,
                    title && React__default.createElement(Heading, { level: 4 }, title),
                    description && (React__default.createElement(Text, null,
                        React__default.createElement(Markdown, { content: description, basicUsage: true, externalLink: externalLink }))))),
            onSwitch && (React__default.createElement("div", { className: styles.action },
                React__default.createElement(Switch, { value: enabled, onChange: onSwitch, ariaLabel: description, disabled: disabled }),
                React__default.createElement(AnimatePresence, null, hasSaveIndicator && savedIndicator && (React__default.createElement(motion.div, { className: styles.savedIndicator, initial: { y: -4, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -4, opacity: 0 }, transition: {
                        delay: 0.2,
                        type: "spring",
                        damping: 20,
                        stiffness: 300,
                    }, onAnimationComplete: handleAnimationComplete },
                    React__default.createElement(Text, { variation: "success" },
                        React__default.createElement(Emphasis, { variation: "italic" }, "Saved")))))))),
        (children || onEdit) && (React__default.createElement("div", { className: styles.container },
            children && (React__default.createElement("div", { className: featureContentClassnames }, children)),
            onEdit && (React__default.createElement("div", { className: styles.action },
                React__default.createElement(Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
    function shouldShowSavedIndicator() {
        // Check if the component is mounted
        const [didMount, setDidMount] = useState(false);
        useEffect(() => setDidMount(true), []);
        useEffect(() => {
            didMount && hasSaveIndicator && setSavedIndicator(true);
        }, [enabled]);
    }
    function handleAnimationComplete() {
        setSavedIndicator(false);
    }
}

export { FeatureSwitch as F };
