import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
import { memo, useEffect, useRef } from "react";
import { color, duration, size, timingFunction } from "./tokens.stylex";

// This needs styling. The component currently only exists
// so that we can use it with its API

const fadeIn = stylex.keyframes({
  from: {
    opacity: 0
  },
  to: {
    opacity: 1
  }
});
const shake = stylex.keyframes({
  "0%": {
    transform: "translateX(0)"
  },
  "25%": {
    transform: "translateX(-4px)"
  },
  "50%": {
    transform: "translateX(4px)"
  },
  "75%": {
    transform: "translateX(-4px)"
  },
  "100%": {
    transform: "translateX(0)"
  }
});
const pop = stylex.keyframes({
  "0%": {
    transform: "scale(1, 1)"
  },
  "50%": {
    transform: "scale(1.05, 1.05)"
  },
  "100%": {
    transform: "scale(1, 1)"
  }
});
const flash = stylex.keyframes({
  "0%": {
    opacity: 0,
    filter: "brightness(1)"
  },
  "50%": {
    opacity: 1,
    filter: "brightness(1.75)"
  },
  "100%": {
    filter: "brightness(1)"
  }
});
const styles = stylex.create({
  alert: {
    display: "flex",
    alignItems: "center",
    gap: size.px4,
    padding: size.px4,
    margin: `${size.px4} 0`
  },
  error: {
    backgroundColor: color.red400
  },
  warning: {
    backgroundColor: color.apricot300
  },
  info: {
    backgroundColor: color.blue400
  },
  success: {
    backgroundColor: color.apple400
  },
  icon: {
    width: size.px6,
    height: size.px6,
    minWidth: size.px6,
    minHeight: size.px6,
    mixBlendMode: "overlay"
  }
});
const fadeInStyles = stylex.create({
  info: {
    animationName: fadeIn,
    animationDuration: duration.slow,
    animationTimingFunction: timingFunction.fast
  },
  error: {
    animationName: `${fadeIn}, ${shake}`,
    animationDuration: `${duration.slow}, ${duration.default}`,
    animationTimingFunction: `${timingFunction.fast}, ${timingFunction.fast}`
  },
  warning: {
    animationName: flash,
    animationDuration: duration.default,
    animationTimingFunction: "ease-in-out",
    animationFillMode: "both"
  },
  success: {
    animationName: `${fadeIn}, ${pop}`,
    animationDuration: `${duration.default}, ${duration.default}`,
    animationTimingFunction: "ease-in-out, ease-in-out",
    // eslint-disable-next-line @stylexjs/valid-styles
    animationFillMode: "both, both" // TODO: Issue?
  }
});

/**
 * A simple alert banner.
 *
 * Inspired by:
 * https://mui.com/material-ui/react-alert/
 */

//#region Icons

// These icons were optimized using SVGOMG and originate from our internal icon set: https://jakearchibald.github.io/svgomg

const styleXIconProps = stylex.props(styles.icon);
const ErrorIcon = memo(() => {
  const $ = _c(1);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" {...styleXIconProps}><path fill="#fff" d="M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm5.49 16.07a1 1 0 0 1-1.41 1.42l-3.9-3.9a.25.25 0 0 0-.36 0l-3.9 3.9a1 1 0 1 1-1.41-1.42l3.9-3.89a.25.25 0 0 0 0-.36l-3.9-3.9a1 1 0 0 1 1.41-1.41l3.9 3.9a.25.25 0 0 0 .36 0l3.9-3.9a1 1 0 0 1 1.41 1.41l-3.9 3.9a.25.25 0 0 0 0 .36Z" /></svg>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
});
const WarningIcon = memo(() => {
  const $ = _c(1);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" {...styleXIconProps}><path fill="#fff" d="m23.77 20.57-10-19A2 2 0 0 0 12 .5a2 2 0 0 0-1.77 1.07l-10 19a2 2 0 0 0 .06 2A2 2 0 0 0 2 23.5h20a2 2 0 0 0 1.77-2.93ZM11 8.5a1 1 0 0 1 2 0v6a1 1 0 0 1-2 0ZM12.05 20a1.53 1.53 0 0 1-1.52-1.47A1.48 1.48 0 0 1 12 17a1.53 1.53 0 0 1 1.52 1.47A1.48 1.48 0 0 1 12.05 20Z" /></svg>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
});
const InformationIcon = memo(() => {
  const $ = _c(1);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...styleXIconProps}><path fill="#fff" d="M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm.25 5a1.5 1.5 0 1 1-1.5 1.5 1.5 1.5 0 0 1 1.5-1.5Zm2.25 13.5h-4a1 1 0 0 1 0-2h.75a.25.25 0 0 0 .25-.25v-4.5a.25.25 0 0 0-.25-.25h-.75a1 1 0 0 1 0-2h1a2 2 0 0 1 2 2v4.75a.25.25 0 0 0 .25.25h.75a1 1 0 0 1 0 2Z" /></svg>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
});
const SuccessIcon = memo(() => {
  const $ = _c(1);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...styleXIconProps}><path fill="#fff" d="M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm6.93 8.2-6.85 9.29a1 1 0 0 1-1.43.19l-4.89-3.91a1 1 0 0 1-.15-1.41A1 1 0 0 1 7 12.21l4.08 3.26L17.32 7a1 1 0 0 1 1.39-.21 1 1 0 0 1 .22 1.41Z" /></svg>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
});

//#endregion

const iconMap = {
  error: <ErrorIcon />,
  warning: <WarningIcon />,
  info: <InformationIcon />,
  success: <SuccessIcon />
};
const ariaLiveMap = {
  error: "assertive",
  warning: "polite",
  info: undefined,
  // Same as "off"
  success: undefined // Same as "off"
};

// TODO: More a11ly according to https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
export default memo(function Alert(props) {
  const $ = _c(13);
  const divRef = useRef(null);
  let t0;
  let t1;
  if ($[0] !== props.scrollIntoView) {
    t0 = () => {
      if (props.scrollIntoView) {
        divRef.current?.scrollIntoView({
          behavior: "smooth"
        });
      }
    };
    t1 = [props.scrollIntoView];
    $[0] = props.scrollIntoView;
    $[1] = t0;
    $[2] = t1;
  } else {
    t0 = $[1];
    t1 = $[2];
  }
  useEffect(t0, t1);
  let t2;
  if ($[3] !== props.fadeIn || $[4] !== props.severity) {
    t2 = stylex.props(styles.alert, styles[props.severity], props.fadeIn && fadeInStyles[props.severity]);
    $[3] = props.fadeIn;
    $[4] = props.severity;
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  const t3 = ariaLiveMap[props.severity];
  const t4 = props.icon ?? iconMap[props.severity];
  let t5;
  if ($[6] !== props.children) {
    t5 = <div>{props.children}</div>;
    $[6] = props.children;
    $[7] = t5;
  } else {
    t5 = $[7];
  }
  let t6;
  if ($[8] !== t2 || $[9] !== t3 || $[10] !== t4 || $[11] !== t5) {
    t6 = <div {...t2} role="alert" aria-live={t3} ref={divRef}>{t4}{t5}</div>;
    $[8] = t2;
    $[9] = t3;
    $[10] = t4;
    $[11] = t5;
    $[12] = t6;
  } else {
    t6 = $[12];
  }
  return t6;
});
//# sourceMappingURL=Alert.jsx.map