import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from "react";
import classnames from "classnames";
import startCase from "lodash-es/startCase";
import BrandIcon from "../BrandIcon";
import Typography from "../Typography";
import ChevronRight from "../Icon/ChevronRight";
import CssFlex from "../CssFlex";
import getClasses from "./styles";
import SimpleSelector, { getNameIcon } from "./SimpleSelector";

function MultipleSelector(props) {
  var classes = getClasses();
  var initialCampaigns = props.initialCampaigns,
      campaigns = props.campaigns,
      channel = props.channel;
  var minLimit = props.minLimit,
      maxLimit = props.maxLimit,
      changeBudget = props.changeBudget,
      openSelector = props.openSelector;

  var _useState = useState(openSelector),
      _useState2 = _slicedToArray(_useState, 2),
      open = _useState2[0],
      setOpen = _useState2[1];

  return /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    className: classes.sameLine
  }, /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: classes.channelNameWrapper,
    onClick: function onClick() {
      return setOpen(!open);
    }
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "f1-14",
    weight: "bold"
  }, startCase(channel)), /*#__PURE__*/React.createElement(ChevronRight, {
    className: classnames(classes.arrow, _defineProperty({}, classes.arrowPosition, open))
  }))), open && /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md",
    className: classes.multiCampaignsTitle
  }, campaigns.map(function (campaign, index) {
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: "multiple-selector-".concat(channel, "-").concat(campaign.name)
    }, /*#__PURE__*/React.createElement(CssFlex, {
      justifyContent: "space-between"
    }, /*#__PURE__*/React.createElement(CssFlex, {
      direction: "column",
      alignItems: "center",
      gap: "sm",
      flexBasis: "150px"
    }, /*#__PURE__*/React.createElement(BrandIcon, {
      icon: getNameIcon(channel),
      size: 32
    }), /*#__PURE__*/React.createElement(Typography, {
      align: "center",
      variant: "f1-12",
      weight: "bold",
      shade: 400
    }, campaign.name)), /*#__PURE__*/React.createElement(SimpleSelector, {
      initialValue: initialCampaigns[index].budget,
      value: campaign.budget,
      channel: channel,
      minLimit: minLimit,
      maxLimit: maxLimit,
      changeBudget: changeBudget,
      campaign: campaign
    })));
  })));
}

export default MultipleSelector;