"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var SplitInput_stories_exports = {};
__export(SplitInput_stories_exports, {
  Split: () => Split,
  default: () => SplitInput_stories_default
});
module.exports = __toCommonJS(SplitInput_stories_exports);
var import_react = __toESM(require("react"));
var import_react_select = require("react-select");
var import_index = __toESM(require("./index"));
var import_BaseInput = __toESM(require("../BaseInput"));
var import_QuantityInput = __toESM(require("../QuantityInput"));
var import_QrCodeInput = __toESM(require("../QrCodeInput"));
var import_SelectInput = __toESM(require("../SelectInput"));
var import_Flex = __toESM(require("../../layout/Flex"));
var import_Text = __toESM(require("../../asorted/Text"));
var SplitInput_stories_default = {
  title: "Form/Input/Split",
  component: import_index.default,
  argTypes: {
    value: { table: { disable: true } },
    renderLeft: { table: { disable: true } },
    renderRight: { table: { disable: true } },
    rowHeight: { table: { disable: true } },
    isDisabled: { table: { disable: true } },
    disabled: { type: "boolean" },
    error: { type: "string" }
  }
};
const options = [
  // Labels contain muttons spaces (U+2003 character).
  // Do not replace with a regular space please!
  { value: "chocolate", label: "\u{1F36B}\u2003Chocolate" },
  { value: "strawberry", label: "\u{1F353}\u2003Strawberry" },
  { value: "lemon", label: "\u{1F34B}\u2003Lemon" },
  { value: "vanilla", label: "\u{1F366}\u2003Vanilla" }
];
const Label = ({ left, right }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { justifyContent: "space-between", mt: 8, px: 6 }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { fontWeight: "semiBold", variant: "small" }, `<${left} />`), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { fontWeight: "semiBold", variant: "small" }, `<${right} />`));
const selectStyles = {
  container: (provided, state) => ({
    ...provided,
    height: "100%",
    cursor: state.isDisabled ? "not-allowed" : "text",
    pointerEvents: void 0
  }),
  control: (_, state) => ({
    display: "flex",
    alignItems: "center",
    height: "100%",
    padding: "0 20px",
    pointerEvents: state.isDisabled ? "none" : void 0
  })
};
const Split = (args) => {
  const [leftValue1, setLeftValue1] = import_react.default.useState(null);
  const [rightValue1, setRightValue1] = import_react.default.useState("");
  const [leftValue2, setLeftValue2] = import_react.default.useState(null);
  const [rightValue2, setRightValue2] = import_react.default.useState("");
  const [leftValue3, setLeftValue3] = import_react.default.useState(null);
  const [rightValue3, setRightValue3] = import_react.default.useState("");
  const [leftValue4, setLeftValue4] = import_react.default.useState("");
  const [rightValue4, setRightValue4] = import_react.default.useState("");
  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", rowGap: 3 }, /* @__PURE__ */ import_react.default.createElement(Label, { left: "SelectInput", right: "Input" }), /* @__PURE__ */ import_react.default.createElement(
    import_index.default,
    {
      ...args,
      renderLeft: (props) => /* @__PURE__ */ import_react.default.createElement(
        import_SelectInput.default,
        {
          value: leftValue1,
          options,
          placeholder: "Left",
          unwrapped: true,
          onChange: setLeftValue1,
          components: {
            Control: import_react_select.components.Control
          },
          styles: selectStyles,
          ...props
        }
      ),
      renderRight: (props) => /* @__PURE__ */ import_react.default.createElement(
        import_BaseInput.default,
        {
          value: rightValue1,
          placeholder: "Right",
          textAlign: "right",
          unwrapped: true,
          onChange: setRightValue1,
          ...props
        }
      )
    }
  ), /* @__PURE__ */ import_react.default.createElement(Label, { left: "SelectInput", right: "QuantityInput" }), /* @__PURE__ */ import_react.default.createElement(
    import_index.default,
    {
      ...args,
      renderLeft: (props) => /* @__PURE__ */ import_react.default.createElement(
        import_SelectInput.default,
        {
          value: leftValue2,
          options,
          placeholder: "Left",
          unwrapped: true,
          onChange: setLeftValue2,
          components: {
            Control: import_react_select.components.Control
          },
          styles: selectStyles,
          ...props
        }
      ),
      renderRight: (props) => /* @__PURE__ */ import_react.default.createElement(
        import_QuantityInput.default,
        {
          value: rightValue2,
          placeholder: "Right",
          textAlign: "right",
          unwrapped: true,
          onChange: setRightValue2,
          ...props
        }
      )
    }
  ), /* @__PURE__ */ import_react.default.createElement(Label, { left: "SelectInput", right: "QrCodeInput" }), /* @__PURE__ */ import_react.default.createElement(
    import_index.default,
    {
      ...args,
      renderLeft: (props) => /* @__PURE__ */ import_react.default.createElement(
        import_SelectInput.default,
        {
          value: leftValue3,
          options,
          placeholder: "Left",
          unwrapped: true,
          onChange: setLeftValue3,
          components: {
            Control: import_react_select.components.Control
          },
          styles: selectStyles,
          ...props
        }
      ),
      renderRight: (props) => /* @__PURE__ */ import_react.default.createElement(
        import_QrCodeInput.default,
        {
          value: rightValue3,
          placeholder: "Right",
          textAlign: "right",
          unwrapped: true,
          onChange: setRightValue3,
          ...props
        }
      )
    }
  ), /* @__PURE__ */ import_react.default.createElement(Label, { left: "Input", right: "Input" }), /* @__PURE__ */ import_react.default.createElement(
    import_index.default,
    {
      ...args,
      renderLeft: (props) => /* @__PURE__ */ import_react.default.createElement(
        import_BaseInput.default,
        {
          value: leftValue4,
          placeholder: "Left",
          unwrapped: true,
          onChange: setLeftValue4,
          ...props
        }
      ),
      renderRight: (props) => /* @__PURE__ */ import_react.default.createElement(
        import_BaseInput.default,
        {
          value: rightValue4,
          placeholder: "Right",
          textAlign: "right",
          unwrapped: true,
          onChange: setRightValue4,
          ...props
        }
      )
    }
  ));
};
//# sourceMappingURL=SplitInput.stories.js.map
