import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _isEqual from "lodash/isEqual";
import React, { useState, useCallback } from "react";
import classnames from "classnames";
import styled from "styled-components";
import { css } from "emotion";
import { ChromePicker } from "react-color";
import { Menu } from "@webiny/ui/Menu";
import { ReactComponent as IconPalette } from "@svgr/webpack!../../assets/icons/round-color_lens-24px.svg";
var ColorPickerStyle = /*#__PURE__*/styled("div", {
  target: "eb6wz360",
  label: "ColorPickerStyle"
})({
  display: "flex",
  flexWrap: "wrap",
  justifyContent: "space-start"
});
var CompactColorPicker = /*#__PURE__*/styled("div", {
  target: "eb6wz361",
  label: "CompactColorPicker"
})({
  ".mdc-menu-surface": {
    overflow: "visible"
  }
});
var ColorList = /*#__PURE__*/styled("div", {
  target: "eb6wz362",
  label: "ColorList"
})({
  display: "flex",
  width: "100%"
});
var ColorBox = /*#__PURE__*/styled("div", {
  target: "eb6wz363",
  label: "ColorBox"
})({
  cursor: "pointer",
  width: 26,
  height: 26,
  margin: 2,
  padding: 2,
  borderRadius: 2,
  boxSizing: "border-box",
  transition: "transform 0.2s",
  color: "var(--mdc-theme-text-secondary-on-background)"
});
var Color = /*#__PURE__*/styled("div", {
  target: "eb6wz364",
  label: "Color"
})({
  cursor: "pointer",
  width: 20,
  height: 20,
  border: "1px solid var(--mdc-theme-on-background)",
  transition: "transform 0.2s, scale 0.2s",
  display: "flex",
  alignItems: "center",
  "&::after": {
    boxShadow: "0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)",
    transition: "opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
    content: '""',
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    zIndex: -1,
    opacity: 0
  },
  "&:hover": {
    transform: "scale(1.25)",
    "&::after": {
      opacity: 1
    }
  }
});
var transparent = /*#__PURE__*/css({
  backgroundSize: "10px 10px",
  backgroundImage: "linear-gradient( 45deg, #555 25%, transparent 25%, transparent)," + "linear-gradient(-45deg, #555 25%, transparent 25%, transparent)," + "linear-gradient( 45deg, transparent 75%, #555 75%)," + "linear-gradient(-45deg, transparent 75%, #555 75%)"
}, "label:transparent;");
var chromePickerStyles = /*#__PURE__*/css({
  width: "100%",
  ".chrome-picker": {
    boxShadow: "none !important",
    width: "100% !important"
  }
}, "label:chromePickerStyles;");
var iconPaletteStyle = /*#__PURE__*/css({
  height: 20,
  width: "100%",
  marginTop: 1,
  color: "var(--mdc-theme-secondary)"
}, "label:iconPaletteStyle;");
var styles = {
  selectedColor: /*#__PURE__*/css({
    boxShadow: "0px 0px 0px 2px var(--mdc-theme-secondary)"
  }, "label:selectedColor;"),
  swatch: /*#__PURE__*/css({
    padding: "5px",
    background: "#fff",
    borderRadius: "1px",
    border: "1px solid rgba(0,0,0,.1)",
    display: "inline-block",
    cursor: "pointer",
    height: 26,
    boxSizing: "border-box"
  }, "label:swatch;"),
  color: /*#__PURE__*/css({
    width: "40px",
    height: "100%",
    borderRadius: "2px"
  }, "label:color;")
};

var ColorPicker = function ColorPicker(_ref) {
  var value = _ref.value,
      onChange = _ref.onChange,
      onChangeComplete = _ref.onChangeComplete,
      _ref$compact = _ref.compact,
      compact = _ref$compact === void 0 ? false : _ref$compact,
      _ref$themeColors = _ref.themeColors,
      themeColors = _ref$themeColors === void 0 ? {} : _ref$themeColors,
      valueChange = _ref.valueChange,
      disabled = _ref.disabled;

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

  var getColorValue = useCallback(function (rgb) {
    return "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(rgb.a, ")");
  }, []);
  var onColorChange = useCallback(function (color) {
    if (onChange) onChange(getColorValue(color.rgb));
  }, [onChange]);
  var onColorChangeComplete = useCallback(function (_ref2) {
    var rgb = _ref2.rgb;
    if (onChangeComplete) onChangeComplete(getColorValue(rgb));
  }, [onChangeComplete]);
  var hidePicker = useCallback(function () {
    setShowPicker(false);
  }, [setShowPicker]);
  var togglePicker = useCallback(function (e) {
    e.stopPropagation();
    setShowPicker(!showPicker);
  }, [showPicker, setShowPicker]);
  var themeColor = false;

  var colors = _objectSpread(_objectSpread({
    primary: '#fa5723',
    secondary: '#00ccb0'
  }, themeColors), {}, {
    background: 'rgba(212, 212, 212, 0.5)',
    surface: '#fff',
    textPrimary: 'rgb(10, 10, 10)'
  });

  var colorPicker = /*#__PURE__*/React.createElement(ColorPickerStyle, {
    onClick: hidePicker,
    className: "w-full"
  }, Object.values(colors).map(function (color, index) {
    if (color === value || value === "transparent") {
      themeColor = true;
    }

    return /*#__PURE__*/React.createElement(ColorBox, {
      key: index
    }, /*#__PURE__*/React.createElement(Color, {
      className: color === value ? styles.selectedColor : null,
      style: {
        backgroundColor: color
      },
      onClick: function onClick() {
        hidePicker();
        onChangeComplete(color);
        if (valueChange) valueChange(color);
      }
    }));
  }), /*#__PURE__*/React.createElement(ColorBox, null, /*#__PURE__*/React.createElement(Color, {
    className: classnames(transparent, _defineProperty({}, styles.selectedColor, value === "transparent")),
    onClick: function onClick() {
      hidePicker();
      onChangeComplete("transparent");
    }
  })), /*#__PURE__*/React.createElement(ColorBox, null, /*#__PURE__*/React.createElement(Color, {
    className: value && !themeColor ? styles.selectedColor : null,
    style: {
      backgroundColor: themeColor ? "#fff" : value
    },
    onClick: togglePicker
  }, /*#__PURE__*/React.createElement(IconPalette, {
    className: iconPaletteStyle
  }))), showPicker && /*#__PURE__*/React.createElement("span", {
    onClick: function onClick(e) {
      return e.stopPropagation();
    },
    className: chromePickerStyles
  }, /*#__PURE__*/React.createElement(ChromePicker, {
    color: value || "#fff",
    onChange: onColorChange,
    onChangeComplete: onColorChangeComplete
  })));

  if (compact) {
    return /*#__PURE__*/React.createElement(CompactColorPicker, null, disabled ? /*#__PURE__*/React.createElement("div", {
      className: styles.swatch
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.color,
      style: {
        backgroundColor: value
      }
    })) : /*#__PURE__*/React.createElement(Menu, {
      handle: /*#__PURE__*/React.createElement("div", {
        className: styles.swatch
      }, /*#__PURE__*/React.createElement("div", {
        className: styles.color,
        style: {
          backgroundColor: value
        }
      })),
      className: "w-full"
    }, /*#__PURE__*/React.createElement(ColorList, null, /*#__PURE__*/React.cloneElement(colorPicker, {
      style: {
        width: 240
      }
    }))));
  }

  return colorPicker;
};

export default /*#__PURE__*/React.memo(ColorPicker, _isEqual);
//# sourceMappingURL=index.js.map