import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from "react";
import IconButton from "@material-ui/core/IconButton";
import BrushIcon from "@material-ui/icons/Brush";
import { styled } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";
import Button from "@material-ui/core/Button";
import HeaderPopupBox from "../HeaderPopupBox";
import useEventCallback from "use-event-callback";
import memoize from "lodash/memoize";
import getBrushColorPalette from "../../utils/get-brush-color-palette.js";
import { useTranslation } from "react-i18next";
var Container = styled("div")({
  position: "relative"
});
var BrushCircle = styled("div")(function (_ref) {
  var color = _ref.color;
  return {
    display: "inline",
    marginRight: 8,
    backgroundColor: color[700],
    width: 24,
    height: 24,
    borderRadius: 20
  };
});
var OtherColorContainers = styled("div")({
  paddingTop: 10,
  padding: 4,
  display: "flex",
  flexWrap: "wrap"
});
var StyledIconButton = styled(IconButton)(function (_ref2) {
  var iconcolor = _ref2.iconcolor,
      selected = _ref2.selected;
  return {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: iconcolor[700],
    border: selected ? "4px solid ".concat(iconcolor["A200"]) : "4px solid #fff",
    boxSizing: "content-box",
    margin: 4,
    transition: "transform 200ms linear",
    "&:hover": {
      backgroundColor: iconcolor[800],
      transform: "scale(1.2,1.2)"
    },
    "&:active": {
      transition: "transform 100ms linear",
      transform: "scale(1.4,1.4)"
    }
  };
});
var StyledButton = styled(Button)(function (_ref3) {
  var selected = _ref3.selected,
      iconcolor = _ref3.iconcolor;
  return {
    justifyContent: "flex-start",
    marginTop: 4,
    marginBottom: 4,
    paddingTop: 8,
    paddingBottom: 8,
    backgroundColor: selected ? iconcolor[50] : "#fff",
    border: selected ? "2px solid ".concat(iconcolor[200]) : "2px solid #fff",
    "&:hover": {
      backgroundColor: selected ? iconcolor[100] : "none"
    }
  };
});
export default (function (_ref4) {
  var selectedBrush = _ref4.selectedBrush,
      onChangeSelectedBrush = _ref4.onChangeSelectedBrush;

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

  var handleClick = useEventCallback(function (color) {
    return memoize(function () {
      return onChangeSelectedBrush(color);
    });
  }); // internalization hook

  var _useTranslation = useTranslation(),
      t = _useTranslation.t;

  return /*#__PURE__*/React.createElement(Container, {
    onMouseEnter: function onMouseEnter() {
      return changeOpen(true);
    },
    onMouseLeave: function onMouseLeave() {
      return changeOpen(false);
    }
  }, /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(BrushIcon, {
    style: {
      color: getBrushColorPalette(selectedBrush)[800]
    }
  })), /*#__PURE__*/React.createElement(HeaderPopupBox, {
    open: open
  }, /*#__PURE__*/React.createElement("h1", null, t("sample-brushes")), /*#__PURE__*/React.createElement(StyledButton, {
    selected: selectedBrush === "complete" || selectedBrush === "blue",
    iconcolor: colors.blue,
    fullWidth: true,
    onClick: handleClick("complete")
  }, /*#__PURE__*/React.createElement(BrushCircle, {
    color: colors.blue
  }), t("complete")), /*#__PURE__*/React.createElement(StyledButton, {
    selected: selectedBrush === "review" || selectedBrush === "deepOrange",
    iconcolor: colors.deepOrange,
    fullWidth: true,
    onClick: handleClick("review")
  }, /*#__PURE__*/React.createElement(BrushCircle, {
    color: colors.deepOrange
  }), t("review")), /*#__PURE__*/React.createElement(OtherColorContainers, null, /*#__PURE__*/React.createElement(StyledIconButton, {
    onClick: handleClick("green"),
    selected: selectedBrush === "green",
    iconcolor: colors.green
  }), /*#__PURE__*/React.createElement(StyledIconButton, {
    onClick: handleClick("purple"),
    selected: selectedBrush === "purple",
    iconcolor: colors.purple
  }), /*#__PURE__*/React.createElement(StyledIconButton, {
    onClick: handleClick("pink"),
    selected: selectedBrush === "pink",
    iconcolor: colors.pink
  }), /*#__PURE__*/React.createElement(StyledIconButton, {
    onClick: handleClick("cyan"),
    selected: selectedBrush === "cyan",
    iconcolor: colors.cyan
  }), /*#__PURE__*/React.createElement(StyledIconButton, {
    onClick: handleClick("orange"),
    selected: selectedBrush === "orange",
    iconcolor: colors.orange
  }), /*#__PURE__*/React.createElement(StyledIconButton, {
    onClick: handleClick("indigo"),
    selected: selectedBrush === "indigo",
    iconcolor: colors.indigo
  }))));
});