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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from "react";
import { m } from "framer-motion";
import { Slot } from "nano-slots";
import styled from "../../styles/styled";
import IconButton from "../../next/IconButton";
import Times from "../../Icon/Times";
import MaximizeAlt from "../../Icon/MaximizeAlt";
import Compress from "../../Icon/Compress";
import CssFlex from "../../CssFlex";

function Topbar(_ref) {
  var _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      onClose = _ref.onClose,
      onChangeSize = _ref.onChangeSize,
      maximized = _ref.maximized;
  var onCloseNotDefined = typeof onClose !== "function";
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TopbarWrapper, {
    "data-disabled": disabled,
    layout: "size"
  }, /*#__PURE__*/React.createElement(TopbarInnerWrapper, {
    "data-disabled": disabled,
    layout: "size"
  }, /*#__PURE__*/React.createElement(TopbarCloseButton, {
    layout: "position",
    icon: /*#__PURE__*/React.createElement(Times, null),
    onClick: onClose,
    disabled: disabled || onCloseNotDefined,
    "aria-label": "Close"
  }), /*#__PURE__*/React.createElement(CssFlex, {
    component: m.div,
    gap: "md",
    layout: "position"
  }, /*#__PURE__*/React.createElement(Slot, {
    name: "dialog-additional-action"
  }), /*#__PURE__*/React.createElement(TopbarSizeButton, {
    icon: maximized ? /*#__PURE__*/React.createElement(Compress, null) : /*#__PURE__*/React.createElement(MaximizeAlt, null),
    onClick: onChangeSize,
    disabled: disabled,
    "aria-label": maximized ? "Minimize" : "Maximize"
  }))), /*#__PURE__*/React.createElement(Slot, {
    name: "dialog-extend-topbar"
  })));
}

var TopbarWrapper = styled(m.div)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: var(--cle-dialog-border-radius) var(--cle-dialog-border-radius)\n    0 0;\n\n  background-color: ", ";\n  box-shadow: ", ";\n\n  &[data-disabled=\"true\"] {\n    background-color: white;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.neutral[100];
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.shadows.normal;
});
var TopbarInnerWrapper = styled(m.div)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: var(--cle-dialog-border-radius) var(--cle-dialog-border-radius)\n    0 0;\n  padding: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.spaces.md;
});
var TopbarCloseButton = styled(m(IconButton))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  place-items: center;\n  &:is(:hover, :focus) svg {\n    color: ", ";\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.colors.danger[700];
});
var TopbarSizeButton = styled(m(IconButton))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  place-items: center;\n\n  &:is(:hover, :focus) svg {\n    color: ", ";\n  }\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.colors.info[500];
});
export default Topbar;