import _defineProperty from "@babel/runtime/helpers/defineProperty";
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

import { Component, createRef } from 'react';
import Measure from 'react-measure';
import classNames from 'classnames';
import { CSSTransition } from 'react-transition-group';
import { CLS_PREFIX } from '../../constants';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const subscribeMatchMedia = (query, handler) => {
  const mq = window.matchMedia(query);
  handler(mq);
  mq.addListener(handler);
  return () => {
    mq.removeListener(handler);
  };
};
const subscribeClickOutside = (refs, handler) => {
  const listener = event => {
    if (refs.some(_ref => {
      let {
        current
      } = _ref;
      return current && current.contains(event.target);
    })) {
      return;
    }
    handler(event);
  };
  document.addEventListener('mousedown', listener);
  document.addEventListener('touchstart', listener);
  return () => {
    document.removeEventListener('mousedown', listener);
    document.removeEventListener('touchstart', listener);
  };
};
/**
 * @since 1.4.0
 */
export default class Layout extends Component {
  constructor() {
    super(...arguments);
    _defineProperty(this, "state", {
      isSidebarClosedDesktop: false,
      isSidebarClosedResponsive: true,
      headerHeight: null,
      isResponsive: window.matchMedia('(max-width: 1022px)').matches
    });
    _defineProperty(this, "headerRef", /*#__PURE__*/createRef());
    _defineProperty(this, "sidebarRef", /*#__PURE__*/createRef());
    _defineProperty(this, "responsiveSidebarTogglerRef", /*#__PURE__*/createRef());
    _defineProperty(this, "unsubscribeMatchMedia", void 0);
    _defineProperty(this, "unsubscribeClickOutside", void 0);
    _defineProperty(this, "handleMatchMedia", _ref2 => {
      let {
        matches
      } = _ref2;
      this.setState({
        isResponsive: matches
      });
    });
    _defineProperty(this, "handleClickOutside", () => {
      const {
        isResponsive
      } = this.state;
      if (isResponsive) {
        this.setState({
          isSidebarClosedResponsive: true
        });
      }
    });
    _defineProperty(this, "handleToggle", () => {
      this.setState(prevState => {
        const key = prevState.isResponsive ? 'isSidebarClosedResponsive' : 'isSidebarClosedDesktop';
        return {
          [key]: !prevState[key]
        };
      }, () => {
        if (this.props.onSidebarToggle) {
          this.props.onSidebarToggle(this.getSidebarClosed(), this.state.isResponsive ? 'responsive' : 'desktop');
        }
      });
    });
    _defineProperty(this, "handleResize", _ref3 => {
      let {
        bounds
      } = _ref3;
      this.setState({
        headerHeight: bounds?.height
      });
    });
    _defineProperty(this, "getSidebarClosed", () => {
      const {
        isResponsive,
        isSidebarClosedResponsive,
        isSidebarClosedDesktop
      } = this.state;
      return isResponsive ? isSidebarClosedResponsive : isSidebarClosedDesktop;
    });
  }
  static getDerivedStateFromProps(props, state) {
    const {
      sidebarCollapsed
    } = props;
    const {
      prevSidebarCollapsed
    } = state;
    const nextState = {};
    if (sidebarCollapsed !== prevSidebarCollapsed) {
      if (Array.isArray(sidebarCollapsed)) {
        nextState.isSidebarClosedDesktop = sidebarCollapsed.includes('desktop');
        nextState.isSidebarClosedResponsive = sidebarCollapsed.includes('responsive');
      } else {
        nextState.isSidebarClosedDesktop = Boolean(sidebarCollapsed);
      }
    }
    nextState.prevSidebarCollapsed = sidebarCollapsed;
    return nextState;
  }
  componentDidMount() {
    this.unsubscribeMatchMedia = subscribeMatchMedia('(max-width: 1022px)', this.handleMatchMedia);
    this.unsubscribeClickOutside = subscribeClickOutside([this.sidebarRef, this.responsiveSidebarTogglerRef], this.handleClickOutside);
  }
  componentWillUnmount() {
    this.unsubscribeMatchMedia?.();
    this.unsubscribeClickOutside?.();
  }
  renderHeader(_ref4) {
    let {
      header
    } = _ref4;
    const {
      baseClassName,
      headerAddon,
      sidebar
    } = this.props;
    const {
      headerHeight
    } = this.state;
    if (!header) {
      return null;
    }
    const isSidebarClosed = this.getSidebarClosed();
    return /*#__PURE__*/_jsx(CSSTransition, {
      in: !isSidebarClosed,
      timeout: 300,
      classNames: {
        enter: `${baseClassName}__header--enter`,
        enterActive: `${baseClassName}__header--active-enter`,
        enterDone: `${baseClassName}__header--on`,
        exit: `${baseClassName}__header--exit`,
        exitActive: `${baseClassName}__header--active-exit`,
        exitDone: `${baseClassName}__header--off`
      },
      nodeRef: this.headerRef,
      children: /*#__PURE__*/_jsx("header", {
        className: `${baseClassName}__header`,
        ref: this.headerRef,
        style: {
          height: `${headerHeight}px`
        },
        children: /*#__PURE__*/_jsx(Measure, {
          onResize: this.handleResize,
          bounds: true,
          children: _ref5 => {
            let {
              measureRef
            } = _ref5;
            return /*#__PURE__*/_jsxs("div", {
              ref: measureRef,
              className: `${baseClassName}__header-inner`,
              children: [headerAddon ? /*#__PURE__*/_jsx("div", {
                className: `${baseClassName}__header-addon`,
                children: headerAddon
              }) : null, /*#__PURE__*/_jsxs("div", {
                className: `${baseClassName}__header-content`,
                children: [sidebar && /*#__PURE__*/_jsx("button", {
                  className: classNames(`${baseClassName}__responsive-sidebar-toggler`, {
                    [`${baseClassName}__responsive-sidebar-toggler--open`]: !isSidebarClosed
                  }),
                  type: "button",
                  onClick: this.handleToggle,
                  ref: this.responsiveSidebarTogglerRef,
                  children: /*#__PURE__*/_jsx("span", {
                    className: `${baseClassName}__responsive-sidebar-toggler-inner`,
                    children: /*#__PURE__*/_jsx("span", {
                      className: `${baseClassName}__responsive-sidebar-toggler-icon`
                    })
                  })
                }), /*#__PURE__*/_jsx("div", {
                  className: `${baseClassName}__header-content-inner`,
                  children: header
                })]
              })]
            });
          }
        })
      })
    });
  }
  renderContentAddon(_ref6) {
    let {
      contentAddon
    } = _ref6;
    const {
      baseClassName
    } = this.props;
    if (!contentAddon) {
      return null;
    }
    return /*#__PURE__*/_jsx("div", {
      className: `${baseClassName}__content-addon`,
      children: /*#__PURE__*/_jsx("div", {
        className: `${baseClassName}__content-addon-inner`,
        children: contentAddon
      })
    });
  }
  renderContentHeader(_ref7) {
    let {
      contentHeader
    } = _ref7;
    const {
      baseClassName
    } = this.props;
    if (!contentHeader) {
      return null;
    }
    return /*#__PURE__*/_jsx("div", {
      className: `${baseClassName}__content-header`,
      children: /*#__PURE__*/_jsx("div", {
        className: `${baseClassName}__content-header-inner`,
        children: contentHeader
      })
    });
  }
  renderSidebar(_ref8) {
    let {
      sidebar
    } = _ref8;
    const {
      baseClassName,
      sidebarCollapsible,
      type
    } = this.props;
    if (!sidebar || type === 'simplified') {
      return null;
    }
    const isSidebarClosed = this.getSidebarClosed();
    return /*#__PURE__*/_jsx(CSSTransition, {
      in: !isSidebarClosed,
      timeout: 300,
      classNames: {
        enter: `${baseClassName}__sidebar--enter`,
        enterActive: `${baseClassName}__sidebar--active-enter`,
        enterDone: `${baseClassName}__sidebar--on`,
        exit: `${baseClassName}__sidebar--exit`,
        exitActive: `${baseClassName}__sidebar--active-exit`,
        exitDone: `${baseClassName}__sidebar--off`
      },
      children: /*#__PURE__*/_jsx("aside", {
        className: classNames(`${baseClassName}__sidebar`, {
          [`${baseClassName}__sidebar--on`]: !isSidebarClosed,
          [`${baseClassName}__sidebar--off`]: isSidebarClosed
        }),
        ref: this.sidebarRef,
        children: /*#__PURE__*/_jsxs("div", {
          className: `${baseClassName}__sidebar-inner`,
          children: [/*#__PURE__*/_jsx("div", {
            className: `${baseClassName}__sidebar-content`,
            children: /*#__PURE__*/_jsx("div", {
              className: `${baseClassName}__sidebar-content-inner`,
              children: sidebar
            })
          }), sidebarCollapsible && /*#__PURE__*/_jsx("button", {
            className: `${baseClassName}__sidebar-toggler`,
            onClick: this.handleToggle,
            type: "button",
            children: /*#__PURE__*/_jsx("span", {
              className: `${baseClassName}__sidebar-toggler-inner`
            })
          })]
        })
      })
    });
  }
  renderMainContent(_ref9) {
    let {
      children
    } = _ref9;
    const {
      baseClassName
    } = this.props;
    return /*#__PURE__*/_jsx("main", {
      className: `${baseClassName}__main`,
      children: /*#__PURE__*/_jsx("div", {
        className: `${baseClassName}__main-inner`,
        children: children
      })
    });
  }
  renderFooter(_ref10) {
    let {
      footer
    } = _ref10;
    const {
      baseClassName
    } = this.props;
    if (!footer) {
      return null;
    }
    return /*#__PURE__*/_jsx("footer", {
      className: `${baseClassName}__footer`,
      children: /*#__PURE__*/_jsx("div", {
        className: `${baseClassName}__footer-inner`,
        children: footer
      })
    });
  }
  render() {
    const {
      baseClassName,
      className,
      children,
      type,
      header,
      headerFixed,
      headerAddon,
      sidebar,
      sidebarType,
      sidebarCollapsible,
      sidebarCollapsed,
      onSidebarToggle,
      contentAddon,
      contentHeader,
      footer,
      width: widthProp,
      ...props
    } = this.props;
    let width = widthProp;
    let headerPositionFixed = headerFixed;
    if (type === 'simplified') {
      headerPositionFixed = false;
      if (!width) {
        width = 'sm';
      }
    }
    const isSidebarClosed = this.getSidebarClosed();
    return /*#__PURE__*/_jsx("div", {
      className: classNames(baseClassName, {
        [`${baseClassName}--${type}`]: type,
        [`${baseClassName}--${width}`]: width,
        [`${baseClassName}--touch`]: 'ontouchstart' in document.documentElement,
        [`${baseClassName}--header`]: header,
        [`${baseClassName}--header-fixed`]: header && headerPositionFixed,
        [`${baseClassName}--sidebar`]: sidebar,
        [`${baseClassName}--sidebar-type-${sidebarType}`]: sidebarType && sidebar,
        [`${baseClassName}--sidebar-collapsed`]: sidebarType === 'collapsed' && isSidebarClosed,
        [`${baseClassName}--sidebar-folded`]: sidebarType === 'folded' && isSidebarClosed
      }, className),
      ...props,
      children: /*#__PURE__*/_jsxs("div", {
        className: `${baseClassName}__inner`,
        children: [this.renderHeader({
          header
        }), /*#__PURE__*/_jsxs("div", {
          className: `${baseClassName}__container`,
          children: [this.renderSidebar({
            sidebar
          }), /*#__PURE__*/_jsxs("div", {
            className: `${baseClassName}__content`,
            children: [this.renderContentAddon({
              contentAddon
            }), this.renderContentHeader({
              contentHeader
            }), this.renderMainContent({
              children
            }), this.renderFooter({
              footer
            })]
          })]
        })]
      })
    });
  }
}
_defineProperty(Layout, "defaultProps", {
  type: 'fluid',
  header: undefined,
  headerFixed: true,
  headerAddon: undefined,
  sidebar: undefined,
  sidebarType: 'collapsed',
  sidebarCollapsible: true,
  sidebarCollapsed: false,
  contentAddon: undefined,
  contentHeader: undefined,
  footer: undefined,
  width: undefined,
  onSidebarToggle: undefined,
  children: undefined,
  className: undefined,
  baseClassName: `${CLS_PREFIX}layout`
});