"use strict";

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

var _preact = require("preact");

var sections = _interopRequireWildcard(require("./sections"));

var _drawer = require("../drawer");

var _crate = require("../crate");

var _appLayout = require("../app-layout");

var _package = require("../../package.json");

var _logo = require("../logo");

var _button = require("../button");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

class _default extends _preact.Component {
  constructor(props) {
    super(props);
    this.state = {
      screenIsWide: this.isScreenWide(),
      drawerOpen: false,
      drawerEnabled: true,
      activeHash: ''
    };
    this.toggleDrawerOpen = this.toggleDrawerOpen.bind(this);
    this.toggleDrawerEnabled = this.toggleDrawerEnabled.bind(this);
    this.handleResize = this.handleResize.bind(this);
    this.handleHashChange = this.handleHashChange.bind(this);
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize, {
      passive: true
    });
    window.addEventListener('hashchange', this.handleHashChange);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize, {
      passive: true
    });
  }

  handleHashChange() {
    this.setState({
      activeHash: location.hash
    });
  }

  toggleDrawerOpen() {
    this.setState({
      drawerOpen: !this.state.drawerOpen
    });
  }

  toggleDrawerEnabled() {
    this.setState({
      drawerEnabled: !this.state.drawerEnabled
    });
  }

  handleResize() {
    const isWide = this.isScreenWide();

    if (isWide !== this.state.screenIsWide) {
      this.setState({
        screenIsWide: isWide
      });
    }
  }

  isScreenWide() {
    return window.innerWidth >= 960;
  }

  render(_, {
    screenIsWide,
    drawerEnabled,
    drawerOpen,
    activeHash
  }) {
    return (0, _preact.h)(_appLayout.AppLayout, {
      version: _package.version,
      doCloseDrawer: this.toggleDrawerOpen,
      doOpenDrawer: this.toggleDrawerOpen,
      screenIsWide: screenIsWide,
      drawerEnabled: drawerEnabled,
      drawerOpen: drawerOpen,
      subHeader: "Pattern Library",
      mainContent: (0, _preact.h)(_crate.Page, {
        className: "ph3"
      }, Object.keys(sections).sort().map(section => {
        const Component = sections[section];
        return (0, _preact.h)("div", {
          key: section,
          id: section
        }, (0, _preact.h)(Component, {
          key: section
        }));
      })),
      statusBarContent: (0, _preact.h)("div", {
        className: "pa2 flex items-center"
      }, (0, _preact.h)(_button.TapIconButton, {
        icon: "menu",
        onClick: this.toggleDrawerOpen,
        className: "dn-l"
      }), (0, _preact.h)(_logo.XMark, {
        className: "dn-l ml1",
        style: {
          width: '24px'
        }
      }), (0, _preact.h)("h2", {
        className: "pv0 mv2 f4 ml2"
      }, "Pattern Library")),
      drawerContent: (0, _preact.h)("div", null, (0, _preact.h)(_drawer.DrawerLinkContainer, {
        title: "Components"
      }, Object.keys(sections).sort().map(section => (0, _preact.h)(_drawer.DrawerLink, {
        key: section,
        icon: "polymer",
        href: "#".concat(section),
        onClick: this.toggleDrawerOpen,
        title: section,
        complete: activeHash === "#".concat(section)
      }))))
    });
  }

}

exports.default = _default;