import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import IconButton from "../IconButton";
import ThumbUp from "../Icon/ThumbUp";
import ThumbDown from "../Icon/ThumbDown";
import useTheme from "../styles/useTheme";
import makeStyles from "../styles/makeStyles";
var getClasses = makeStyles({
  "@keyframes appear": {
    "0%": {
      transform: "scale(0) rotate(0)"
    },
    "100%": {
      transform: "scale(1) rotate(360deg)"
    }
  },
  animatedDiv: {
    animation: "$appear 400ms cubic-bezier(0.4, 1.39, 0.93, 1.01)"
  },
  thumbWrapper: function thumbWrapper(_ref) {
    var cSize = _ref.cSize;
    return {
      height: cSize,
      width: cSize,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      position: "relative",
      zIndex: 1
    };
  },
  iconButton: {
    zIndex: 1
  },
  background: {
    position: "absolute",
    transform: "scale(1.1)",
    zIndex: 0
  }
});

var FeedbackBlock = function FeedbackBlock(_ref2) {
  var variant = _ref2.variant,
      handleThumbClick = _ref2.handleThumbClick,
      isSelected = _ref2.isSelected,
      thumbUp = _ref2.thumbUp,
      size = _ref2.size,
      className = _ref2.className;
  var cSize = size * 1.5;

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

  var classes = getClasses({
    cSize: cSize
  });
  var Icon = thumbUp ? ThumbUp : ThumbDown;
  var opinion = isSelected !== undefined;
  var color = opinion && isSelected === "up" ? "yellow" : "primary";
  return /*#__PURE__*/React.createElement("div", {
    className: cx(classes.thumbWrapper, _defineProperty({}, classes.animatedDiv, opinion), className)
  }, /*#__PURE__*/React.createElement(IconButton, _extends({
    icon: /*#__PURE__*/React.createElement(Icon, null),
    onClick: function onClick() {
      return handleThumbClick(thumbUp ? "up" : "down");
    },
    iconSize: size,
    active: opinion,
    className: classes.iconButton
  }, opinion && {
    color: color
  })), opinion && variant !== "icon" && /*#__PURE__*/React.createElement("svg", {
    viewBox: "0 0 96 96",
    height: cSize,
    width: cSize,
    version: "1.1",
    className: classes.background
  }, /*#__PURE__*/React.createElement("g", {
    fill: colors[color][50],
    strokeWidth: "1.2",
    fillRule: "evenodd"
  }, /*#__PURE__*/React.createElement("circle", {
    cx: "48",
    cy: "48",
    r: "32"
  }), variant === "default" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", {
    cx: "80.4",
    cy: "62.4",
    r: "4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "68.4",
    cy: "86.4",
    r: "4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "8.4",
    cy: "74.4",
    r: "4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "4",
    cy: "14.4",
    r: "4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "14.4",
    cy: "38.4",
    r: "4"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "25.2",
    cy: "16.8",
    r: "6"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "33.6",
    cy: "88.8",
    r: "6"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "73.2",
    cy: "6",
    r: "6"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "74.4",
    cy: "16.8",
    r: "2"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "49.2",
    cy: "7.2",
    r: "2"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "2",
    cy: "55.2",
    r: "2"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "31.2",
    cy: "76.8",
    r: "2"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "79.2",
    cy: "78",
    r: "2"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "94",
    cy: "48",
    r: "2"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: "87.6",
    cy: "32.4",
    r: "4"
  })))));
};

FeedbackBlock.propTypes = {
  isSelected: PropTypes.oneOf(["up", "down"]),
  handleThumbClick: PropTypes.func,
  thumbUp: PropTypes.bool,
  size: PropTypes.number,
  variant: PropTypes.oneOf(["default", "compact", "icon"])
};
FeedbackBlock.defaultProps = {
  isSelected: undefined,
  handleThumbClick: function handleThumbClick() {},
  thumbUp: false,
  size: 42,
  variant: "default"
};
export default FeedbackBlock;