import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from "react";
import CssFlex from "../../../../../ui/CssFlex";
import Typography from "../../../../../ui/Typography";
import FeedbackThumb from "../../../../../ui/FeedbackThumb";
import styled from "../../../../../ui/styles/styled";

var ImageSectionBody = function ImageSectionBody(_ref) {
  var translations = _ref.translations,
      handleThumbClick = _ref.handleThumbClick,
      showLabel = _ref.showLabel;

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      feedback = _useState2[0],
      setFeedback = _useState2[1];

  var handleFeedback = function handleFeedback(value) {
    setFeedback(value);
    handleThumbClick(value);
  };

  return /*#__PURE__*/React.createElement(FeedbackBlock, {
    gap: "sm",
    alignItems: "center",
    justifyContent: "flex-end",
    "data-hidden": typeof feedback === "number"
  }, showLabel && /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    color: "blue",
    shade: 900
  }, translations.feedback), /*#__PURE__*/React.createElement(FeedbackThumbDown, {
    handleThumbClick: function handleThumbClick() {
      return handleFeedback(0);
    },
    isSelected: feedback === 0 ? "down" : undefined,
    size: 24,
    variant: "icon"
  }), /*#__PURE__*/React.createElement(FeedbackThumbUp, {
    handleThumbClick: function handleThumbClick() {
      return handleFeedback(10);
    },
    isSelected: feedback === 10 ? "up" : undefined,
    thumbUp: true,
    size: 24,
    variant: "icon"
  }));
};

var FeedbackBlock = styled(CssFlex)(function (_ref2) {
  var theme = _ref2.theme;
  return {
    position: "absolute",
    bottom: theme.spaces.sm,
    left: "-".concat(theme.spaces.sm),
    padding: "".concat(theme.spaces.xs, " ").concat(theme.spaces.sm),
    borderRadius: theme.spaces.sm,
    backgroundColor: "rgba(255, 255, 255, 0.60)",
    backdropFilter: "blur(6px)",
    width: "75%",
    transition: "transform ".concat(theme.transitions.duration["short"], " ").concat(theme.transitions.easings.ease_in_out, " 500ms"),
    "&[data-hidden=true]": {
      transform: "translateX(-100%)"
    }
  };
});
var FeedbackThumbDown = styled(FeedbackThumb)(function (_ref3) {
  var theme = _ref3.theme;
  return {
    backgroundColor: theme.colors.warning[50],
    borderRadius: "50%",
    "& svg > path": {
      fill: "".concat(theme.colors.warning[500], " !important")
    },
    "& > button:hover svg > path, & > button:focus svg > path": {
      fill: "".concat(theme.colors.warning[700], " !important")
    }
  };
});
var FeedbackThumbUp = styled(FeedbackThumb)(function (_ref4) {
  var theme = _ref4.theme;
  return {
    backgroundColor: theme.colors.green[50],
    borderRadius: "50%",
    "& svg > path": {
      fill: "".concat(theme.colors.green[500], " !important")
    },
    "& > button:hover svg > path, & > button:focus svg > path": {
      fill: "".concat(theme.colors.green[700], " !important")
    }
  };
});
export default ImageSectionBody;