import _Drawer from "@alifd/next/es/drawer";
import _Button from "@alifd/next/es/button";
import _Table from "@alifd/next/es/table";
import _Icon from "@alifd/next/es/icon";
import _Switch from "@alifd/next/es/switch";
import _Checkbox from "@alifd/next/es/checkbox";
import _Message from "@alifd/next/es/message";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React from "react";
import cloneDeep from 'lodash/cloneDeep';
import isEqual from 'lodash/isEqual';
function getSelectedRowKeys(columns) {
  if (columns === void 0) {
    columns = [];
  }
  var selectedRowKeys = [];
  columns && columns.forEach(function (item) {
    var hidden = item.hidden,
      dataKey = item.dataKey;
    if (!hidden && dataKey) {
      selectedRowKeys.push(dataKey);
    }
  });
  return selectedRowKeys;
}
var WebCustomColumnDrawer = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(WebCustomColumnDrawer, _React$Component);
  function WebCustomColumnDrawer(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    var columns = _this.props.columns;
    _this.state = {
      defaultColumns: cloneDeep(columns),
      currentColumns: cloneDeep(columns)
    };
    return _this;
  }
  var _proto = WebCustomColumnDrawer.prototype;
  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var defaultColumns = this.state.defaultColumns;
    var nextColumns = nextProps.columns;
    if (!isEqual(defaultColumns, nextColumns)) {
      this.setState({
        defaultColumns: cloneDeep(nextColumns),
        currentColumns: cloneDeep(nextColumns)
      });
    }
  };
  _proto.isHidden = function isHidden(dataKey) {
    var _this$state$currentCo = this.state.currentColumns,
      currentColumns = _this$state$currentCo === void 0 ? [] : _this$state$currentCo;
    var column = currentColumns.find(function (item) {
      return item.dataKey === dataKey;
    });
    return column ? !!column.hidden : false;
  };
  _proto.isLocked = function isLocked(dataKey) {
    var _this$state$currentCo2 = this.state.currentColumns,
      currentColumns = _this$state$currentCo2 === void 0 ? [] : _this$state$currentCo2;
    var column = currentColumns.find(function (item) {
      return item.dataKey === dataKey;
    });
    var lock = column && column.lock;
    if (lock === "none") {
      lock = undefined;
    }
    return !!lock;
  };
  _proto.isAllColumnsShown = function isAllColumnsShown() {
    var _this$state$currentCo3 = this.state.currentColumns,
      currentColumns = _this$state$currentCo3 === void 0 ? [] : _this$state$currentCo3;
    return !currentColumns.some(function (item) {
      return item.hidden;
    });
  };
  _proto.handleCheck = function handleCheck(checked, dataKey) {
    var _this$state$currentCo4 = this.state.currentColumns,
      currentColumns = _this$state$currentCo4 === void 0 ? [] : _this$state$currentCo4;
    var column = currentColumns.find(function (item) {
      return item.dataKey === dataKey;
    });
    if (column) {
      column.hidden = !checked;
      column.lock = false;
      this.forceUpdate();
    }
  };
  _proto.handleLock = function handleLock(checked, dataKey) {
    var _this$state$currentCo5 = this.state.currentColumns,
      currentColumns = _this$state$currentCo5 === void 0 ? [] : _this$state$currentCo5;
    var column = currentColumns.find(function (item) {
      return item.dataKey === dataKey;
    });
    if (column) {
      column.lock = checked ? 'left' : undefined;
      this.forceUpdate();
    }
  };
  _proto.restoreDefault = function restoreDefault() {
    var defaultColumns = this.state.defaultColumns;
    this.setState({
      currentColumns: cloneDeep(defaultColumns)
    });
  };
  _proto.handleOk = function handleOk() {
    var _this$state$currentCo6 = this.state.currentColumns,
      currentColumns = _this$state$currentCo6 === void 0 ? [] : _this$state$currentCo6;
    var _this$props = this.props,
      onOk = _this$props.onOk,
      _this$props$locale = _this$props.locale,
      locale = _this$props$locale === void 0 ? {} : _this$props$locale;
    var shownCount = 0;
    var fixedCount = 0;
    currentColumns.forEach(function (colums) {
      var lock = colums.lock,
        hidden = colums.hidden;
      if (!hidden) {
        shownCount++;
      }
      if (lock && lock != "none") {
        fixedCount++;
      }
    });
    if (currentColumns.length >= 2 && shownCount < 2) {
      _Message.error(locale.tipLeastColumns);
      return;
    }
    onOk && onOk(currentColumns);
  };
  _proto.handleCheckAll = function handleCheckAll(checked) {
    var _this$state$currentCo7 = this.state.currentColumns,
      currentColumns = _this$state$currentCo7 === void 0 ? [] : _this$state$currentCo7;
    currentColumns.forEach(function (item) {
      return item.hidden = !checked;
    });
    this.forceUpdate();
  };
  _proto.renderColumnShown = function renderColumnShown(value, record, hasCheckbox) {
    var _this2 = this;
    var nextTablePrefix = this.props.nextTablePrefix;
    var dataKey = record.dataKey;
    return /*#__PURE__*/React.createElement("div", {
      className: nextTablePrefix + "cell-wrap"
    }, hasCheckbox ? /*#__PURE__*/React.createElement(_Checkbox, {
      className: nextTablePrefix + "cell-checkbox",
      onChange: function onChange(checked) {
        _this2.handleCheck(checked, dataKey);
      },
      checked: !this.isHidden(dataKey)
    }) : null, /*#__PURE__*/React.createElement("span", {
      className: nextTablePrefix + "cell"
    }, value));
  };
  _proto.renderColumnFixed = function renderColumnFixed(value, rowIndex, record) {
    var _this3 = this;
    var dataKey = record.dataKey;
    return this.isHidden(dataKey) ? null : /*#__PURE__*/React.createElement(_Switch, {
      checked: this.isLocked(dataKey),
      onChange: function onChange(checked) {
        _this3.handleLock(checked, dataKey);
      }
    });
  };
  _proto.render = function render() {
    var _this4 = this;
    var _this$props2 = this.props,
      nextTablePrefix = _this$props2.nextTablePrefix,
      onClose = _this$props2.onClose,
      visible = _this$props2.visible,
      _this$props2$locale = _this$props2.locale,
      locale = _this$props2$locale === void 0 ? {} : _this$props2$locale;
    var _this$state$currentCo8 = this.state.currentColumns,
      currentColumns = _this$state$currentCo8 === void 0 ? [] : _this$state$currentCo8;
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Drawer, {
      className: nextTablePrefix + "web-custom-column-drawer",
      width: "400px",
      height: "100%",
      visible: visible,
      placement: "right",
      closeable: "mask,esc",
      onClose: onClose
    }, /*#__PURE__*/React.createElement("div", {
      className: nextTablePrefix + "title"
    }, /*#__PURE__*/React.createElement("div", {
      className: nextTablePrefix + "title-txt"
    }, locale.customColumn), /*#__PURE__*/React.createElement(_Icon, {
      className: nextTablePrefix + "close",
      type: "close",
      size: "medium",
      onClick: onClose
    })), /*#__PURE__*/React.createElement("div", {
      className: nextTablePrefix + "center"
    }, /*#__PURE__*/React.createElement(_Table, {
      style: {
        margin: '12px'
      },
      dataSource: currentColumns.filter(function (item) {
        return !item.isGroup;
      }),
      hasBorder: false,
      primaryKey: "dataKey",
      rowSelection: {
        selectedRowKeys: getSelectedRowKeys(currentColumns),
        onSelectAll: function onSelectAll(selected) {
          _this4.handleCheckAll(selected);
        },
        onSelect: function onSelect(selected, records) {
          var dataKey = records.dataKey;
          _this4.handleCheck(selected, dataKey);
        }
      }
    }, /*#__PURE__*/React.createElement(_Table.Column, {
      cell: function cell(value, index, record) {
        return _this4.renderColumnShown(value, record, false);
      },
      title: locale.showColumn,
      dataIndex: "title",
      width: "60%"
    }), /*#__PURE__*/React.createElement(_Table.Column, {
      cell: this.renderColumnFixed.bind(this),
      title: locale.stickColumn,
      dataIndex: "lock",
      width: "40%"
    }))), /*#__PURE__*/React.createElement("div", {
      className: nextTablePrefix + "bottom"
    }, /*#__PURE__*/React.createElement(_Button, {
      className: nextTablePrefix + "button",
      onClick: onClose
    }, locale.cancel), /*#__PURE__*/React.createElement(_Button, {
      className: nextTablePrefix + "button",
      onClick: this.restoreDefault.bind(this)
    }, locale.restoreDefault), /*#__PURE__*/React.createElement(_Button, {
      style: {
        width: 80
      },
      type: "primary",
      onClick: this.handleOk.bind(this)
    }, locale.submit))));
  };
  return WebCustomColumnDrawer;
}(React.Component);
WebCustomColumnDrawer.defaultProps = {
  columns: []
};
export { WebCustomColumnDrawer as default };