"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Drawer = exports.DrawerLinkContainer = exports.DrawerLink = exports.FlipIcon = void 0;

var _getStyledComponent = _interopRequireDefault(require("./utils/get-styled-component"));

var _preact = require("preact");

var _icon = require("./icon");

var _flipContainer = require("./flip-container");

var _classnames = _interopRequireDefault(require("classnames"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/** @jsx h */
const FlipIcon = (0, _getStyledComponent.default)({
  options: {
    complete: ['complete'],
    icon: ['icon']
  },
  renderChildren: ({
    icon,
    complete
  }) => {
    return [(0, _preact.h)(_flipContainer.FlipContainer, {
      key: "flipContainer",
      width: "20px",
      height: "20px",
      flipped: complete,
      front: (0, _preact.h)(_icon.Icon, {
        size: "20",
        icon: icon
      }),
      back: (0, _preact.h)(_icon.Icon, {
        className: "light-blue",
        size: "20",
        icon: "check_circle"
      })
    })];
  }
});
exports.FlipIcon = FlipIcon;
const DrawerLink = (0, _getStyledComponent.default)({
  tagName: 'a',
  baseClasses: 'link pv1 mt1 f5 fw3 flex items-center',
  options: {
    active: ['active'],
    disabled: ['disabled'],
    completeness: ['complete']
  },
  fn: ({
    active,
    disabled
  }) => (0, _classnames.default)({
    'light-blue': active,
    'mid-gray not-allowed': disabled,
    'white hover-moon-gray': !active && !disabled
  }),
  renderChildren: ({
    icon,
    title,
    complete
  }) => [(0, _preact.h)(FlipIcon, {
    key: "flipIcon",
    icon: icon,
    complete: complete
  }), (0, _preact.h)("span", {
    key: "span",
    "data-state": complete ? 'complete' : 'incomplete',
    "data-e2e": "".concat(title, "Nav"),
    className: icon ? 'pl2' : null
  }, title)]
});
exports.DrawerLink = DrawerLink;
const DrawerLinkContainer = (0, _getStyledComponent.default)({
  baseClasses: 'link db pt2 pl3 f4',
  options: {
    completeness: ['complete'],
    title: ['title']
  },
  renderChildren: ({
    complete,
    title,
    children
  }) => [(0, _preact.h)("div", {
    key: title,
    className: "flex items-center"
  }, (0, _preact.h)(_icon.Icon, {
    className: (0, _classnames.default)('light-blue pr2', {
      hidden: !complete
    }),
    size: "20",
    icon: "check_circle"
  }), (0, _preact.h)("h3", {
    className: "fw3 f6 ma0 ttu mid-gray bb b--mid-gray pb2 pt1 relative flex-grow-1"
  }, title)), (0, _preact.h)("div", {
    key: title + 'children'
  }, children)]
});
exports.DrawerLinkContainer = DrawerLinkContainer;
const Drawer = (0, _getStyledComponent.default)({
  baseClasses: 'bg-dark-blue white fixed top-0 vh-100 overflow-x-hidden'
});
exports.Drawer = Drawer;