import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import React from 'react';
import { globalObject } from '@skbkontur/global-object';
import { MaskCharLowLine } from "../../../internal/MaskCharLowLine";
import { InternalDateValidator } from "../../../lib/date/InternalDateValidator";
import { InternalDateComponentType } from "../../../lib/date/types";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { cx } from "../../../lib/theming/Emotion";
import { styles } from "../DateFragmentsView.styles";
export var DateFragmentsView = /*#__PURE__*/function (_React$Component) {
  function DateFragmentsView() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.rootNode = null;
    _this.isFragment = function (el) {
      if (_this.rootNode) {
        // NOTE: NodeList doesn't support method 'forEach' in IE11
        var fragments = Array.from(_this.rootNode.querySelectorAll('[data-fragment]'));
        return fragments.some(function (fragment) {
          return fragment === el || fragment.contains(el);
        });
      }
      return false;
    };
    _this.getRootNode = function () {
      return _this.rootNode;
    };
    _this.rootRef = function (el) {
      _this.rootNode = el;
    };
    return _this;
  }
  _inheritsLoose(DateFragmentsView, _React$Component);
  var _proto = DateFragmentsView.prototype;
  _proto.render = function render() {
    var _this2 = this;
    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
      _this2.theme = theme;
      return _this2.renderMain();
    });
  };
  _proto.renderMain = function renderMain() {
    var _cx,
      _this3 = this;
    return /*#__PURE__*/React.createElement("span", {
      ref: this.rootRef,
      className: cx((_cx = {}, _cx[styles.root()] = true, _cx[styles.selected(this.theme)] = true, _cx))
    }, this.props.fragments.map(function (fragment, index) {
      return fragment.type === InternalDateComponentType.Separator ? _this3.renderSeparator(fragment, index) : _this3.renderDateComponent(fragment, index);
    }));
  };
  _proto.renderSeparator = function renderSeparator(fragment, index) {
    var _cx2;
    var separatorClassName = cx((_cx2 = {}, _cx2[styles.mask(this.theme)] = true, _cx2[styles.delimiterFilled()] = this.props.fragments[index + 1].value !== null, _cx2));
    return /*#__PURE__*/React.createElement("span", {
      key: index,
      className: separatorClassName
    }, fragment.value);
  };
  _proto.renderDateComponent = function renderDateComponent(fragment, index) {
    var _this$props = this.props,
      inputMode = _this$props.inputMode,
      onSelectDateComponent = _this$props.onSelectDateComponent,
      selected = _this$props.selected;
    var type = fragment.type,
      value = fragment.value,
      length = fragment.length,
      valueWithPad = fragment.valueWithPad;
    var getValueMask = function getValueMask() {
      if (value === null || selected === type && inputMode) {
        return value;
      }
      return valueWithPad || value;
    };
    var valueMask = getValueMask();
    var lengthMask = InternalDateValidator.testParseToNumber(valueMask) ? Math.max(length - valueMask.toString().length, 0) : length;
    var handleMouseUp = function handleMouseUp(e) {
      var _globalObject$documen;
      if ((_globalObject$documen = globalObject.document) != null && (_globalObject$documen = _globalObject$documen.activeElement) != null && _globalObject$documen.contains(e.currentTarget)) {
        onSelectDateComponent(type, e);
      }
    };
    return /*#__PURE__*/React.createElement("span", {
      key: index,
      "data-fragment": "",
      onMouseUp: handleMouseUp
    }, valueMask, /*#__PURE__*/React.createElement("span", {
      "data-tid": "DateFragmentsView__placeholder",
      className: styles.mask(this.theme)
    }, Array(lengthMask).fill('').map(function (_, i) {
      return /*#__PURE__*/React.createElement(MaskCharLowLine, {
        key: i
      });
    })));
  };
  return DateFragmentsView;
}(React.Component);