import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import React, { useState } from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
import { LazyMotion, domAnimation, AnimatePresence, m } from "framer-motion";
import Chip from "../Chip";
import CssFlex from "../CssFlex";
import ChevronRight from "../Icon/ChevronRight";
import Typography from "../Typography";
import Link from "../Link";
import makeStyles from "../styles/makeStyles";
var getClasses = makeStyles(function (_ref) {
  var _ref$cleverUI = _ref.cleverUI,
      typography = _ref$cleverUI.typography,
      colors = _ref$cleverUI.colors,
      spaces = _ref$cleverUI.spaces;
  return {
    addButton: _objectSpread(_objectSpread({}, typography.variants.small), {}, {
      color: colors.primary[500],
      fontWeight: 600
    }),
    collapseButton: {
      backgroundColor: "transparent",
      border: "none",
      padding: 0,
      cursor: "pointer"
    },
    rotateIcon: {
      transform: "rotate(-90deg)"
    },
    transitionEnter: {
      opacity: 0.01
    },
    transitionEnterActive: {
      opacity: 1,
      transition: "opacity 300ms ease-in"
    },
    transitionLeave: {
      opacity: 1
    },
    transitionLeaveActive: {
      opacity: 0.01,
      transition: "opacity 300ms ease-in"
    },
    transition: {
      display: "flex",
      gap: spaces.sm,
      flexWrap: "wrap"
    }
  };
});
var MotionChip = m(Chip);

var CollapsableChipsList = function CollapsableChipsList(props) {
  var items = props.items,
      _onDelete = props.onDelete,
      addText = props.addText,
      showMoreText = props.showMoreText,
      showLessText = props.showLessText,
      displayCount = props.displayCount,
      renderAddInput = props.renderAddInput;
  var classes = getClasses();

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      openCollapse = _useState2[0],
      setOpenCollapse = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      openAdd = _useState4[0],
      setOpenAdd = _useState4[1];

  if ((!items || items.length === 0) && !renderAddInput) {
    return null;
  }

  var isOnlyLabel = typeof items[0] === "string";
  var displayedItems = items.slice(0, displayCount);
  var hiddenItems = items.slice(displayCount);

  var handleAdd = function handleAdd() {
    setOpenAdd(true);
    setOpenCollapse(true);
  };

  return /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "xs",
    mb: "sm"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    gap: "sm",
    wrap: "wrap"
  }, displayedItems.map(function (item, index) {
    return /*#__PURE__*/React.createElement(Chip, _extends({
      key: "chip-".concat(index),
      label: isOnlyLabel ? item : item.label
    }, !isOnlyLabel && item.title && {
      title: item.title
    }, _onDelete && {
      onDelete: function onDelete() {
        return _onDelete(item);
      }
    }));
  }), /*#__PURE__*/React.createElement(LazyMotion, {
    features: domAnimation,
    strict: true
  }, /*#__PURE__*/React.createElement(AnimatePresence, null, openCollapse && hiddenItems.map(function (item, index) {
    return /*#__PURE__*/React.createElement(MotionChip, _extends({
      key: "chip-".concat(displayCount + index),
      label: isOnlyLabel ? item : item.label
    }, !isOnlyLabel && item.title && {
      title: item.title
    }, _onDelete && {
      onDelete: function onDelete() {
        return _onDelete(item);
      }
    }, {
      // Framer motion props
      initial: {
        opacity: 0,
        height: 0,
        transition: {
          ease: "easeOut",
          duration: 0.5
        }
      },
      animate: {
        opacity: 1,
        height: "auto"
      },
      exit: {
        opacity: 0,
        height: 0,
        transition: {
          ease: "easeIn",
          duration: 0.3
        }
      }
    }));
  }))), renderAddInput && (openAdd ? renderAddInput({
    onClose: function onClose() {
      return setOpenAdd(false);
    }
  }) : /*#__PURE__*/React.createElement(Link, {
    onClick: handleAdd,
    className: classes.addButton
  }, addText))), displayedItems.length < items.length && /*#__PURE__*/React.createElement(CssFlex, {
    component: "button",
    type: "button",
    alignItems: "center",
    onClick: function onClick() {
      return setOpenCollapse(!openCollapse);
    },
    className: classes.collapseButton
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    color: openCollapse ? "primary" : "neutral",
    shade: openCollapse ? 500 : 800
  }, openCollapse ? showLessText : "".concat(hiddenItems.length, " ").concat(showMoreText)), /*#__PURE__*/React.createElement(ChevronRight, {
    shade: 400,
    className: classNames(openCollapse ? classes.rotateIcon : "")
  })));
};

CollapsableChipsList.propTypes = {
  items: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.exact({
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    label: PropTypes.string,
    title: PropTypes.string
  })])).isRequired,
  onDelete: PropTypes.func,
  addText: PropTypes.string,
  showMoreText: PropTypes.string,
  showLessText: PropTypes.string,
  displayCount: PropTypes.number,
  renderAddInput: PropTypes.func
};
CollapsableChipsList.defaultProps = {
  addText: "add",
  showMoreText: "more",
  showLessText: "show less",
  displayCount: 3
};
export default CollapsableChipsList;