// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

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';
import { jsx as _jsx } from "react/jsx-runtime";
const renderSelection = (_ref, baseClassName) => {
  let {
    onSelectAll,
    onSelectNone,
    checked,
    badge,
    menuItems = []
  } = _ref;
  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__*/_jsx(Button, {
    ...buttonProps,
    className: `${baseClassName}--select-all-btn`,
    children: /*#__PURE__*/_jsx(Checkbox, {
      checked: checked,
      onChange: isChecked => {
        if (isChecked) {
          onSelectAll();
        } else {
          onSelectNone();
        }
      },
      ...checkboxProps
    })
  });
  if (badge) {
    if (typeof badge === 'string') {
      badge = {
        label: badge
      };
    }
    button = /*#__PURE__*/_jsx(Badge, {
      ...badge,
      children: button
    });
  }
  if (hasDropdown) {
    button = /*#__PURE__*/_jsx(Dropdown, {
      menu: /*#__PURE__*/_jsx(Menu, {
        children: menuItems
      }),
      children: button
    });
  }
  return /*#__PURE__*/_jsx(ToolbarGroup, {
    title: /*#__PURE__*/_jsx(Translate, {
      content: "CardList.toolbarSelect",
      fallback: "Select"
    }),
    children: button
  }, "selection");
};
const renderView = (onViewChange, currentView) => {
  const viewButtons = [{
    value: VIEW_EXTENDED,
    title: /*#__PURE__*/_jsx(Translate, {
      content: "CardList.viewCards",
      fallback: "Cards"
    }),
    icon: 'site-page'
  }, {
    value: VIEW_TILE,
    title: /*#__PURE__*/_jsx(Translate, {
      content: "CardList.viewTiles",
      fallback: "Tiles"
    }),
    icon: 'four-squares'
  }, {
    value: VIEW_ROW,
    title: /*#__PURE__*/_jsx(Translate, {
      content: "CardList.viewList",
      fallback: "List"
    }),
    icon: 'list'
  }];
  return /*#__PURE__*/_jsx(ToolbarGroup, {
    title: /*#__PURE__*/_jsx(Translate, {
      content: "CardList.toolbarView",
      fallback: "View"
    }),
    children: /*#__PURE__*/_jsx(SegmentedControl, {
      buttons: viewButtons,
      selected: currentView,
      onChange: view => onViewChange(view)
    })
  }, "view");
};
const isToolbarExpander = element => /*#__PURE__*/isValidElement(element) && element.type === ToolbarExpander;
const CardListToolbar = _ref2 => {
  let {
    baseClassName,
    selection,
    onViewChange,
    currentView,
    groups
  } = _ref2;
  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__*/_jsx(ToolbarExpander, {}, "expander"));
    }
    toolbar.push(renderView(onViewChange, currentView));
  }
  if (toolbar.length === 0) {
    return null;
  }
  return /*#__PURE__*/_jsx(Toolbar, {
    className: baseClassName,
    children: 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: `${CLS_PREFIX}card-list__toolbar`
};
export default CardListToolbar;