import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
// This seems like a hack
import { memo } from "react";
import { controlColor } from "./theme.stylex";
import { color, size } from "./tokens.stylex";

/**
 * Omit `max` and `value` to make the progress bar indeterminate.
 */

const styles = stylex.create({
  bar: {
    display: "block",
    height: size.px1,
    width: "100%",
    backgroundColor: color.gray400
  },
  inline: {
    display: "inline"
  },
  error: {
    backgroundColor: controlColor.progressErrorBackground
  },
  indeterminate: {
    overflow: "hidden"
  }
});
const indeterminate = stylex.keyframes({
  "0%": {
    transform: "translateX(0) scaleX(0)"
  },
  "40%": {
    transform: "translateX(0) scaleX(0.4)"
  },
  "100%": {
    transform: "translateX(100%) scaleX(0.5)"
  }
});
const innerStyles = stylex.create({
  inner: {
    height: "100%",
    width: "var(--progress-width)",
    transition: "width 0.25s ease-in-out",
    backgroundColor: controlColor.buttonTertiaryColor
  },
  error: {
    backgroundColor: controlColor.progressErrorBackground
  },
  indeterminate: {
    width: "100%",
    transformOrigin: "0% 50%",
    animationName: indeterminate,
    animationDuration: "2s",
    animationTimingFunction: "linear",
    animationIterationCount: "infinite"
  }
});
const clamp = (value, min, max) => value < min ? min : value > max ? max : value;
export default memo(function ProgressBar(props) {
  const $ = _c(34);
  if (props.max === undefined && props.value === undefined) {
    let t0;
    if ($[0] !== props.inline) {
      t0 = stylex.props(styles.bar, props.inline && styles.inline, styles.indeterminate);
      $[0] = props.inline;
      $[1] = t0;
    } else {
      t0 = $[1];
    }
    const outerProps = t0;
    let t1;
    if ($[2] !== props.error) {
      t1 = stylex.props(innerStyles.inner, props.error && innerStyles.error, innerStyles.indeterminate);
      $[2] = props.error;
      $[3] = t1;
    } else {
      t1 = $[3];
    }
    const innerProps = t1;
    let t2;
    if ($[4] !== innerProps) {
      t2 = <div {...innerProps} />;
      $[4] = innerProps;
      $[5] = t2;
    } else {
      t2 = $[5];
    }
    let t3;
    if ($[6] !== outerProps || $[7] !== props.label || $[8] !== t2) {
      t3 = <div {...outerProps} role="progressbar" aria-label={props.label}>{t2}</div>;
      $[6] = outerProps;
      $[7] = props.label;
      $[8] = t2;
      $[9] = t3;
    } else {
      t3 = $[9];
    }
    return t3;
  }
  const max = props.max ?? 1;
  const value = props.value ?? 0;
  const percentage = Math.round(clamp(value / max, 0, 1) * 100);
  const t0 = percentage + "%";
  let t1;
  let t2;
  let t3;
  let t4;
  let t5;
  let t6;
  let t7;
  if ($[10] !== percentage || $[11] !== props.error || $[12] !== props.inline || $[13] !== props.label || $[14] !== t0) {
    const style = {
      "--progress-width": t0
    };
    t2 = "progressbar";
    if ($[22] !== props.inline) {
      t3 = stylex.props(styles.bar, props.inline && styles.inline);
      $[22] = props.inline;
      $[23] = t3;
    } else {
      t3 = $[23];
    }
    t4 = props.label;
    t5 = 0;
    t6 = 100;
    t7 = percentage;
    t1 = stylex.props(innerStyles.inner, props.error && innerStyles.error, style);
    $[10] = percentage;
    $[11] = props.error;
    $[12] = props.inline;
    $[13] = props.label;
    $[14] = t0;
    $[15] = t1;
    $[16] = t2;
    $[17] = t3;
    $[18] = t4;
    $[19] = t5;
    $[20] = t6;
    $[21] = t7;
  } else {
    t1 = $[15];
    t2 = $[16];
    t3 = $[17];
    t4 = $[18];
    t5 = $[19];
    t6 = $[20];
    t7 = $[21];
  }
  let t8;
  if ($[24] !== t1) {
    t8 = <div {...t1} />;
    $[24] = t1;
    $[25] = t8;
  } else {
    t8 = $[25];
  }
  let t9;
  if ($[26] !== t2 || $[27] !== t3 || $[28] !== t4 || $[29] !== t5 || $[30] !== t6 || $[31] !== t7 || $[32] !== t8) {
    t9 = <div role={t2} {...t3} aria-label={t4} aria-valuemin={t5} aria-valuemax={t6} aria-valuenow={t7}>{t8}</div>;
    $[26] = t2;
    $[27] = t3;
    $[28] = t4;
    $[29] = t5;
    $[30] = t6;
    $[31] = t7;
    $[32] = t8;
    $[33] = t9;
  } else {
    t9 = $[33];
  }
  return t9;
});
//# sourceMappingURL=ProgressBar.jsx.map