import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useEffect, useState } from "react";
import classnames from "classnames";
import BrandIcon from "../BrandIcon";
import Grid from "../Grid";
import Slider from "../Slider";
import TextField from "../next/TextField";
import Typography from "../Typography";
import CssFlex from "../CssFlex";
import useTheme from "../styles/useTheme";
import getClasses from "./styles";
export var getNameIcon = function getNameIcon(name) {
  var auxName = name.toLowerCase();
  var result = "";

  if (auxName.includes("googleads")) {
    result = "GoogleAdsCircle";
  } else if (auxName.includes("analytics")) {
    result = "GoogleAnalyticsCircle";
  } else if (auxName.includes("merchant")) {
    result = "GoogleMerchantCircle";
  } else if (auxName.includes("facebook")) {
    result = "FacebookCircle";
  } else if (auxName.includes("twitter")) {
    result = "TwitterCircle";
  } else if (auxName.includes("microsoft")) {
    result = "MicrosoftCircle";
  } else if (auxName.includes("linkedin")) {
    result = "LinkedinCircle";
  } else if (auxName.includes("instagram")) {
    result = "InstagramCircle";
  }

  return result;
};

function SimpleSelector(props) {
  var classes = getClasses();

  var _useTheme = useTheme(),
      colors = _useTheme.cleverUI.colors;

  var initialValue = props.initialValue,
      value = props.value,
      channel = props.channel;
  var minLimit = props.minLimit,
      maxLimit = props.maxLimit,
      changeBudget = props.changeBudget,
      campaign = props.campaign;

  var _useState = useState(value),
      _useState2 = _slicedToArray(_useState, 2),
      textValue = _useState2[0],
      setTextValue = _useState2[1];

  var onChange = function onChange(channelAux, evValue, camp) {
    changeBudget(channelAux, evValue, camp);
  };

  var handleSliderChange = function handleSliderChange(event, newValue) {
    onChange(channel, newValue, campaign);
  };

  var handleInputChange = function handleInputChange(event) {
    setTextValue(event.target.value);
  };

  var handleChangeValue = function handleChangeValue(newValue) {
    if (newValue === "" || newValue < minLimit) {
      onChange(channel, minLimit, campaign);
    } else if (newValue > maxLimit) {
      onChange(channel, maxLimit, campaign);
    } else {
      onChange(channel, newValue, campaign);
    }

    setTextValue(value);
  };

  var handleOnKeyDown = function handleOnKeyDown(event) {
    if (event.key === "Enter") {
      handleChangeValue(event.target.value);
    }
  };

  var handleBlur = function handleBlur() {
    handleChangeValue(textValue);
  };

  useEffect(function () {
    setTextValue(value);
  }, [value]);
  return /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    className: classes.channelSlider
  }, !campaign && /*#__PURE__*/React.createElement("div", {
    className: classes.brandIcon
  }, /*#__PURE__*/React.createElement(BrandIcon, {
    icon: getNameIcon(channel),
    size: 32
  })), /*#__PURE__*/React.createElement("div", {
    className: classes.sliderWrapper
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.sliderInitialValue,
    style: {
      left: "".concat((initialValue - minLimit) * 100 / (maxLimit - minLimit), "%")
    }
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "f1-10",
    color: channel
  }, initialValue), /*#__PURE__*/React.createElement("span", {
    style: {
      background: colors[channel][500],
      width: 8,
      height: 8,
      borderRadius: "50%",
      opacity: "50%"
    }
  })), /*#__PURE__*/React.createElement(Slider, {
    value: typeof value === "number" ? value : 0,
    onChange: handleSliderChange,
    onChangeCommitted: function onChangeCommitted(event, newValue) {
      return onChange(channel, newValue, campaign);
    },
    color: channel,
    valueLabelDisplay: "on",
    min: minLimit,
    max: maxLimit,
    step: 5,
    valueLabelClass: classnames(classes.valueLabel, classes[channel]),
    thumbClass: classes.thumb
  })), /*#__PURE__*/React.createElement(CssFlex, null, /*#__PURE__*/React.createElement(TextField, {
    type: "number",
    value: textValue,
    onChange: handleInputChange,
    onBlur: handleBlur,
    onKeyDown: handleOnKeyDown,
    step: 5,
    onClick: function onClick(event) {
      return handleChangeValue(event.target.value);
    },
    min: minLimit,
    max: maxLimit,
    className: classes.textField
  })));
}

export default SimpleSelector;