import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { action, set, toJS } from 'mobx';
import noop from 'lodash/noop';
import Collapse from '../../../../es/collapse';
import CollapsePanel from '../../../../es/collapse/CollapsePanel';
import ColumnGroups from './column-groups';
import { getColumnFixed, getColumnKey } from '../utils';
import DataSet from '../../data-set/DataSet';
import TableContext from '../TableContext';
import { $l } from '../../locale-context';
import Button from '../../button/Button';
import { ButtonColor, FuncType } from '../../button/enum';
import { Size } from '../../core/enum';
import Form from '../../form/Form';
import ObserverNumberField from '../../number-field/NumberField';
import ObserverSelectBox from '../../select-box/SelectBox';
import Option from '../../option/Option';
import { TableHeightType } from '../../table/enum';
import { LabelLayout } from '../../form/enum';
import { ShowHelp } from '../../field/enum';
import Icon from '../../icon';
import { treeReduce } from '../../_util/treeUtils';

function normalizeColumnsToTreeData(columns) {
  return treeReduce(columns, function (list, column, _sort, parentColumn) {
    return list.concat({
      key: getColumnKey(column),
      parentKey: parentColumn && getColumnKey(parentColumn),
      fixed: getColumnFixed(column.fixed),
      width: column.width,
      title: column.title,
      header: column.header,
      hidden: column.hidden,
      sort: column.sort,
      titleEditable: column.titleEditable,
      hideable: column.hideable
    });
  }, []);
}

function diff() {
  var height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

  if (typeof document !== 'undefined') {
    return document.documentElement.clientHeight - height;
  }

  return 0;
}

var HEIGHT_CHANGE_KEY = '__heightChange__';

var CustomizationSettings = function CustomizationSettings(props) {
  var modal = props.modal;

  var _ref = modal || {
    update: noop,
    handleOk: noop
  },
      handleOk = _ref.handleOk,
      handleCancel = _ref.handleCancel;

  var _useContext = useContext(TableContext),
      tableStore = _useContext.tableStore;

  var originalColumns = tableStore.originalColumns,
      customized = tableStore.customized,
      prefixCls = tableStore.proPrefixCls;

  var _useState = useState(originalColumns),
      _useState2 = _slicedToArray(_useState, 2),
      customizedColumns = _useState2[0],
      setCustomizedColumns = _useState2[1];

  var tableRecord = useMemo(function () {
    return new DataSet({
      data: [{
        heightType: tableStore.heightType,
        height: tableStore.totalHeight,
        heightDiff: diff(tableStore.totalHeight)
      }],
      events: {
        update: function update(_ref2) {
          var record = _ref2.record,
              name = _ref2.name,
              value = _ref2.value;
          record.setState(HEIGHT_CHANGE_KEY, (record.getState(HEIGHT_CHANGE_KEY) || 0) + 1);
          var tempCustomized = tableStore.tempCustomized;

          if (tempCustomized) {
            set(tempCustomized, name, value);

            if (name === 'heightType') {
              if (value === TableHeightType.fixed) {
                set(tempCustomized, 'height', record.get('height'));
              } else if (value === TableHeightType.flex) {
                set(tempCustomized, 'heightDiff', record.get('heightDiff'));
              }
            } else if (name === 'height' && record.get('heightType') === TableHeightType.fixed) {
              record.set('heightDiff', diff(value));
              set(tempCustomized, 'heightType', TableHeightType.fixed);
            } else if (name === 'heightDiff' && record.get('heightType') === TableHeightType.flex) {
              record.set('height', diff(value));
              set(tempCustomized, 'heightType', TableHeightType.flex);
            }
          }

          record.setState(HEIGHT_CHANGE_KEY, record.getState(HEIGHT_CHANGE_KEY) - 1);

          if (record.getState(HEIGHT_CHANGE_KEY) === 0) {
            tableStore.node.handleHeightTypeChange();
            record.setState(HEIGHT_CHANGE_KEY, undefined);
          }
        }
      }
    }).current;
  }, [tableStore]);
  var columnDataSet = useMemo(function () {
    return new DataSet({
      data: normalizeColumnsToTreeData(customizedColumns),
      paging: false,
      primaryKey: 'key',
      idField: 'key',
      parentField: 'parentKey',
      fields: [{
        name: 'fixed',
        group: true
      }],
      events: {
        update: function update(_ref3) {
          var record = _ref3.record,
              name = _ref3.name,
              value = _ref3.value;

          if (name === 'hidden') {
            var records = record.children;

            if (records) {
              records.forEach(function (child) {
                return child.set(name, value);
              });
            }
          }

          var tempCustomized = tableStore.tempCustomized;

          if (tempCustomized) {
            var key = record.key;

            if (!tempCustomized.columns[key]) {
              tempCustomized.columns[key] = {};
            }

            tempCustomized.columns[key][name] = value;
          }
        }
      }
    });
  }, [customizedColumns, tableStore]);
  var handleRestoreTable = useCallback(action(function (e) {
    e.stopPropagation();
    var originalHeightType = tableStore.originalHeightType;
    tableStore.node.handleHeightTypeChange();
    tableRecord.init({
      heightType: originalHeightType,
      height: tableStore.totalHeight,
      heightDiff: diff(tableStore.totalHeight)
    });
  }), [tableRecord, tableStore]);
  var handleRestoreColumns = useCallback(action(function (e) {
    e.stopPropagation();
    var _tableStore$node$prop = tableStore.node.props.columns,
        columns = _tableStore$node$prop === void 0 ? [] : _tableStore$node$prop;
    setCustomizedColumns(columns.map(function (column) {
      var fixed = getColumnFixed(column.fixed);
      var hidden = column.hidden || false;
      return _objectSpread(_objectSpread({}, column), {}, {
        fixed: fixed,
        hidden: hidden
      });
    }));
    tableStore.tempCustomized.columns = {};
  }), [tableRecord, tableStore]);
  var handleOption = useCallback(function () {
    return {
      className: "".concat(prefixCls, "-customization-option")
    };
  }, [prefixCls]);
  var handleCollapseChange = useCallback(action(function (key) {
    tableStore.customizedActiveKey = [].concat(key);
  }), [tableStore]);
  useEffect(action(function () {
    tableStore.tempCustomized = _objectSpread({
      height: tableStore.totalHeight,
      heightDiff: diff(tableStore.totalHeight)
    }, toJS(customized));
  }), [tableStore]);
  useEffect(function () {
    if (handleOk) {
      handleOk(action(function () {
        var tempCustomized = tableStore.tempCustomized;
        tableStore.tempCustomized = {
          columns: {}
        };
        tableStore.saveCustomized(tempCustomized);
        tableStore.initColumns();
        tableStore.node.handleHeightTypeChange();
      }));
    }

    if (handleCancel) {
      handleCancel(action(function () {
        tableStore.tempCustomized = {
          columns: {}
        };
        tableStore.node.handleHeightTypeChange();
      }));
    }
  }, [handleOk, handleCancel, columnDataSet, tableStore]);
  var renderIcon = useCallback(function (_ref4) {
    var isActive = _ref4.isActive;
    return /*#__PURE__*/React.createElement(Icon, {
      type: isActive ? 'expand_more' : 'navigate_next'
    });
  }, []);
  var tableHeightType = tableRecord.get('heightType');
  return /*#__PURE__*/React.createElement(Collapse, {
    activeKey: tableStore.customizedActiveKey.slice(),
    onChange: handleCollapseChange,
    expandIcon: renderIcon,
    expandIconPosition: "text-right",
    className: "".concat(prefixCls, "-customization"),
    ghost: true
  }, /*#__PURE__*/React.createElement(CollapsePanel, {
    header: /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-customization-panel-title")
    }, $l('Table', 'table_settings')),
    key: "table",
    extra: /*#__PURE__*/React.createElement(Button, {
      className: "".concat(prefixCls, "-customization-header-button"),
      color: ButtonColor.primary,
      funcType: FuncType.flat,
      size: Size.small,
      onClick: handleRestoreTable
    }, $l('Table', 'restore_default'))
  }, /*#__PURE__*/React.createElement(Form, {
    className: "".concat(prefixCls, "-customization-form"),
    record: tableRecord,
    labelLayout: LabelLayout["float"]
  }, /*#__PURE__*/React.createElement(ObserverSelectBox, {
    vertical: true,
    name: "heightType",
    label: $l('Table', 'height_settings'),
    onOption: handleOption
  }, /*#__PURE__*/React.createElement(Option, {
    value: TableHeightType.auto
  }, $l('Table', 'auto_height')), /*#__PURE__*/React.createElement(Option, {
    value: TableHeightType.fixed
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-customization-option-label")
  }, $l('Table', 'fixed_height')), /*#__PURE__*/React.createElement(ObserverNumberField, {
    className: "".concat(prefixCls, "-customization-option-input"),
    labelLayout: LabelLayout.none,
    name: "height",
    disabled: tableHeightType !== TableHeightType.fixed,
    step: 1
  })), /*#__PURE__*/React.createElement(Option, {
    value: TableHeightType.flex
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-customization-option-label")
  }, $l('Table', 'flex_height')), /*#__PURE__*/React.createElement(ObserverNumberField, {
    groupClassName: "".concat(prefixCls, "-customization-option-input"),
    labelLayout: LabelLayout.none,
    name: "heightDiff",
    disabled: tableHeightType !== TableHeightType.flex,
    showHelp: ShowHelp.tooltip,
    help: $l('Table', 'flex_height_help'),
    step: 1
  }))))), /*#__PURE__*/React.createElement(CollapsePanel, {
    header: /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-customization-panel-title")
    }, $l('Table', 'column_settings')),
    key: "columns",
    extra: /*#__PURE__*/React.createElement(Button, {
      className: "".concat(prefixCls, "-customization-header-button"),
      color: ButtonColor.primary,
      funcType: FuncType.flat,
      size: Size.small,
      onClick: handleRestoreColumns
    }, $l('Table', 'restore_default'))
  }, /*#__PURE__*/React.createElement(ColumnGroups, {
    dataSet: columnDataSet
  })));
};

CustomizationSettings.displayName = 'CustomizationSettings';
export default observer(CustomizationSettings);
//# sourceMappingURL=CustomizationSettings.js.map
