"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _slateReact = require("slate-react");
var _reactI18next = require("react-i18next");
var _commons = require("../../commons");
var _column = require("./constants/column");
var _helpers = require("./helpers");
var _constants = require("../../../constants");
const NOT_SUPPORT_COLUMN_TYPES = ['button', 'file'];
const Column = _ref => {
  let {
    attributes,
    children,
    element
  } = _ref;
  const editor = (0, _slateReact.useSlateStatic)();
  const isSelected = (0, _slateReact.useSelected)();
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
  const columns = (0, _react.useMemo)(() => {
    if (!editor.columns) return [];
    return editor.columns.filter(column => !NOT_SUPPORT_COLUMN_TYPES.includes(column.type));
  }, [editor.columns]);
  const options = (0, _react.useMemo)(() => {
    return columns.map(item => {
      const iconClass = _column.COLUMNS_ICON_CONFIG[item.type];
      return {
        value: item.key,
        label: item.name,
        bold: false,
        italic: false,
        iconClass
      };
    });
  }, [columns]);
  const onColumnChanged = (0, _react.useCallback)(option => {
    const {
      data
    } = element;
    const {
      value: key,
      label: name,
      bold,
      italic
    } = option;
    const newData = {
      ...data,
      ...{
        key,
        name,
        bold,
        italic
      }
    };
    (0, _helpers.setSeaTableColumn)(editor, newData);
  }, [editor, element]);
  const defaultValue = (0, _react.useMemo)(() => {
    const {
      data
    } = element || {}; // column model
    const column = (0, _helpers.getColumnByKey)(columns, data.key);
    const value = column && column.key || '';
    const optionIndex = options.findIndex(item => item.value === value);
    if (optionIndex === -1) return null;

    // used the old properties
    const option = options[optionIndex];
    const currentOption = {
      ...option,
      ...{
        bold: data.bold,
        italic: data.italic
      }
    };
    options.splice(optionIndex, 1, currentOption);
    return currentOption;
  }, [columns, element, options]);
  const props = {
    isSelected: isSelected,
    placeholder: t('Select_field'),
    value: defaultValue,
    options,
    onChange: onColumnChanged
  };
  return /*#__PURE__*/_react.default.createElement("span", attributes, /*#__PURE__*/_react.default.createElement(_commons.Select, props), children);
};
const renderColumn = props => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const isReadOnly = (0, _slateReact.useReadOnly)();
  if (isReadOnly) {
    const {
      attributes,
      element
    } = props;
    const data = element.data || {};
    const columnName = data.name;
    const displayValue = columnName ? `{${columnName}}` : '';
    return /*#__PURE__*/_react.default.createElement("span", attributes, displayValue);
  }
  return /*#__PURE__*/_react.default.createElement(Column, props);
};
var _default = exports.default = renderColumn;