import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useRef, useState, useEffect } from "react";
import { StyledChoose, StyledFlexContainer, StyledLabel, StyledRadioOption, StyledVerticalContainer } from "./Styles";
import { useResizeObserver, useForkRef } from "../../utils";
import { ButtonGroup } from "../ButtonGroup";
import { Checkbox } from "../Checkbox";
import { RadioButton } from "../RadioButton";
export const ChooseV2 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  var _parentSize$width, _flexSize$width;
  let {
    required = false,
    multiple = false,
    invalid = false,
    options,
    selected,
    onChange,
    ...rest
  } = _ref;
  const internalRef = useRef(null);
  const flexContainerRef = useRef(null);
  const handleRef = useForkRef(ref, internalRef);
  const [useVerticalLayout, setUseVerticalLayout] = useState(false);
  const [isReady, setIsReady] = useState(false);
  const parentSize = useResizeObserver(internalRef);
  const flexSize = useResizeObserver(flexContainerRef);
  const parentWidth = (_parentSize$width = parentSize == null ? void 0 : parentSize.width) != null ? _parentSize$width : 0;
  const flexWidth = (_flexSize$width = flexSize == null ? void 0 : flexSize.width) != null ? _flexSize$width : 0;
  useEffect(() => {
    if (parentWidth === 0) return;
    const measure = () => {
      const temp = document.createElement("div");
      temp.style.display = "inline-flex";
      temp.style.visibility = "hidden";
      temp.style.position = "absolute";
      temp.style.whiteSpace = "nowrap";
      temp.style.pointerEvents = "none";
      document.body.appendChild(temp);
      options.forEach(option => {
        const button = document.createElement("button");
        button.textContent = option.name;
        button.style.padding = "6px 12px";
        button.style.border = "1px solid transparent";
        button.style.marginRight = "4px";
        temp.appendChild(button);
      });
      const totalWidth = temp.offsetWidth + 8;
      document.body.removeChild(temp);
      setUseVerticalLayout(totalWidth > parentWidth);
      setIsReady(true);
    };
    requestAnimationFrame(measure);
  }, [parentWidth, options, flexWidth]);
  const handleSelect = id => {
    if (multiple) {
      const newSelected = selected.includes(id) ? selected.filter(s => s !== id) : [...selected, id];
      if (required && newSelected.length === 0) return;
      onChange(newSelected);
    } else {
      const newSelected = selected.includes(id) ? [] : [id];
      if (required && newSelected.length === 0) return;
      onChange(newSelected);
    }
  };
  if (!isReady) {
    return /*#__PURE__*/React.createElement("div", {
      ref: handleRef,
      style: {
        width: "100%",
        minHeight: "32px"
      }
    });
  }
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: handleRef
  }, rest, {
    style: {
      display: "flex",
      width: "100%"
    }
  }), useVerticalLayout ? /*#__PURE__*/React.createElement(StyledVerticalContainer, null, options.map(option => /*#__PURE__*/React.createElement(StyledRadioOption, {
    $disabled: !!option.disabled,
    key: option.id,
    "data-disabled": option.disabled
  }, multiple || !required ? /*#__PURE__*/React.createElement(Checkbox, {
    checked: selected.includes(option.id),
    disabled: option.disabled,
    onChange: () => !option.disabled && handleSelect(option.id),
    name: "choose-v2-" + option.id,
    id: "choose-v2-" + option.id
  }) : /*#__PURE__*/React.createElement(RadioButton, {
    checked: selected.includes(option.id),
    disabled: option.disabled,
    onChange: () => !option.disabled && handleSelect(option.id),
    id: "choose-v2-" + option.id,
    name: "choose-v2-" + option.id
  }), /*#__PURE__*/React.createElement(StyledLabel, {
    $disabled: !!option.disabled,
    weight: "regular",
    htmlFor: "choose-v2-" + option.id
  }, option.name)))) : /*#__PURE__*/React.createElement(StyledFlexContainer, {
    ref: flexContainerRef
  }, /*#__PURE__*/React.createElement(ButtonGroup, {
    invalid: invalid
  }, options.map(option => /*#__PURE__*/React.createElement(StyledChoose, {
    key: option.id,
    active: selected.includes(option.id),
    disabled: option.disabled,
    onClick: () => handleSelect(option.id)
  }, option.name)))));
});
ChooseV2.displayName = "ChooseV2";
//# sourceMappingURL=ChooseV2.js.map