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

var _templateObject;

import React, { useRef, useState } from "react";
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css";
import CssFlex from "../../../../../ui/CssFlex";
import Dialog from "../../../../../ui/lab/Dialog";
import Typography from "../../../../../ui/Typography";
import styled from "../../../../../ui/styles/styled";
import getClasses from "./styles";
import Button from "../../../../../ui/next/Button";

var CroppDialog = function CroppDialog(props) {
  var minHeight = props.minHeight,
      minWidth = props.minWidth,
      aspect = props.aspect,
      crop = props.crop,
      refFile = props.refFile,
      base64Img = props.base64Img,
      translations = props.translations;
  var openFile = props.openFile,
      onClose = props.onClose,
      openInvalidFileFormat = props.openInvalidFileFormat,
      setOpenInvalidFileFormat = props.setOpenInvalidFileFormat,
      openUploadError = props.openUploadError,
      setOpenUploadError = props.setOpenUploadError;
  var modal = props.modal,
      isLoading = props.isLoading,
      updateLogo = props.updateLogo;

  var _useState = useState(aspect),
      _useState2 = _slicedToArray(_useState, 2),
      aspectRatio = _useState2[0],
      setAspectRatio = _useState2[1];

  var classes = getClasses();
  var buttonRef = useRef();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog, {
    open: openFile,
    onClose: onClose,
    initialFocusRef: buttonRef
  }, /*#__PURE__*/React.createElement(Dialog.Title, {
    sx: {
      justifyContent: "center"
    }
  }, translations.cropDialog.title), /*#__PURE__*/React.createElement(Dialog.Body, {
    mb: "lg"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md",
    alignItems: "center",
    width: "100%"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    align: "center",
    code: "components.image_upload.cropper.how_to"
  }), !modal && /*#__PURE__*/React.createElement(CssFlex, {
    gap: "md"
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    onClick: function onClick() {
      return setAspectRatio(1);
    }
  }, translations.cropDialog.square), /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    onClick: function onClick() {
      return setAspectRatio(1.91);
    }
  }, translations.cropDialog.landscape), /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    onClick: function onClick() {
      return setAspectRatio(4);
    }
  }, translations.cropDialog.landscapeLogo)), /*#__PURE__*/React.createElement(Cropper, {
    ref: refFile,
    src: base64Img,
    className: classes.cropper,
    aspectRatio: aspectRatio,
    viewMode: 2,
    ready: crop,
    cropend: crop,
    minCropBoxWidth: minWidth,
    minCropBoxHeight: minHeight
  }))), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    ref: buttonRef,
    variant: "primary",
    onClick: function onClick() {
      return updateLogo();
    },
    isLoading: isLoading
  }, translations.cropDialog.button))), /*#__PURE__*/React.createElement(Dialog, {
    open: openInvalidFileFormat,
    onClose: function onClose() {
      return setOpenInvalidFileFormat(false);
    }
  }, /*#__PURE__*/React.createElement(Dialog.Title, {
    sx: {
      justifyContent: "center"
    }
  }, translations.cropDialog.badFormat), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    variant: "primary",
    onClick: function onClick() {
      return setOpenInvalidFileFormat(false);
    }
  }, translations.cropDialog.closeButton))), /*#__PURE__*/React.createElement(Dialog, {
    open: openUploadError,
    onClose: function onClose() {
      return setOpenUploadError(false);
    }
  }, /*#__PURE__*/React.createElement(Dialog.Title, {
    sx: {
      justifyContent: "center"
    }
  }, translations.cropDialog.errorUploading), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    variant: "primary",
    onClick: function onClick() {
      return setOpenUploadError(false);
    }
  }, translations.cropDialog.closeButton))));
};

var Footer = styled(Dialog.Footer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  justify-content: flex-end;\n"])));
export default CroppDialog;