import _defaults from "lodash/fp/defaults";
import _getOr from "lodash/fp/getOr";
import _noop from "lodash/fp/noop";
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { useMemo } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { NovaCompositionCoorpacademyOpenInNewTab, NovaSolidStatusCheckCircle2 as ActiveIcon } from '@coorpacademy/nova-icons';
import Link from '../../atom/link';
import Button from '../../atom/button';
import Provider, { GetSkinFromContext } from '../../atom/provider';
import Select from '../../atom/select';
import Cta from '../../atom/cta';
import SelectMultiple from '../../molecule/select-multiple';
import style from './style.css';
const NEUTRAL_COLOR = '#607D8B';
export const InputTextItem = props => {
  const {
    title,
    placeholder = '',
    value,
    onChange = _noop,
    disabled,
    name,
    index,
    uppercase = true
  } = props;
  const handleOnChange = useMemo(() => e => onChange(e.target.value), [onChange]);
  return /*#__PURE__*/React.createElement("li", {
    "data-name": name || `inputtext-item-${index}`,
    className: style.selectItem
  }, /*#__PURE__*/React.createElement("div", {
    className: classnames(style.selectTitle, {
      [style.uppercase]: uppercase
    })
  }, title), /*#__PURE__*/React.createElement("input", {
    type: "text",
    name: title,
    className: style.input,
    placeholder: placeholder,
    value: value,
    disabled: disabled,
    onChange: handleOnChange
  }));
};
InputTextItem.propTypes = process.env.NODE_ENV !== "production" ? {
  index: PropTypes.number,
  title: PropTypes.string.isRequired,
  name: PropTypes.string,
  disabled: PropTypes.bool,
  value: PropTypes.string.isRequired,
  placeholder: PropTypes.string,
  onChange: PropTypes.func,
  uppercase: PropTypes.bool
} : {};
export const SelectItem = ({
  name,
  index,
  onChange,
  title,
  options,
  uppercase = true
}) => {
  return /*#__PURE__*/React.createElement("li", {
    "data-name": name || `select-item-${index}`,
    className: style.selectItem
  }, /*#__PURE__*/React.createElement("div", {
    className: classnames(style.selectTitle, {
      [style.uppercase]: uppercase
    })
  }, title), /*#__PURE__*/React.createElement(Select, {
    title: title,
    onChange: onChange,
    theme: "header",
    options: options
  }));
};
SelectItem.propTypes = process.env.NODE_ENV !== "production" ? {
  index: PropTypes.number,
  title: PropTypes.string.isRequired,
  name: PropTypes.string,
  options: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired,
    selected: PropTypes.bool.isRequired
  })).isRequired,
  onChange: PropTypes.func,
  uppercase: PropTypes.bool
} : {};
export const MultiSelectItem = ({
  name,
  index,
  onChange,
  title,
  options,
  uppercase = true
}) => {
  return /*#__PURE__*/React.createElement("li", {
    "data-name": name || `select-item-${index}`,
    className: style.selectItem
  }, /*#__PURE__*/React.createElement("div", {
    className: classnames(style.selectTitle, {
      [style.uppercase]: uppercase
    })
  }, title), /*#__PURE__*/React.createElement(SelectMultiple, {
    theme: "sidebar",
    onChange: onChange,
    options: options
  }));
};
MultiSelectItem.propTypes = process.env.NODE_ENV !== "production" ? SelectItem.propTypes : {};
export const LinkItem = ({
  href,
  index,
  name,
  selected,
  color,
  title,
  onClick,
  uppercase = true,
  styles,
  children,
  setChildrenAsHtml = true,
  target = '_self',
  activeIcon = false
}, context) => {
  const skin = GetSkinFromContext(context);
  const handleOnClick = useMemo(() => e => {
    onClick && onClick(e);
  }, [onClick]);
  const classNames = classnames(style.linkItem, style.innerHTML, {
    [style.uppercase]: uppercase
  }, styles, !activeIcon && setChildrenAsHtml ? style.itemWithoutIcon : null);
  const borderStyle = {
    borderLeftColor: selected ? color : null
  };
  return /*#__PURE__*/React.createElement(Link, {
    target: target,
    onClick: handleOnClick,
    hoverColor: _getOr('#00B0FF', 'common.primary', skin),
    href: href,
    "data-name": name || `link-item-${index}`,
    style: {
      textDecoration: 'none',
      color: selected ? color : NEUTRAL_COLOR
    }
  }, setChildrenAsHtml ? /*#__PURE__*/React.createElement("li", {
    className: classNames,
    style: borderStyle
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: title
    }
  }) : /*#__PURE__*/React.createElement("li", {
    className: classNames,
    style: borderStyle
  }, activeIcon ? /*#__PURE__*/React.createElement(ActiveIcon, {
    className: style.activeIcon
  }) : null, title, children));
};
LinkItem.propTypes = process.env.NODE_ENV !== "production" ? {
  index: PropTypes.number,
  title: PropTypes.string.isRequired,
  selected: PropTypes.bool,
  name: PropTypes.string,
  href: PropTypes.string,
  color: PropTypes.string,
  onClick: PropTypes.func,
  uppercase: PropTypes.bool,
  setChildrenAsHtml: PropTypes.bool,
  target: PropTypes.string,
  activeIcon: PropTypes.bool
} : {};
LinkItem.contextTypes = {
  skin: Provider.childContextTypes.skin
};
export const IconLinkItem = ({
  index,
  name = `button-link-item-${index}`,
  onClick,
  uppercase = true,
  ...props
}) => {
  const handleOnClick = useMemo(() => e => {
    onClick && onClick(e);
  }, [onClick]);
  return /*#__PURE__*/React.createElement(LinkItem, _extends({}, props, {
    setChildrenAsHtml: false,
    onClick: handleOnClick,
    name: name,
    uppercase: uppercase,
    index: index
  }), /*#__PURE__*/React.createElement(NovaCompositionCoorpacademyOpenInNewTab, {
    className: style.icon
  }));
};
IconLinkItem.propTypes = process.env.NODE_ENV !== "production" ? LinkItem.propTypes : {};
export const TitleItem = ({
  name,
  index,
  title,
  uppercase
}) => {
  return /*#__PURE__*/React.createElement("ul", {
    "data-name": name || `item-title-${index}`,
    className: style.titleItem
  }, /*#__PURE__*/React.createElement("li", {
    className: classnames(style.titleItemTitle, {
      [style.uppercase]: uppercase
    })
  }, title));
};
TitleItem.propTypes = process.env.NODE_ENV !== "production" ? {
  index: PropTypes.number,
  title: PropTypes.string.isRequired,
  name: PropTypes.string,
  uppercase: PropTypes.bool
} : {};
export const ButtonItem = ({
  index,
  onClick,
  color,
  neutralColor,
  name,
  href,
  title,
  cta,
  uppercase
}) => {
  const handleOnClick = useMemo(() => e => {
    onClick && onClick(e);
  }, [onClick]);
  const backgroundColor = neutralColor === true ? NEUTRAL_COLOR : color;
  const button = cta ? /*#__PURE__*/React.createElement(Cta, _defaults({
    onClick: handleOnClick,
    href,
    rectangular: true,
    fullWidth: true,
    secondary: true,
    submitValue: title
  }, cta)) : /*#__PURE__*/React.createElement(Button, {
    type: "link",
    href: href,
    onClick: handleOnClick,
    style: {
      backgroundColor
    }
  }, title);
  return /*#__PURE__*/React.createElement("li", {
    "data-name": name || `button-item-${index}`,
    className: classnames(style.buttonItem, {
      [style.uppercase]: uppercase
    })
  }, button);
};
ButtonItem.propTypes = process.env.NODE_ENV !== "production" ? {
  index: PropTypes.number,
  title: PropTypes.string.isRequired,
  name: PropTypes.string,
  href: PropTypes.string,
  color: PropTypes.string,
  neutralColor: PropTypes.bool,
  onClick: PropTypes.func,
  cta: PropTypes.oneOfType([PropTypes.shape(Cta.propTypes), PropTypes.bool]),
  uppercase: PropTypes.bool
} : {};
export const InfoItem = ({
  onClick,
  index,
  name,
  color,
  neutralColor,
  title,
  value,
  uppercase
}) => {
  const handleOnClick = useMemo(() => e => {
    onClick && onClick(e);
  }, [onClick]);
  const color_ = neutralColor === true ? NEUTRAL_COLOR : color;
  return /*#__PURE__*/React.createElement("ul", {
    "data-name": name || `item-info-${index}`,
    className: style.infoItem
  }, /*#__PURE__*/React.createElement("li", {
    className: style.infoItemTitle
  }, title), /*#__PURE__*/React.createElement("li", {
    className: classnames(style.infoItemContent, {
      [style.uppercase]: uppercase
    }),
    onClick: handleOnClick,
    style: {
      borderLeftColor: color_,
      color: color_
    }
  }, value));
};
InfoItem.propTypes = process.env.NODE_ENV !== "production" ? {
  index: PropTypes.number,
  title: PropTypes.string.isRequired,
  name: PropTypes.string,
  color: PropTypes.string,
  neutralColor: PropTypes.bool,
  value: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  uppercase: PropTypes.bool
} : {};
const SidebarItem = ({
  item,
  color,
  index
}) => {
  switch (item.type) {
    case 'select':
      {
        return /*#__PURE__*/React.createElement(SelectItem, _extends({}, item, {
          color: color,
          index: index
        }));
      }
    case 'multi-select':
      return /*#__PURE__*/React.createElement(MultiSelectItem, _extends({}, item, {
        color: color,
        index: index
      }));
    case 'link':
      return /*#__PURE__*/React.createElement(LinkItem, _extends({}, item, {
        color: color,
        index: index
      }));
    case 'iconLink':
      return /*#__PURE__*/React.createElement(IconLinkItem, _extends({}, item, {
        color: color,
        index: index
      }));
    case 'title':
      return /*#__PURE__*/React.createElement(TitleItem, _extends({}, item, {
        color: color,
        index: index
      }));
    case 'button':
      return /*#__PURE__*/React.createElement(ButtonItem, _extends({}, item, {
        color: color,
        index: index
      }));
    case 'info':
      return /*#__PURE__*/React.createElement(InfoItem, _extends({}, item, {
        color: color,
        index: index
      }));
    case 'inputtext':
      return /*#__PURE__*/React.createElement(InputTextItem, _extends({}, item, {
        color: color,
        index: index
      }));
  }
};
SidebarItem.propTypes = process.env.NODE_ENV !== "production" ? {
  item: PropTypes.oneOfType([PropTypes.shape({
    ...TitleItem.propTypes,
    type: PropTypes.oneOf(['title']).isRequired
  }), PropTypes.shape({
    ...IconLinkItem.propTypes,
    type: PropTypes.oneOf(['iconLink']).isRequired
  }), PropTypes.shape({
    ...ButtonItem.propTypes,
    type: PropTypes.oneOf(['button']).isRequired
  }), PropTypes.shape({
    ...InfoItem.propTypes,
    type: PropTypes.oneOf(['info']).isRequired
  }), PropTypes.shape({
    ...LinkItem.propTypes,
    type: PropTypes.oneOf(['link']).isRequired
  }), PropTypes.shape({
    ...InputTextItem.propTypes,
    type: PropTypes.oneOf(['inputtext']).isRequired
  }), PropTypes.shape({
    ...SelectItem.propTypes,
    type: PropTypes.oneOf(['select']).isRequired
  }), PropTypes.shape({
    ...SelectItem.propTypes,
    type: PropTypes.oneOf(['multi-select']).isRequired
  })]),
  index: PropTypes.number,
  color: PropTypes.string,
  uppercase: PropTypes.bool
} : {};
const SidebarItems = ({
  items,
  color
}) => {
  return /*#__PURE__*/React.createElement("ul", {
    className: style.sectionItems
  }, items.map((item, index) => /*#__PURE__*/React.createElement(SidebarItem, {
    item: item,
    key: index,
    index: index,
    color: color
  })));
};
SidebarItems.propTypes = process.env.NODE_ENV !== "production" ? {
  color: PropTypes.string,
  items: PropTypes.arrayOf(PropTypes.shape(SidebarItem.propTypes))
} : {};
const Sidebar = ({
  items
}, context) => {
  const sections = Array.isArray(items[0]) ? items : [items];
  const {
    skin
  } = context;
  const defaultColor = _getOr('#00B0FF', 'common.primary', skin);
  return /*#__PURE__*/React.createElement("div", {
    "data-name": "sidebar",
    className: style.sidebar
  }, sections.map((sidebarSection, idx) => /*#__PURE__*/React.createElement("div", {
    "data-name": `sidebarpart-${idx + 1}`,
    className: style.sidebarPart,
    key: idx
  }, /*#__PURE__*/React.createElement(SidebarItems, {
    items: sidebarSection,
    color: defaultColor
  }))));
};
Sidebar.propTypes = process.env.NODE_ENV !== "production" ? {
  items: PropTypes.arrayOf(PropTypes.oneOfType([SidebarItem.propTypes.item, PropTypes.arrayOf(SidebarItem.propTypes.item).isRequired])).isRequired
} : {};
Sidebar.contextTypes = {
  skin: Provider.childContextTypes.skin
};
export default Sidebar;
//# sourceMappingURL=index.js.map