import _isEmpty from "lodash/fp/isEmpty";
import _keys from "lodash/fp/keys";
import _set from "lodash/fp/set";
import _get from "lodash/fp/get";
import _filter from "lodash/fp/filter";
import _join from "lodash/fp/join";
import _pipe from "lodash/fp/pipe";
import _map from "lodash/fp/map";
import React, { useState, useEffect, useRef, useCallback } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { NovaCompositionNavigationArrowDown as ArrowDown, NovaSolidStatusClose as ErrorIcon, NovaCompositionCoorpacademyInformationIcon as InfoIcon } from '@coorpacademy/nova-icons';
import TitledCheckbox from '../titled-checkbox';
import Provider from '../../atom/provider';
import Checkbox from '../../atom/input-checkbox';
import getClassState from '../../util/get-class-state';
import style from './style.css';
const themeStyle = {
  setup: style.setup,
  cockpit: style.cockpit,
  sidebar: style.sidebar,
  coorpmanager: style.coorpmanager
};
export const useChoices = options => {
  const choicesRef = {
    current: options
  };
  const getChoices = () => {
    return choicesRef.current;
  };
  const setChoices = choice => {
    const choices = _set(`[${choice.i}].selected`, !choice.selected, getChoices());
    choicesRef.current = choices.filter(c => c.selected);
  };
  return [getChoices, setChoices];
};
const CMMultipleView = ({
  multiple,
  choice,
  onChange
}) => {
  const handleChange = useCallback(() => {
    return onChange(choice);
  }, [onChange, choice]);
  return multiple ? /*#__PURE__*/React.createElement("div", {
    className: style.item
  }, /*#__PURE__*/React.createElement(Checkbox, {
    titleStyle: "inherit",
    checked: choice.selected,
    onChange: handleChange,
    noLabelMargins: true,
    title: choice.name
  })) : /*#__PURE__*/React.createElement("span", {
    className: style.item,
    title: choice.name,
    "data-name": `${choice.name}-language`
  }, choice.name);
};
const SelectMultiple = ({
  title,
  options,
  theme,
  placeholder,
  description,
  hint,
  multiple,
  onChange,
  onError,
  modified = false,
  error = '',
  disabled = false
}, {
  skin
}) => {
  const [isOpened, updateIsOpened] = useState(false);
  const [getChoices, setChoices] = useChoices(options);
  const nodeRef = useRef(null);
  const defaultColor = _get('common.primary', skin);
  const black = _get('common.black', skin);
  const handleOnClick = useCallback(e => {
    if (disabled) return;
    e.preventDefault();
    e.stopPropagation();
    updateIsOpened(prev => !prev);
  }, [disabled]);
  const closeHandle = useCallback(e => {
    if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {
      updateIsOpened(false);
    }
  }, []);
  const handleChange = useCallback(choice => {
    // if multiple prop is turned on
    // we return all selected choices
    if (multiple) {
      setChoices(choice);
      return onChange(getChoices());
    }
    updateIsOpened(false);
    return onChange(choice);
  }, [multiple, onChange, setChoices, getChoices]);
  useEffect(() => {
    document.addEventListener('click', closeHandle);
    document.addEventListener('touchstart', closeHandle);
    return () => {
      document.removeEventListener('click', closeHandle);
      document.removeEventListener('touchstart', closeHandle);
    };
  }, [closeHandle]);
  const isCMTheme = theme === 'coorpmanager';
  const handleOnClickOnListElement = choice => () => handleChange(choice);
  const lines = _map.convert({
    cap: false
  })((choice, i) => {
    return /*#__PURE__*/React.createElement("li", {
      key: i,
      className: style.choice,
      onClick: isCMTheme && !multiple ? handleOnClickOnListElement({
        ...choice,
        i
      }) : null
    }, isCMTheme ? /*#__PURE__*/React.createElement(CMMultipleView, {
      multiple: multiple,
      choice: {
        ...choice,
        i
      },
      onChange: handleChange
    }) : /*#__PURE__*/React.createElement(TitledCheckbox, {
      onToggle: handleChange,
      choice: {
        ...choice,
        i
      },
      background: defaultColor
    }));
  }, options);
  const selection = _pipe(_filter({
    selected: true
  }), _map('name'), _join(', '))(options);
  const isActive = isOpened === true;
  const titleView = title ? /*#__PURE__*/React.createElement("span", {
    className: classnames(style.title, isCMTheme && selection && style.titleWithSelection, isCMTheme && _isEmpty(selection) && style.noValue, isActive && style.active)
  }, title, description && isCMTheme ? /*#__PURE__*/React.createElement("div", {
    className: style.infoIconWrapper
  }, /*#__PURE__*/React.createElement(InfoIcon, {
    className: style.infoIcon
  }), /*#__PURE__*/React.createElement("div", {
    className: style.descriptionLabel
  }, description)) : null) : null;
  const hintView = isCMTheme ? /*#__PURE__*/React.createElement("div", {
    className: classnames(style.hint, isActive && style.hideHint)
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: error || hint
    }
  }) : null;
  const mainClass = theme ? themeStyle[theme] : style.defaultStyle;
  const showPlaceholder = isCMTheme && isActive;
  const behaviourClassName = getClassState(style.defaultStyle, style.modified, style.error, modified, error);
  const errorIconView = error ? /*#__PURE__*/React.createElement(ErrorIcon, {
    onClick: onError,
    className: style.errorIcon
  }) : null;
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(mainClass, behaviourClassName, disabled && style.disabled),
    ref: nodeRef
  }, /*#__PURE__*/React.createElement("label", null, !isCMTheme && titleView, /*#__PURE__*/React.createElement("div", {
    className: style.select,
    title: selection || placeholder,
    "data-name": `select-languages`,
    onClick: handleOnClick
  }, isCMTheme && titleView, /*#__PURE__*/React.createElement("span", {
    className: classnames(style.selection, isCMTheme && _isEmpty(selection) && style.noselection)
  }, selection || !isCMTheme || showPlaceholder && placeholder || null), isCMTheme ? /*#__PURE__*/React.createElement("div", {
    className: style.iconsWrapper
  }, /*#__PURE__*/React.createElement("div", {
    className: style.flex
  }, errorIconView), /*#__PURE__*/React.createElement("div", {
    className: classnames(style.flex, isActive && style.clicked)
  }, /*#__PURE__*/React.createElement(ArrowDown, {
    style: {
      color: black
    },
    className: classnames(style.arrow, {
      [style.down]: isActive
    })
  }))) : /*#__PURE__*/React.createElement(ArrowDown, {
    style: {
      color: black
    },
    className: classnames(style.arrow, {
      [style.down]: isActive
    })
  })), /*#__PURE__*/React.createElement("div", {
    className: classnames(style.choices, isActive && style.activeChoices)
  }, /*#__PURE__*/React.createElement("ul", {
    className: style.list
  }, lines))), !isCMTheme ? /*#__PURE__*/React.createElement("div", {
    className: style.description
  }, description) : null, hintView);
};
SelectMultiple.contextTypes = {
  skin: Provider.childContextTypes.skin
};
CMMultipleView.propTypes = process.env.NODE_ENV !== "production" ? {
  multiple: PropTypes.bool,
  choice: TitledCheckbox.propTypes.choice,
  onChange: PropTypes.func
} : {};
SelectMultiple.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string,
  placeholder: PropTypes.string,
  description: PropTypes.string,
  hint: PropTypes.string,
  options: PropTypes.arrayOf(TitledCheckbox.propTypes.choice),
  onChange: PropTypes.func,
  onError: PropTypes.func,
  multiple: PropTypes.bool,
  modified: PropTypes.bool,
  disabled: PropTypes.bool,
  error: PropTypes.string,
  theme: PropTypes.oneOf(_keys(themeStyle))
} : {};
export default SelectMultiple;
//# sourceMappingURL=index.js.map