import React, { useMemo } from "react";
import { BarChartOutlined } from "@ant-design/icons";
import { Dropdown } from "antd";
import ButtonIcon from "../ButtonIcon";
var itemsMap = {
  grid: {
    key: "grid",
    label: "Grid"
  },
  gallery: {
    key: "gallery",
    label: "Gallery"
  },
  kanban: {
    key: "kanban",
    label: "Kanban"
  }
};
var defaultArr = [];
var ViewMode = function ViewMode(props) {
  var view = props.view,
    value = props.value,
    onChange = props.onChange;
  var defaultViewMode = view.defaultViewMode,
    _view$modeList = view.modeList,
    modeList = _view$modeList === void 0 ? defaultArr : _view$modeList;
  var items = useMemo(function () {
    return modeList.map(function (item) {
      return itemsMap[item];
    });
  }, [modeList]);
  var handleClick = function handleClick(e) {
    onChange === null || onChange === void 0 ? void 0 : onChange(e.key);
  };
  return /*#__PURE__*/React.createElement(Dropdown, {
    menu: {
      items: items,
      selectable: true,
      selectedKeys: value ? [value] : [defaultViewMode],
      onClick: handleClick
    },
    placement: "bottomRight"
  }, /*#__PURE__*/React.createElement(ButtonIcon, {
    isActive: false
  }, /*#__PURE__*/React.createElement(BarChartOutlined, {
    style: {
      cursor: "pointer",
      fontSize: 18
    }
  })));
};
export default ViewMode;