"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

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

var _react = _interopRequireWildcard(require("react"));

var _README = _interopRequireDefault(require("./README.mdx"));

var _Sidebar = _interopRequireWildcard(require("./Sidebar"));

var _PHONEBOOK = _interopRequireDefault(require("./PHONEBOOK.json"));

var _User = _interopRequireDefault(require("../User"));

var _List = require("../List");

var _MainNavigation = _interopRequireDefault(require("../MainNavigation"));

var _Item = _interopRequireDefault(require("../Item"));

var _Empty = _interopRequireDefault(require("../Empty"));

var _Search = _interopRequireDefault(require("../Search"));

var _Tag = _interopRequireDefault(require("../Tag"));

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var _default = {
  title: 'Components/Content Related/Sidebar',
  component: _Sidebar.default,
  subcomponents: {
    SidebarHeader: _Sidebar.SidebarHeader,
    SidebarBackButton: _Sidebar.SidebarBackButton,
    SidebarScroll: _Sidebar.SidebarScroll
  },
  parameters: {
    status: 'released',
    mdx: _README.default,
    previewWidth: 'full'
  }
};
exports.default = _default;

var Regular = function Regular(args) {
  var _useState = (0, _react.useState)(false),
      _useState2 = _slicedToArray(_useState, 2),
      active = _useState2[0],
      setActive = _useState2[1];

  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      height: '100vh',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/_react.default.createElement(_MainNavigation.default, {
    pageWidth: "full"
  }), /*#__PURE__*/_react.default.createElement(_Sidebar.default, _extends({}, args, {
    active: active,
    sidebar: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Sidebar.SidebarHeader, null, /*#__PURE__*/_react.default.createElement(_Search.default, null)), /*#__PURE__*/_react.default.createElement(_Item.default, {
      additional: "Yesterday",
      hint: /*#__PURE__*/_react.default.createElement(_Tag.default, {
        kind: "wfp"
      }, "Hint"),
      kind: "horizontal",
      subContent: "subcontent",
      title: "A title is shown",
      wrapper: "sidebar",
      onClick: function onClick() {
        return setActive(true);
      }
    })),
    sidebarMobileHeader: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Sidebar.SidebarBackButton, {
      onClick: function onClick() {
        return setActive(false);
      }
    }, "Back"), /*#__PURE__*/_react.default.createElement("div", null, "Detail page"))
  }), active ? /*#__PURE__*/_react.default.createElement(_Item.default, {
    additional: "Yesterday",
    hint: /*#__PURE__*/_react.default.createElement(_Tag.default, {
      kind: "wfp"
    }, "Hint"),
    kind: "large",
    showAdditionalIcon: true,
    subContent: "This is the subContent. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ",
    title: "A title is shown",
    wrapper: "button"
  }, "nonumy eirmod tempor invidunt") : /*#__PURE__*/_react.default.createElement(_Empty.default, {
    title: "Content here"
  }, "When an item is selected, its corresponding content will be shown here")));
};

exports.Regular = Regular;

var Phonebook = function Phonebook(args) {
  var _useState3 = (0, _react.useState)(null),
      _useState4 = _slicedToArray(_useState3, 2),
      selectedUserId = _useState4[0],
      setSelectedUserId = _useState4[1];

  var _useState5 = (0, _react.useState)(),
      _useState6 = _slicedToArray(_useState5, 2),
      search = _useState6[0],
      setSearch = _useState6[1];

  var selectedUserData = _PHONEBOOK.default.find(function (e) {
    return e.id === selectedUserId;
  });

  var searchResults = search ? _PHONEBOOK.default.filter(function (e) {
    return e.full_name.toLocaleLowerCase().includes(search.toLocaleLowerCase());
  }) : _PHONEBOOK.default;
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      height: '100vh',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/_react.default.createElement(_MainNavigation.default, {
    pageWidth: "full"
  }), /*#__PURE__*/_react.default.createElement(_Sidebar.default, {
    active: selectedUserId,
    sidebarMobileHeader: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Sidebar.SidebarBackButton, {
      onClick: function onClick() {
        return setSelectedUserId();
      }
    }, "Back"), /*#__PURE__*/_react.default.createElement("div", null, "Detail page")),
    sidebar: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Sidebar.SidebarHeader, null, /*#__PURE__*/_react.default.createElement(_Search.default, {
      onChange: function onChange(e) {
        return setSearch(e);
      }
    })), /*#__PURE__*/_react.default.createElement(_Sidebar.SidebarScroll, null, searchResults && searchResults.length > 0 ? searchResults.map(function (user, key) {
      return /*#__PURE__*/_react.default.createElement(_Item.default, {
        active: selectedUserId === user.id,
        key: key,
        image: user.profile_image ? /*#__PURE__*/_react.default.createElement("img", {
          alt: user.full_name,
          src: user.profile_image
        }) : undefined,
        title: user.full_name,
        children: user.email,
        subContent: user.phone_number,
        kind: "horizontal",
        wrapper: "sidebar",
        onClick: function onClick() {
          return setSelectedUserId(user.id);
        },
        noImage: true
      });
    }) : /*#__PURE__*/_react.default.createElement(_Empty.default, {
      title: "No results"
    }, "Please check your search")))
  }, selectedUserData ? /*#__PURE__*/_react.default.createElement("div", {
    style: {
      backgroundColor: '#fff',
      padding: '1rem'
    }
  }, /*#__PURE__*/_react.default.createElement(_User.default, {
    id: selectedUserData.staff_id,
    alt: "avatar",
    description: /*#__PURE__*/_react.default.createElement(_List.List, {
      small: true
    }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, selectedUserData.job_title)),
    image: selectedUserData.profile_image,
    name: selectedUserData.full_name,
    style: {
      borderBottom: '1px solid #edf1f3',
      padding: '1rem 0 2rem 0',
      marginBottom: '1rem'
    }
  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      borderBottom: '1px solid #edf1f3',
      padding: '1rem 0'
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Bio"), /*#__PURE__*/_react.default.createElement(_List.List, {
    small: true
  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, selectedUserData.bio))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      borderBottom: '1px solid #edf1f3',
      padding: '1rem 0'
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Contact"), /*#__PURE__*/_react.default.createElement(_List.List, {
    small: true
  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "email: ", selectedUserData.email), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "phone: ", selectedUserData.phone_number))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      padding: '1rem 0'
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Location"), /*#__PURE__*/_react.default.createElement(_List.List, {
    small: true
  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "country: ", selectedUserData.country))))) : /*#__PURE__*/_react.default.createElement(_Empty.default, {
    title: "No user selected"
  }, "Please select a user")));
};

exports.Phonebook = Phonebook;