var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
import { jsx, jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { string, number, shape, oneOfType, oneOf } from "prop-types";
import {
  backgroundColor,
  borders,
  elevation,
  positions,
  display,
  spacing as systemSpacing
} from "@gympass/yoga-system";
import { charLength } from "../../shared";
const ProgressWrapper = styled.View`
  width: 100%;

  ${({ isNumber, align }) => `

  ${isNumber ? `
      flex-direction: row;
    ` : `
      flex-direction: column;
    `}

  ${isNumber && align === "left" ? "flex-direction: row-reverse;" : ""}
  `}

  ${backgroundColor}
  ${borders}
  ${elevation}
  ${positions}
  ${display}
  ${systemSpacing}
`;
const ProgressBar = styled.View`
  position: relative;
  flex-grow: 1;

  margin: auto 0;

  ${({
  theme: {
    yoga: {
      components: { progress }
    }
  }
}) => `
    height: ${progress.height}px;

    background-color: ${progress.backgroundColor.bar};

    border-radius: ${progress.border.radius}px;
  `};
`;
const ProgressValue = styled.View`
  position: absolute;

  height: 100%;

  ${({
  variant,
  width,
  theme: {
    yoga: {
      colors: { [variant]: color },
      components: { progress }
    }
  }
}) => `
    width: ${width}%;

    background-color: ${color};

    border-radius: ${progress.border.radius}px;
  `}
`;
const Label = styled.Text`
  ${({
  isNumber,
  align,
  theme: {
    yoga: {
      baseFont,
      spacing,
      colors,
      components: { progress }
    }
  }
}) => `
  font-family: ${baseFont.family};
  font-size: ${progress.label.font.size}px;
  text-align: ${align};
  color: ${colors.deep};

  ${isNumber ? `
      width: 22px;

      margin-${align === "right" ? "left" : "right"}: ${spacing.xxsmall}px;
    ` : `
      margin-top: ${spacing.xxxsmall}px;
    `}
`}
`;
const Progress = React.forwardRef(
  (_a, ref) => {
    var _b = _a, {
      label = {
        value: void 0,
        placement: "left"
      },
      max = 1,
      value = void 0,
      variant = "verve"
    } = _b, props = __objRest(_b, [
      "label",
      "max",
      "value",
      "variant"
    ]);
    const isNumber = !/[a-zA-Z]/g.test(label.value);
    const align = label.placement || "left";
    return /* @__PURE__ */ jsxs(ProgressWrapper, __spreadProps(__spreadValues({ ref }, props), { isNumber, align, children: [
      /* @__PURE__ */ jsx(ProgressBar, { children: /* @__PURE__ */ jsx(ProgressValue, { width: value / max * 100, variant }) }),
      Object.keys(label).length > 0 && (isNumber || label.value) && /* @__PURE__ */ jsx(Label, { isNumber, align, children: label.value })
    ] }));
  }
);
Progress.propTypes = {
  /** Use labels to increase users understanding. If the value is numeric, make
   * sure it has a maximum of 3 characters */
  label: shape({
    value: charLength(3, oneOfType([number, string])),
    placement: oneOf(["left", "right"])
  }),
  /** This attribute describes how much work the task indicated by the progress
   * element requires. The max attribute, if present, must have a value greater
   * than zero and be a valid floating point number. The default value is 1. */
  max: number,
  /** This attribute specifies how much of the task that has been completed. It
   * must be a valid floating point number between 0 and max, or between 0 and 1
   * if max is omitted. If there is no value attribute, the progress bar is
   * indeterminate; this indicates that an activity is ongoing with no
   * indication of how long it is expected to take. */
  value: number,
  /** style the card following the theme (primary, secondary, vibin, hope,
   * energy, relax, peace, verve, uplift, deepPurple, deep, stamina, dark,
   * medium, light, clear, white) */
  variant: oneOf([
    "primary",
    "secondary",
    "vibin",
    "hope",
    "energy",
    "relax",
    "peace",
    "verve",
    "uplift",
    "deepPurple",
    "stamina",
    "dark",
    "medium",
    "deep",
    "light",
    "clear",
    "white"
  ])
};
var Progress_default = Progress;
export {
  Progress_default as default
};
