import React from "react";
import styled, { css } from "styled-components";
import { ButtonGroup } from "../ButtonGroup";
import { Choose } from "../Choose";
const StyledChoose = styled(Choose).withConfig({
  displayName: "ChooseV2__StyledChoose",
  componentId: "sc-142e30o-0"
})(["", ""], props => !props.active && css(["background-color:transparent !important;"]));
export const ChooseV2 = _ref => {
  let {
    required = false,
    multiple = false,
    invalid = false,
    options,
    selected,
    onChange
  } = _ref;
  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 {
      if (required && selected.includes(id)) {
        return;
      }
      const newSelected = selected.includes(id) ? [] : [id];
      onChange(newSelected);
    }
  };
  return /*#__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)));
};
//# sourceMappingURL=ChooseV2.js.map