/* eslint-disable import/no-cycle */
import React, { useEffect } from "react";
import cx from "classnames";
import Drawer from "../../../Drawer";
import makeStyles from "../../../styles/makeStyles";
import useMediaQuery from "../../../styles/useMediaQuery";
import TimesRound from "../../../Icon/TimesRound";
import { useLayout } from "../index";
import { mediaBreakpointDownMd } from "../../../styles/breakpoints";
var getClasses = makeStyles(function () {
  return {
    root: {
      backgroundColor: "#ffffff",
      overflow: "auto",
      WebkitOverflowScrolling: "touch",
      position: "relative",
      flex: "0 0 var(--layout-bar-width)",
      isolation: "isolate"
    },
    drawer: {
      minHeight: "64px"
    },
    closeButton: {
      border: 0,
      outline: 0,
      padding: 0,
      zIndex: 1,
      cursor: "pointer",
      display: "inline-flex",
      justifyContent: "center",
      alignItems: "center",
      position: "absolute",
      right: "15px",
      top: "15px",
      width: "32px",
      height: "32px",
      backgroundColor: "transparent",
      backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%)"
    }
  };
});

var Sidebar = function Sidebar(_ref) {
  var open = _ref.open,
      children = _ref.children,
      closable = _ref.closable,
      onClose = _ref.onClose,
      className = _ref.className;
  var classes = getClasses();
  var isMobile = useMediaQuery("(max-width: ".concat(mediaBreakpointDownMd, ")"));

  var _useLayout = useLayout(),
      openSidebar = _useLayout.openSidebar,
      closeSidebar = _useLayout.closeSidebar,
      setSidebarContent = _useLayout.setSidebarContent;

  useEffect(function () {
    if (open) {
      openSidebar();
    } else {
      closeSidebar();
    }
  }, [closeSidebar, open, openSidebar]);
  useEffect(function () {
    var handleResize = function handleResize() {
      if (open && isMobile) {
        onClose();
      }
    };

    window.addEventListener("resize", handleResize);
    return function () {
      window.removeEventListener("resize", handleResize);
    };
  }, [open, isMobile, onClose]);
  useEffect(function () {
    var content = isMobile ? /*#__PURE__*/React.createElement(Drawer, {
      onClose: onClose,
      anchor: "bottom",
      open: open,
      className: className
    }, closable && /*#__PURE__*/React.createElement("button", {
      type: "button",
      onClick: onClose,
      className: classes.closeButton
    }, /*#__PURE__*/React.createElement(TimesRound, {
      size: 32,
      color: "black"
    })), /*#__PURE__*/React.createElement("div", {
      className: classes.drawer
    }, children)) : /*#__PURE__*/React.createElement("aside", {
      className: cx(classes.root, className)
    }, closable && /*#__PURE__*/React.createElement("button", {
      type: "button",
      onClick: onClose,
      className: classes.closeButton
    }, /*#__PURE__*/React.createElement(TimesRound, {
      size: 32,
      color: "black"
    })), children);
    setSidebarContent(content);
  }, [children, className, classes.closeButton, classes.root, closable, onClose, setSidebarContent, open, isMobile]);
  return null;
};

export default Sidebar;