import React, { useMemo } from 'react';
import { FormFieldError, FormFieldErrorSmall, ToggleOn, CircleLoaderCheck, CircleLoaderCheckSmall, } from '@wix/wix-ui-icons-common/system';
import Arc from './components/Arc';
import Heading from '../Heading';
import Tooltip from '../Tooltip';
import { SIZES_TO_PIXELS_MAP, SIZE_TO_STROKE_WIDTH_MAP, SIZE_TO_ARC_ANGLE_MAP, } from './Loader.constants';
import { st, classes } from './Loader.st.css.js';
const FULL_CIRCLE_ANGLE = 359;
const sizeToSuccessIconMap = {
    tiny: React.createElement(ToggleOn, null),
    small: React.createElement(CircleLoaderCheckSmall, null),
    medium: React.createElement(CircleLoaderCheck, null),
    large: React.createElement(CircleLoaderCheck, null),
};
const sizeToErrorIconMap = {
    tiny: React.createElement(FormFieldError, null),
    small: React.createElement(FormFieldErrorSmall, null),
    medium: React.createElement(FormFieldError, null),
    large: React.createElement(FormFieldError, null),
};
const Loader = ({ size = 'medium', color = 'blue', text, status = 'loading', statusMessage, dataHook, }) => {
    const loader = useMemo(() => {
        const successIcon = sizeToSuccessIconMap[size];
        const errorIcon = sizeToErrorIconMap[size];
        const strokeWidth = SIZE_TO_STROKE_WIDTH_MAP[size];
        const sizeInPx = SIZES_TO_PIXELS_MAP[size];
        const isTerminalStatus = status === 'success' || status === 'error';
        const lightArcAngle = isTerminalStatus
            ? FULL_CIRCLE_ANGLE
            : SIZE_TO_ARC_ANGLE_MAP[size].light;
        const darkArcAngle = isTerminalStatus
            ? FULL_CIRCLE_ANGLE
            : SIZE_TO_ARC_ANGLE_MAP[size].dark;
        return (React.createElement("div", { className: classes.arcsContainer, style: {
                width: `${sizeInPx}px`,
                height: `${sizeInPx}px`,
            } },
            React.createElement(Arc, { angle: lightArcAngle, className: classes.lightArc, strokeWidth: strokeWidth, viewBoxSize: sizeInPx }),
            React.createElement(Arc, { angle: darkArcAngle, className: classes.darkArc, strokeWidth: strokeWidth, viewBoxSize: sizeInPx }),
            isTerminalStatus && (React.createElement("div", { className: classes.statusIndicator, "data-hook": "loader-status-indicator" },
                status === 'success' && successIcon,
                status === 'error' && errorIcon))));
    }, [status, size]);
    return (React.createElement("div", { className: st(classes.root, { size, color, status }), "data-hook": dataHook, "data-size": size, "data-color": color, "data-status": status },
        statusMessage ? (React.createElement(Tooltip, { content: statusMessage, appendTo: "window", dataHook: "loader-tooltip" }, loader)) : (loader),
        size !== 'tiny' && text && (React.createElement("div", { className: classes.text },
            React.createElement(Heading, { size: "extraTiny", dataHook: "loader-text" }, text)))));
};
Loader.displayName = 'Loader';
export default Loader;
//# sourceMappingURL=Loader.js.map