import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
import AlertCard from "../AlertCard";
import Button from "../Button";
import RoundedProgressBar from "../RoundedProgressBar";
import Typography from "../Typography";
import getClasses from "./styles";
import SimpleSelector from "./SimpleSelector";
import MultipleSelector from "./MultipleSelector";
import CssFlex from "../CssFlex";

var BudgetManagement = function BudgetManagement(props) {
  var classes = getClasses();
  var budgetCopy = props.budgetCopy,
      currency = props.currency,
      channels = props.channels,
      textButton = props.textButton,
      onClickButton = props.onClickButton,
      onChange = props.onChange,
      minLimit = props.minLimit,
      maxLimit = props.maxLimit,
      minAlert = props.minAlert,
      maxAlert = props.maxAlert,
      openFirstSelector = props.openFirstSelector;

  var _useState = useState(channels),
      _useState2 = _slicedToArray(_useState, 2),
      finalChannels = _useState2[0],
      setFinalChannels = _useState2[1];

  var _useState3 = useState(),
      _useState4 = _slicedToArray(_useState3, 2),
      totalQuantity = _useState4[0],
      setTotalQuantity = _useState4[1];

  var _useState5 = useState(),
      _useState6 = _slicedToArray(_useState5, 2),
      progresses = _useState6[0],
      setProgresses = _useState6[1];

  var _useState7 = useState(false),
      _useState8 = _slicedToArray(_useState7, 2),
      showMinAlert = _useState8[0],
      setShowMinAlert = _useState8[1];

  var _useState9 = useState(false),
      _useState10 = _slicedToArray(_useState9, 2),
      showMaxAlert = _useState10[0],
      setShowMaxAlert = _useState10[1];

  var getTotalChannelBudget = function getTotalChannelBudget(channelValue) {
    if (Array.isArray(channelValue)) {
      return channelValue.reduce(function (acc, item) {
        return acc + item.budget;
      }, 0);
    }

    return channelValue;
  };

  useEffect(function () {
    var values = [];
    Object.values(finalChannels).forEach(function (platform) {
      if (Array.isArray(platform)) platform.forEach(function (elem) {
        return values.push(elem.budget);
      });else values.push(platform);
    });

    if (values.includes(minLimit)) {
      setShowMinAlert(true);
    } else {
      setShowMinAlert(false);
    }

    if (values.includes(maxLimit)) {
      setShowMaxAlert(true);
    } else {
      setShowMaxAlert(false);
    }

    setTotalQuantity(values.reduce(function (acc, item) {
      return acc + getTotalChannelBudget(item);
    }, 0));
  }, [finalChannels]);
  useEffect(function () {
    if (totalQuantity) {
      setProgresses(Object.keys(finalChannels).map(function (channel) {
        return {
          color: channel,
          value: getTotalChannelBudget(finalChannels[channel])
        };
      }));
    }
  }, [totalQuantity]);

  var changeBudget = function changeBudget(channel, newValue) {
    var campaign = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
    if (newValue !== 0 && !newValue) return;
    var value = newValue;
    if (value < minLimit) value = minLimit;
    if (value > maxLimit) value = maxLimit;

    if (campaign) {
      var elementsIndex = finalChannels[channel].findIndex(function (element) {
        return element.name === campaign.name;
      });

      var campaigns = _toConsumableArray(finalChannels[channel]);

      campaigns[elementsIndex] = _objectSpread(_objectSpread({}, campaigns[elementsIndex]), {}, {
        budget: Number(value)
      });
      setFinalChannels(_objectSpread(_objectSpread({}, finalChannels), {}, _defineProperty({}, channel, campaigns)));
      onChange(channel, value, campaign);
    } else {
      setFinalChannels(_objectSpread(_objectSpread({}, finalChannels), {}, _defineProperty({}, channel, Number(value))));
      onChange(channel, value);
    }
  };

  return /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "center",
    direction: "column"
  }, (progresses === null || progresses === void 0 ? void 0 : progresses.length) > 0 && /*#__PURE__*/React.createElement(RoundedProgressBar, {
    size: 145,
    strokeWidth: 4,
    progressesArray: progresses,
    className: classes.progress
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.alignCenter
  }, /*#__PURE__*/React.createElement("div", {
    className: classnames(classes.sameLine, classes.alignBottom)
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "f1-42",
    weight: "bold",
    shade: 500
  }, totalQuantity), /*#__PURE__*/React.createElement(Typography, {
    variant: "f1-20",
    weight: "bold",
    shade: 500
  }, currency)), /*#__PURE__*/React.createElement(Typography, {
    variant: "f1-12",
    shade: 500
  }, budgetCopy))), Object.keys(minAlert).length > 0 && showMinAlert && /*#__PURE__*/React.createElement(AlertCard, {
    color: "warning",
    text: minAlert.copyAlert,
    linkText: minAlert.copyOnClick,
    action: minAlert.onClick,
    className: classes.bottomSpace
  }), Object.keys(maxAlert).length > 0 && showMaxAlert && /*#__PURE__*/React.createElement(AlertCard, {
    color: "warning",
    text: maxAlert.copyAlert,
    linkText: maxAlert.copyOnClick,
    action: maxAlert.onClick,
    className: classes.bottomSpace
  }), /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column"
  }, Object.keys(finalChannels).map(function (channel, index) {
    return Array.isArray(channels[channel]) ? /*#__PURE__*/React.createElement(MultipleSelector, {
      openSelector: openFirstSelector && index === 0,
      initialCampaigns: channels[channel],
      campaigns: finalChannels[channel],
      channel: channel,
      minLimit: minLimit,
      maxLimit: maxLimit,
      changeBudget: changeBudget,
      key: "".concat(channel, "-multi-selector")
    }) : /*#__PURE__*/React.createElement(SimpleSelector, {
      initialValue: channels[channel],
      value: finalChannels[channel],
      channel: channel,
      minLimit: minLimit,
      maxLimit: maxLimit,
      changeBudget: changeBudget,
      key: "".concat(channel, "-simple-selector")
    });
  }), !!textButton && /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "center",
    className: classes.button
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: function onClick() {
      return onClickButton(finalChannels);
    }
  }, textButton))));
};

BudgetManagement.propTypes = {
  budgetCopy: PropTypes.string,
  currency: PropTypes.string,
  channels: PropTypes.instanceOf(Object),
  textButton: PropTypes.string,
  onClickButton: PropTypes.func,
  onChange: PropTypes.func,
  minLimit: PropTypes.number,
  maxLimit: PropTypes.number,
  minAlert: PropTypes.instanceOf(Object),
  maxAlert: PropTypes.instanceOf(Object),
  openFirstSelector: PropTypes.bool
};
BudgetManagement.defaultProps = {
  budgetCopy: "",
  currency: "",
  channels: {},
  textButton: "",
  onClickButton: function onClickButton() {},
  onChange: function onChange() {},
  minLimit: 0,
  maxLimit: 200,
  minAlert: {},
  maxAlert: {},
  openFirstSelector: false
};
export default BudgetManagement;