import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

var _templateObject;

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState } from "react";
import "cropperjs/dist/cropper.css";
import Link from "../../../../../ui/Link";
import CssFlex from "../../../../../ui/CssFlex";
import Snackbar from "../../../../../ui/Snackbar";
import Typography from "../../../../../ui/Typography";
import Tooltip from "../../../../../ui/lab/Tooltip";
import Plus from "../../../../../ui/Icon/Plus";
import InfoCircle from "../../../../../ui/Icon/InfoCircle";
import Circle from "../../../../../ui/Icon/Circle";
import styled from "../../../../../ui/styles/styled";
import getClasses from "../styles";

var ImageSectionHeader = function ImageSectionHeader(props) {
  var translations = props.translations,
      logo = props.logo,
      maxAssets = props.maxAssets,
      video = props.video,
      openAssetsModal = props.openAssetsModal,
      warning = props.warning;
  var classes = getClasses();

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

  var handleOpenModal = function handleOpenModal() {
    if (maxAssets <= 0) {
      setOpenSnackbar(true);
    } else {
      openAssetsModal();
    }
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssFlex, {
    justifyContent: "space-between",
    alignItems: "center",
    wrap: "wrap",
    className: classes.relative
  }, /*#__PURE__*/React.createElement(Snackbar, {
    anchorOrigin: {
      vertical: "top",
      horizontal: "center"
    },
    color: "danger",
    showActionButton: true,
    open: openSnackbar,
    autoHideDuration: 3000,
    onClose: function onClose() {
      return setOpenSnackbar(false);
    },
    text: translations.error,
    className: classes.snackbar
  }), /*#__PURE__*/React.createElement(CssFlex, {
    gap: "sm",
    alignItems: "center",
    position: "relative"
  }, warning && /*#__PURE__*/React.createElement(Dot, {
    size: 8,
    color: "warning"
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    shade: 800
  }, translations.title), !video && /*#__PURE__*/React.createElement(Tooltip, {
    title: translations.popoverContent,
    delayDuration: 0
  }, /*#__PURE__*/React.createElement(InfoCircle, {
    size: 24,
    color: "neutral",
    shade: 400
  }))), !logo && /*#__PURE__*/React.createElement(Link, {
    onClick: handleOpenModal,
    className: classes.addAssetButton
  }, /*#__PURE__*/React.createElement(Plus, {
    size: 24,
    color: "blue"
  }), translations.addImages)));
};

var Dot = styled(Circle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 24px;\n  top: 0;\n"])));
export default ImageSectionHeader;