import _extends from "@babel/runtime/helpers/extends";
// Copyright 1999-2017. Plesk International GmbH. All rights reserved.

/* eslint-disable react/prop-types */
import React, { isValidElement } from 'react';
import PropTypes from 'prop-types';
import { CLS_PREFIX } from '../../constants';
import Translate from '../Translate';
import Button from '../Button';
import Toolbar, { ToolbarGroup, ToolbarExpander } from '../Toolbar';
import Dropdown from '../Dropdown';
import SegmentedControl from '../SegmentedControl';
import Menu from '../Menu';
import Checkbox from '../Checkbox';
import Badge from '../Badge';
import { VIEW_RESPONSIVE, VIEW_ROW, VIEW_TILE, VIEW_EXTENDED } from './CardList';

const renderSelection = ({
  onSelectAll,
  onSelectNone,
  checked,
  badge,
  menuItems = []
}, baseClassName) => {
  const hasDropdown = menuItems.length > 0;
  const buttonProps = {};
  const checkboxProps = {};

  if (hasDropdown) {
    buttonProps.caret = true;

    checkboxProps.onClick = e => e.stopPropagation();

    buttonProps.component = 'span';
  } else {
    buttonProps.component = 'label';
  }

  let button = /*#__PURE__*/React.createElement(Button, _extends({}, buttonProps, {
    className: "".concat(baseClassName, "--select-all-btn")
  }), /*#__PURE__*/React.createElement(Checkbox, _extends({
    checked: checked,
    onChange: isChecked => {
      if (isChecked) {
        onSelectAll();
      } else {
        onSelectNone();
      }
    }
  }, checkboxProps)));

  if (badge) {
    if (typeof badge === 'string') {
      badge = {
        label: badge
      };
    }

    button = /*#__PURE__*/React.createElement(Badge, badge, button);
  }

  if (hasDropdown) {
    button = /*#__PURE__*/React.createElement(Dropdown, {
      menu: /*#__PURE__*/React.createElement(Menu, null, menuItems)
    }, button);
  }

  return /*#__PURE__*/React.createElement(ToolbarGroup, {
    key: "selection",
    title: /*#__PURE__*/React.createElement(Translate, {
      content: "CardList.toolbarSelect",
      fallback: "Select"
    })
  }, button);
};

const renderView = (onViewChange, currentView) => {
  const viewButtons = [{
    value: VIEW_EXTENDED,
    title: /*#__PURE__*/React.createElement(Translate, {
      content: "CardList.viewCards",
      fallback: "Cards"
    }),
    icon: 'site-page'
  }, {
    value: VIEW_TILE,
    title: /*#__PURE__*/React.createElement(Translate, {
      content: "CardList.viewTiles",
      fallback: "Tiles"
    }),
    icon: 'four-squares'
  }, {
    value: VIEW_ROW,
    title: /*#__PURE__*/React.createElement(Translate, {
      content: "CardList.viewList",
      fallback: "List"
    }),
    icon: 'list'
  }];
  return /*#__PURE__*/React.createElement(ToolbarGroup, {
    key: "view",
    title: /*#__PURE__*/React.createElement(Translate, {
      content: "CardList.toolbarView",
      fallback: "View"
    })
  }, /*#__PURE__*/React.createElement(SegmentedControl, {
    buttons: viewButtons,
    selected: currentView,
    onChange: view => onViewChange(view)
  }));
};

const isToolbarExpander = element => /*#__PURE__*/isValidElement(element) && element.type === ToolbarExpander;

const CardListToolbar = ({
  baseClassName,
  selection,
  onViewChange,
  currentView,
  groups
}) => {
  let toolbar = [];

  if (selection) {
    toolbar.push(renderSelection(selection, baseClassName));
  }

  toolbar = toolbar.concat(groups);

  if (onViewChange && currentView !== VIEW_RESPONSIVE) {
    const hasExpander = groups.filter(isToolbarExpander).length > 0;

    if (!hasExpander) {
      toolbar.push( /*#__PURE__*/React.createElement(ToolbarExpander, {
        key: "expander"
      }));
    }

    toolbar.push(renderView(onViewChange, currentView));
  }

  if (toolbar.length === 0) {
    return null;
  }

  return /*#__PURE__*/React.createElement(Toolbar, {
    className: baseClassName
  }, toolbar);
};

CardListToolbar.propTypes = {
  selection: PropTypes.object,
  groups: PropTypes.arrayOf(PropTypes.element).isRequired,
  onViewChange: PropTypes.func,
  currentView: PropTypes.string.isRequired,
  baseClassName: PropTypes.string
};
CardListToolbar.defaultProps = {
  selection: null,
  onViewChange: null,
  baseClassName: "".concat(CLS_PREFIX, "card-list__toolbar")
};
export default CardListToolbar;