import { Form } from "antd";
import React, { useMemo } from "react";
import Filter from "../../filter";
import Sort from "../../sort";
import Buttons from "../Header/Buttons";
import ColumnsSetting from "./component/ColumnsSetting";
import ExportImport from "./component/ExportImport";
import GallerySetting from "./component/GallerySetting";
import Group from "./component/Group";
import ViewMode from "./component/ViewMode";
import useIsMobileTable from "../hooks/useIsMobileTable";
import "./index.less";
var Actions = function Actions(_ref) {
  var filter = _ref.filter,
    sort = _ref.sort,
    columnSetting = _ref.columnSetting,
    dataSourceGroup = _ref.dataSourceGroup,
    tableId = _ref.tableId,
    localPagination = _ref.localPagination,
    buttons = _ref.buttons,
    view = _ref.view,
    gallery = _ref.gallery,
    exportImport = _ref.exportImport;
  var form = Form.useFormInstance();
  var isMobileBool = useIsMobileTable();
  var viewMode = Form.useWatch("view_mode", {
    form: form,
    preserve: true
  });
  var showActions = useMemo(function () {
    if ( /*#__PURE__*/React.isValidElement(filter) || /*#__PURE__*/React.isValidElement(filter === null || filter === void 0 ? void 0 : filter.dom)) {
      return true;
    }
    return (filter === null || filter === void 0 ? void 0 : filter.show) || (sort === null || sort === void 0 ? void 0 : sort.show) || (columnSetting === null || columnSetting === void 0 ? void 0 : columnSetting.show) || (dataSourceGroup === null || dataSourceGroup === void 0 ? void 0 : dataSourceGroup.show) || view.multiple || (exportImport === null || exportImport === void 0 ? void 0 : exportImport.show);
  }, [filter === null || filter === void 0 ? void 0 : filter.show, sort === null || sort === void 0 ? void 0 : sort.show, columnSetting === null || columnSetting === void 0 ? void 0 : columnSetting.show, dataSourceGroup === null || dataSourceGroup === void 0 ? void 0 : dataSourceGroup.show, view.multiple, exportImport === null || exportImport === void 0 ? void 0 : exportImport.show]);
  var filterRender = useMemo(function () {
    if ( /*#__PURE__*/React.isValidElement(filter)) {
      return filter;
    }
    if ( /*#__PURE__*/React.isValidElement(filter === null || filter === void 0 ? void 0 : filter.dom)) {
      return filter.dom;
    }
    return /*#__PURE__*/React.createElement(Filter, {
      filter: filter,
      isRenderFormContent: false,
      tableId: tableId,
      viewMode: viewMode,
      isMobile: isMobileBool
    });
  }, [filter, tableId, viewMode, isMobileBool]);
  return showActions ? /*#__PURE__*/React.createElement("div", {
    className: "materials-grid-actions"
  }, /*#__PURE__*/React.createElement("div", {
    className: "left-wrap"
  }, filterRender), /*#__PURE__*/React.createElement("div", {
    className: "right-wrap",
    style: {
      columnGap: isMobileBool ? 0 : 12
    }
  }, view.multiple && /*#__PURE__*/React.createElement(Form.Item, {
    name: "view_mode",
    noStyle: true
  }, /*#__PURE__*/React.createElement(ViewMode, {
    view: view
  })), exportImport !== null && exportImport !== void 0 && exportImport.show ? /*#__PURE__*/React.createElement(ExportImport, {
    exportImport: exportImport
  }) : null, (dataSourceGroup === null || dataSourceGroup === void 0 ? void 0 : dataSourceGroup.show) && viewMode === "grid" && /*#__PURE__*/React.createElement(Form.Item, {
    name: "group_by",
    noStyle: true
  }, /*#__PURE__*/React.createElement(Group, {
    setting: dataSourceGroup
  })), (columnSetting === null || columnSetting === void 0 ? void 0 : columnSetting.show) && viewMode === "grid" && /*#__PURE__*/React.createElement(Form.Item, {
    name: ["column_setting"],
    noStyle: true
  }, /*#__PURE__*/React.createElement(ColumnsSetting, null)), (columnSetting === null || columnSetting === void 0 ? void 0 : columnSetting.show) && viewMode === "gallery" && /*#__PURE__*/React.createElement(GallerySetting, {
    setting: gallery,
    currentViewMode: viewMode
  }), sort !== null && sort !== void 0 && sort.show ? /*#__PURE__*/React.createElement(Form.Item, {
    name: "order_by",
    noStyle: true
  }, /*#__PURE__*/React.createElement(Sort, {
    list: (sort === null || sort === void 0 ? void 0 : sort.list) || [],
    localPagination: localPagination
  })) : null, !!(buttons !== null && buttons !== void 0 && buttons.length) && /*#__PURE__*/React.createElement(Buttons, {
    list: buttons,
    style: isMobileBool ? {
      marginLeft: 8
    } : {}
  }))) : null;
};
export default Actions;