'use strict';

var React = require('react');
var framerMotion = require('framer-motion');
var classnames = require('classnames');
var Heading = require('./Heading-cjs.js');
var Text = require('./Text-cjs.js');
var Content = require('./Content-cjs.js');
var Switch = require('./Switch-cjs.js');
var Button = require('./Button-cjs.js');
var Emphasis = require('./Emphasis-cjs.js');
var Markdown = require('./Markdown-cjs.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] = React.useState(false);
    const featureContentClassnames = classnames(styles.featureContent, styles.content, enabled && styles.enabled);
    shouldShowSavedIndicator();
    return (React.createElement(Content.Content, null,
        React.createElement("div", { className: styles.container },
            React.createElement("div", { className: styles.content },
                React.createElement(Content.Content, null,
                    title && React.createElement(Heading.Heading, { level: 4 }, title),
                    description && (React.createElement(Text.Text, null,
                        React.createElement(Markdown.Markdown, { content: description, basicUsage: true, externalLink: externalLink }))))),
            onSwitch && (React.createElement("div", { className: styles.action },
                React.createElement(Switch.Switch, { value: enabled, onChange: onSwitch, ariaLabel: description, disabled: disabled }),
                React.createElement(framerMotion.AnimatePresence, null, hasSaveIndicator && savedIndicator && (React.createElement(framerMotion.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.createElement(Text.Text, { variation: "success" },
                        React.createElement(Emphasis.Emphasis, { variation: "italic" }, "Saved")))))))),
        (children || onEdit) && (React.createElement("div", { className: styles.container },
            children && (React.createElement("div", { className: featureContentClassnames }, children)),
            onEdit && (React.createElement("div", { className: styles.action },
                React.createElement(Button.Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
    function shouldShowSavedIndicator() {
        // Check if the component is mounted
        const [didMount, setDidMount] = React.useState(false);
        React.useEffect(() => setDidMount(true), []);
        React.useEffect(() => {
            didMount && hasSaveIndicator && setSavedIndicator(true);
        }, [enabled]);
    }
    function handleAnimationComplete() {
        setSavedIndicator(false);
    }
}

exports.FeatureSwitch = FeatureSwitch;
