"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.canvasStyle = void 0;

var _ThemeProvider = require("../ThemeProvider");

var canvasStyle = function canvasStyle(_ref, _ref2) {
  var isMobile = _ref.isMobile;
  var sizes = _ref2.sizes,
      colors = _ref2.colors;

  var getPanelStyle = function getPanelStyle(_ref3) {
    var _ref3$width = _ref3.width,
        width = _ref3$width === void 0 ? sizes.canvas.width : _ref3$width,
        _ref3$minifiedWidth = _ref3.minifiedWidth,
        minifiedWidth = _ref3$minifiedWidth === void 0 ? sizes.canvas.minifiedWidth : _ref3$minifiedWidth,
        position = _ref3.position,
        isOverlay = _ref3.isOverlay,
        _ref3$bg = _ref3.bg,
        bg = _ref3$bg === void 0 ? 'canvasBg' : _ref3$bg,
        name = _ref3.name,
        zIndex = _ref3.zIndex;
    return {
      variants: {
        visible: {
          width: isMobile ? '100vw' : width,
          display: 'block',
          zIndex: 2
        },
        minified: {
          width: minifiedWidth,
          display: 'block',
          zIndex: 2
        },
        hidden: {
          width: 0,
          zIndex: 0,
          transitionEnd: {
            display: 'none'
          }
        }
      },
      position: isOverlay && 'fixed',
      top: 0,
      left: position === 'left' && 0,
      right: position === 'right' && 0,
      flexGrow: name === 'main' && '1',
      bg: bg,
      maxWidth: name !== 'main' && "min(".concat(width, ", 90vw)"),
      overflowX: name !== 'main' && 'hidden'
    };
  };

  return {
    style: {
      minHeight: '100%',
      flexDirection: 'row',
      // set global typography here in canvas container. setting in <Page> will not apply to all canvas panels, just 'main'.
      color: 'bodyText',
      fontSize: 'body',
      fontFamily: 'body',
      lineHeight: 'base',
      letterSpacing: 'normal',
      fontWeight: 'normal'
    },
    panel: {
      height: '100%',
      maxHeight: '100vh',
      flexDirection: 'column',
      // _scrollbar: {
      //     backgroundColor: colors.scrollbar,
      // },
      // _track: {
      //     backgroundColor: colors.scrollTrack,
      // },
      // _thumb: {
      //     backgroundColor: colors.scrollThumb,
      // },
      transition: {
        type: 'spring',
        damping: 50,
        stiffness: 200
      } // transition: { type: 'spring', damping: 50, stiffness: 1 },

    },
    getPanelStyle: getPanelStyle
  };
};

exports.canvasStyle = canvasStyle;

var useCanvasStyle = function useCanvasStyle(props) {
  var theme = (0, _ThemeProvider.useTheme)();
  var styles = theme['styles'].canvas ? theme['styles'].canvas(props, theme) : canvasStyle(props, theme);
  return styles;
};

var _default = useCanvasStyle;
exports["default"] = _default;
//# sourceMappingURL=styles.js.map