import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import markdown from './README.mdx';
import Sidebar, { SidebarHeader, SidebarBackButton, SidebarScroll } from './Sidebar';
import DATA from './PHONEBOOK.json';
import User from '../User';
import { List, ListItem } from '../List';
import MainNavigation from '../MainNavigation';
import Item from '../Item';
import Empty from '../Empty';
import Search from '../Search';
import Tag from '../Tag';
export default {
  title: 'Components/Content Related/Sidebar',
  component: Sidebar,
  subcomponents: {
    SidebarHeader: SidebarHeader,
    SidebarBackButton: SidebarBackButton,
    SidebarScroll: SidebarScroll
  },
  parameters: {
    status: 'released',
    mdx: markdown,
    previewWidth: 'full'
  }
};
export var Regular = function Regular(args) {
  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      active = _useState2[0],
      setActive = _useState2[1];

  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      height: '100vh',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/React.createElement(MainNavigation, {
    pageWidth: "full"
  }), /*#__PURE__*/React.createElement(Sidebar, _extends({}, args, {
    active: active,
    sidebar: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SidebarHeader, null, /*#__PURE__*/React.createElement(Search, null)), /*#__PURE__*/React.createElement(Item, {
      additional: "Yesterday",
      hint: /*#__PURE__*/React.createElement(Tag, {
        kind: "wfp"
      }, "Hint"),
      kind: "horizontal",
      subContent: "subcontent",
      title: "A title is shown",
      wrapper: "sidebar",
      onClick: function onClick() {
        return setActive(true);
      }
    })),
    sidebarMobileHeader: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SidebarBackButton, {
      onClick: function onClick() {
        return setActive(false);
      }
    }, "Back"), /*#__PURE__*/React.createElement("div", null, "Detail page"))
  }), active ? /*#__PURE__*/React.createElement(Item, {
    additional: "Yesterday",
    hint: /*#__PURE__*/React.createElement(Tag, {
      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.createElement(Empty, {
    title: "Content here"
  }, "When an item is selected, its corresponding content will be shown here")));
};
export var Phonebook = function Phonebook(args) {
  var _useState3 = useState(null),
      _useState4 = _slicedToArray(_useState3, 2),
      selectedUserId = _useState4[0],
      setSelectedUserId = _useState4[1];

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

  var selectedUserData = DATA.find(function (e) {
    return e.id === selectedUserId;
  });
  var searchResults = search ? DATA.filter(function (e) {
    return e.full_name.toLocaleLowerCase().includes(search.toLocaleLowerCase());
  }) : DATA;
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      height: '100vh',
      flexDirection: 'column'
    }
  }, /*#__PURE__*/React.createElement(MainNavigation, {
    pageWidth: "full"
  }), /*#__PURE__*/React.createElement(Sidebar, {
    active: selectedUserId,
    sidebarMobileHeader: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SidebarBackButton, {
      onClick: function onClick() {
        return setSelectedUserId();
      }
    }, "Back"), /*#__PURE__*/React.createElement("div", null, "Detail page")),
    sidebar: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SidebarHeader, null, /*#__PURE__*/React.createElement(Search, {
      onChange: function onChange(e) {
        return setSearch(e);
      }
    })), /*#__PURE__*/React.createElement(SidebarScroll, null, searchResults && searchResults.length > 0 ? searchResults.map(function (user, key) {
      return /*#__PURE__*/React.createElement(Item, {
        active: selectedUserId === user.id,
        key: key,
        image: user.profile_image ? /*#__PURE__*/React.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.createElement(Empty, {
      title: "No results"
    }, "Please check your search")))
  }, selectedUserData ? /*#__PURE__*/React.createElement("div", {
    style: {
      backgroundColor: '#fff',
      padding: '1rem'
    }
  }, /*#__PURE__*/React.createElement(User, {
    id: selectedUserData.staff_id,
    alt: "avatar",
    description: /*#__PURE__*/React.createElement(List, {
      small: true
    }, /*#__PURE__*/React.createElement(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.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      borderBottom: '1px solid #edf1f3',
      padding: '1rem 0'
    }
  }, /*#__PURE__*/React.createElement("h4", null, "Bio"), /*#__PURE__*/React.createElement(List, {
    small: true
  }, /*#__PURE__*/React.createElement(ListItem, null, selectedUserData.bio))), /*#__PURE__*/React.createElement("div", {
    style: {
      borderBottom: '1px solid #edf1f3',
      padding: '1rem 0'
    }
  }, /*#__PURE__*/React.createElement("h4", null, "Contact"), /*#__PURE__*/React.createElement(List, {
    small: true
  }, /*#__PURE__*/React.createElement(ListItem, null, "email: ", selectedUserData.email), /*#__PURE__*/React.createElement(ListItem, null, "phone: ", selectedUserData.phone_number))), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '1rem 0'
    }
  }, /*#__PURE__*/React.createElement("h4", null, "Location"), /*#__PURE__*/React.createElement(List, {
    small: true
  }, /*#__PURE__*/React.createElement(ListItem, null, "country: ", selectedUserData.country))))) : /*#__PURE__*/React.createElement(Empty, {
    title: "No user selected"
  }, "Please select a user")));
};