import { twToRem } from "./theme.js";
import { camelToKebab } from "../../utils/camelToKebab.js";
function createCSSProp(prop) {
  return prop;
}
const componentsCSSProps = {
  // Not a real component; used to define the general order of some `@prop-*` utilities
  // (e.g. without this, if the first component with a `size` prop only had `small` and `medium` values, `xsmall` would be sorted after them)
  dummy: {
    size: createCSSProp({
      type: "values",
      values: ["2xsmall", "xsmall", "small", "medium", "large", "xlarge", "2xlarge"],
      defaultValue: "medium"
    }),
    variant: createCSSProp({
      type: "values",
      values: ["primary", "secondary", "tertiary", "inverse", "danger", "naked", "enclosed"],
      defaultValue: "primary"
    })
  },
  address: {
    variant: createCSSProp({
      type: "values",
      values: ["primary", "secondary", "enclosed"],
      defaultValue: "primary"
    }),
    size: createCSSProp({
      type: "values",
      values: ["small", "medium", "large"],
      defaultValue: "medium"
    })
  },
  avatar: {
    size: createCSSProp({
      type: "values",
      values: ["xsmall", "small", "medium", "large", "xlarge", "2xlarge"],
      defaultValue: "medium"
    })
  },
  "avatar-group": {
    size: createCSSProp({
      type: "values",
      values: ["xsmall", "small", "medium", "large", "xlarge"],
      defaultValue: "medium"
    })
  },
  button: {
    variant: createCSSProp({
      type: "values",
      values: ["primary", "secondary", "tertiary", "inverse", "danger", "naked"],
      defaultValue: "secondary"
    }),
    size: createCSSProp({
      type: "values",
      values: ["xsmall", "small", "medium", "large"],
      defaultValue: "medium"
    }),
    hideLabel: createCSSProp({
      type: "values",
      values: [false, true],
      defaultValue: false
    })
  },
  "button-group": {
    variant: createCSSProp({
      type: "values",
      values: ["primary", "secondary", "tertiary", "inverse", "danger", "naked"],
      defaultValue: "secondary"
    }),
    size: createCSSProp({
      type: "values",
      values: ["xsmall", "small", "medium", "large"],
      defaultValue: "medium"
    }),
    orientation: createCSSProp({
      type: "values",
      values: ["horizontal", "vertical"],
      defaultValue: "horizontal"
    }),
    fullWidth: createCSSProp({
      type: "values",
      values: [false, true],
      defaultValue: false
    })
  },
  card: {
    variant: createCSSProp({
      type: "values",
      values: ["primary", "secondary"],
      defaultValue: "secondary"
    }),
    padding: createCSSProp({
      type: "length",
      defaultValue: 6
    })
  },
  checkable: {
    size: createCSSProp({
      type: "values",
      values: ["small", "medium"],
      defaultValue: "medium"
    })
  },
  chip: {
    size: createCSSProp({
      type: "values",
      values: ["small", "medium", "large"],
      defaultValue: "medium"
    })
  },
  cluster: {
    shape: createCSSProp({
      type: "values",
      values: ["circle", "square"],
      defaultValue: "circle"
    }),
    size: createCSSProp({
      type: "values",
      values: ["xsmall", "small", "medium", "large", "xlarge"],
      defaultValue: "medium"
    })
  },
  "description-list": {
    size: createCSSProp({
      type: "values",
      values: ["small", "medium", "large"],
      defaultValue: "medium"
    }),
    orientation: createCSSProp({
      type: "values",
      values: ["horizontal", "vertical"],
      defaultValue: "vertical"
    })
  },
  "description-list-item": {
    variant: createCSSProp({
      type: "values",
      values: ["default", "caption", "mono"],
      defaultValue: "default"
    })
  },
  divider: {
    variant: createCSSProp({
      type: "values",
      values: ["subtle", "default", "strong"],
      defaultValue: "default"
    }),
    orientation: createCSSProp({
      type: "values",
      values: ["horizontal", "vertical"],
      defaultValue: "horizontal"
    }),
    diamonds: createCSSProp({
      type: "values",
      values: [false, true],
      defaultValue: false
    })
  },
  icon: {
    size: createCSSProp({
      type: "length",
      defaultValue: "1em"
    }),
    color: createCSSProp({
      type: "color",
      defaultValue: "current"
    })
  },
  input: {
    size: createCSSProp({
      type: "values",
      values: ["medium", "large"],
      defaultValue: "medium"
    })
  },
  label: {
    variant: createCSSProp({
      type: "values",
      values: ["primary", "secondary"],
      defaultValue: "primary"
    }),
    size: createCSSProp({
      type: "values",
      values: ["small", "medium", "large"],
      defaultValue: "medium"
    })
  },
  link: {
    variant: createCSSProp({
      type: "values",
      values: ["primary", "secondary"],
      defaultValue: "primary"
    })
  },
  "locale-switcher": {
    displayFormat: createCSSProp({
      type: "values",
      values: ["short", "full"],
      defaultValue: "full"
    })
  },
  "mega-menu": {
    layout: createCSSProp({
      type: "values",
      values: ["compact", "full"],
      defaultValue: "full"
    })
  },
  modal: {
    variant: createCSSProp({
      type: "values",
      values: ["dialog", "drawer"],
      defaultValue: "dialog"
    }),
    size: createCSSProp({
      type: "values",
      values: ["small", "medium", "large"],
      defaultValue: "medium"
    })
  },
  navbar: {
    layout: createCSSProp({
      type: "values",
      values: ["compact", "full"],
      defaultValue: "full"
    })
  },
  "nav-link": {
    variant: createCSSProp({
      type: "values",
      values: ["primary", "secondary"],
      defaultValue: "primary"
    })
  },
  search: {
    size: createCSSProp({
      type: "values",
      values: ["small", "medium", "large"],
      defaultValue: "medium"
    })
  },
  "segmented-control": {
    size: createCSSProp({
      type: "values",
      values: ["small", "medium", "large"],
      defaultValue: "medium"
    })
  },
  select: {
    size: createCSSProp({
      type: "values",
      values: ["medium", "large"],
      defaultValue: "medium"
    })
  },
  status: {
    variant: createCSSProp({
      type: "values",
      values: ["default", "info", "success", "warning", "error", "muted"],
      defaultValue: "default"
    })
  },
  stepper: {
    labelPosition: createCSSProp({
      type: "values",
      values: ["top", "bottom", "hidden"],
      defaultValue: "top"
    })
  },
  "tab-set": {
    size: createCSSProp({
      type: "values",
      values: ["small", "medium"],
      defaultValue: "medium"
    }),
    fullWidth: createCSSProp({
      type: "values",
      values: [false, true],
      defaultValue: false
    })
  },
  tag: {
    variant: createCSSProp({
      type: "values",
      values: ["purple", "blue", "green", "yellow", "red", "white", "midnight"],
      defaultValue: "purple"
    }),
    size: createCSSProp({
      type: "values",
      values: ["xsmall", "small", "medium"],
      defaultValue: "medium"
    })
  }
};
function getCSSPropsAttributes(componentName, passedValues, style) {
  const returnedStyle = { ...style };
  for (const propName in passedValues) {
    if (passedValues[propName] === void 0) continue;
    const kebabCasePropName = camelToKebab(propName);
    const prop = componentsCSSProps[componentName][propName];
    returnedStyle[`--gds-passed-${kebabCasePropName}`] = getCSSPropRawValue(prop, passedValues[propName]);
  }
  return {
    style: returnedStyle
  };
}
function getCSSPropRawValue(prop, value) {
  switch (prop.type) {
    case "values": {
      return `gds-${value}`;
    }
    case "length": {
      const lengthValue = value;
      if (typeof lengthValue === "number") {
        return twToRem(lengthValue);
      } else {
        return lengthValue;
      }
    }
    case "color": {
      const colorValue = value;
      if (colorValue === "current") {
        return "currentcolor";
      } else if (colorValue === "transparent") {
        return "transparent";
      } else {
        const [color, opacity] = colorValue.split("/");
        return `rgb(var(--gds-color-${color}) / ${Number(opacity ?? 100) / 100})`;
      }
    }
  }
}
export {
  componentsCSSProps,
  getCSSPropRawValue,
  getCSSPropsAttributes
};
