import React__default, { useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { I as Icon } from './Icon-es.js';

const DURATION_SIMPLE = 0.1;
const DURATION_AVERAGE = 0.2;
const FADE = {
    visible: { opacity: 1 },
    hidden: { opacity: 0 },
};
const SLIDE_IN_UP = {
    visible: { y: 0, opacity: 1 },
    hidden: { y: "10%", opacity: 0 },
};
const SLIDE_IN_DOWN = {
    visible: { y: 0, opacity: 1 },
    hidden: { y: "-10%", opacity: 0 },
};
const SPIN_COUNTER_CLOCK_WISE = {
    visible: {
        rotate: 0,
        scale: 1,
        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
    },
    hidden: {
        rotate: 180,
        scale: 0.6,
        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
    },
};
const SPIN_CLOCK_WISE = {
    visible: {
        rotate: 0,
        scale: 1,
        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
    },
    hidden: {
        rotate: -180,
        scale: 0.6,
        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
    },
};

function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromBottom", }) {
    const [ref, setRef] = useState(null);
    const isSwitchingBetweenIcons = initialChild.type === Icon && switchTo.type === Icon;
    const { key, transition, child, duration } = getChildData();
    return (React__default.createElement(AnimatePresence, { mode: "wait", initial: false },
        React__default.createElement(motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
    function getDisplayValue() {
        if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {
            return window.getComputedStyle(ref.firstElementChild).display;
        }
    }
    function getChildData() {
        let data = {
            key: `${initialChild.type.toString()}_1`,
            child: initialChild,
        };
        if (switched) {
            data = { key: `${switchTo.type.toString()}_2`, child: switchTo };
        }
        return Object.assign(Object.assign({}, data), { transition: getTransitionType(), duration: getTransitionDuration() });
    }
    function getTransitionType() {
        if (isSwitchingBetweenIcons) {
            if (switched)
                return SPIN_COUNTER_CLOCK_WISE;
            return SPIN_CLOCK_WISE;
        }
        else if (type === "fade") {
            return FADE;
        }
        else {
            if (switched)
                return SLIDE_IN_UP;
            return SLIDE_IN_DOWN;
        }
    }
    function getTransitionDuration() {
        switch (type) {
            case "fade":
                return DURATION_AVERAGE;
            default:
                return DURATION_SIMPLE;
        }
    }
}
AnimatedSwitcher.Icon = function AnimatedSwitcherIcon({ switchToIcon, switched, initialIcon, }) {
    return (React__default.createElement(AnimatedSwitcher, { switched: switched, initialChild: React__default.createElement(Icon, { name: initialIcon }), switchTo: React__default.createElement(Icon, { name: switchToIcon }) }));
};

export { AnimatedSwitcher as A };
