"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = require("react");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _exotic = require("exotic");

var _createWarnTooManyClasses = _interopRequireDefault(require("../utils/createWarnTooManyClasses"));

var _validAttr = _interopRequireDefault(require("../utils/validAttr"));

var _isTag = _interopRequireDefault(require("../utils/isTag"));

var _isStyledComponent = _interopRequireDefault(require("../utils/isStyledComponent"));

var _getComponentName = _interopRequireDefault(require("../utils/getComponentName"));

var _determineTheme = _interopRequireDefault(require("../utils/determineTheme"));

var _escape = _interopRequireDefault(require("../utils/escape"));

var _constants = require("../constants");

var _ThemeProvider = require("./ThemeProvider");

var _StyleSheet = _interopRequireDefault(require("./StyleSheet"));

var _ServerStyleSheet = _interopRequireDefault(require("./ServerStyleSheet"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

// HACK for generating all static styles without needing to allocate
// an empty execution context every single time...
const STATIC_EXECUTION_CONTEXT = {};

var _default = (ComponentStyle, constructWithOptions) => {
  const identifiers = {};
  /* We depend on components having unique IDs */

  const generateId = (_displayName, parentComponentId) => {
    // cannot use isString, weird === oh it was !==
    const displayName = typeof _displayName !== 'string' ? 'sc' : (0, _escape.default)(_displayName);
    let componentId;
    /**
     * only fall back to hashing the component injection order if
     * a proper displayName isn't provided by the babel plugin
     */

    if (!_displayName) {
      const nr = (identifiers[displayName] || 0) + 1;
      identifiers[displayName] = nr;
      componentId = `${displayName}-${ComponentStyle.generateName(displayName + nr)}`;
    } else {
      componentId = `${displayName}-${ComponentStyle.generateName(displayName)}`;
    }

    return parentComponentId !== undefined ? `${parentComponentId}-${componentId}` : componentId;
  };

  class BaseStyledComponent extends _react.Component {
    constructor(...args) {
      var _temp;

      return _temp = super(...args), Object.defineProperty(this, "attrs", {
        configurable: true,
        enumerable: true,
        writable: true,
        value: {}
      }), Object.defineProperty(this, "state", {
        configurable: true,
        enumerable: true,
        writable: true,
        value: {
          theme: null,
          generatedClassName: ''
        }
      }), Object.defineProperty(this, "unsubscribeId", {
        configurable: true,
        enumerable: true,
        writable: true,
        value: -1
      }), _temp;
    }

    unsubscribeFromContext() {
      if (this.unsubscribeId !== -1) {
        this.context[_ThemeProvider.CHANNEL_NEXT].unsubscribe(this.unsubscribeId);
      }
    }

    buildExecutionContext(theme, props) {
      const attrs = this.constructor.attrs;

      const context = _objectSpread({}, props, {
        theme
      });

      if (attrs === undefined) {
        return context;
      }

      this.attrs = Object.keys(attrs).reduce((acc, key) => {
        const attr = attrs[key]; // eslint-disable-next-line no-param-reassign

        acc[key] = (0, _exotic.isFunction)(attr) ? attr(context) : attr;
        return acc;
      }, {});
      return _objectSpread({}, context, this.attrs);
    }

    generateAndInjectStyles(theme, props) {
      const _constructor = this.constructor,
            attrs = _constructor.attrs,
            componentStyle = _constructor.componentStyle,
            warnTooManyClasses = _constructor.warnTooManyClasses;
      const styleSheet = this.context[_constants.CONTEXT_KEY] || _StyleSheet.default.master; // staticaly styled-components don't need to build an execution context object,
      // and shouldn't be increasing the number of class names

      if (componentStyle.isStatic && attrs === undefined) {
        return componentStyle.generateAndInjectStyles(STATIC_EXECUTION_CONTEXT, styleSheet);
      } else {
        const executionContext = this.buildExecutionContext(theme, props);
        const className = componentStyle.generateAndInjectStyles(executionContext, styleSheet);

        if (process.env.NODE_ENV !== 'production' && warnTooManyClasses !== undefined) {
          warnTooManyClasses(className);
        }

        return className;
      }
    }

    componentWillMount() {
      const componentStyle = this.constructor.componentStyle;
      const styledContext = this.context[_ThemeProvider.CHANNEL_NEXT]; // If this is a staticaly-styled component, we don't need to the theme
      // to generate or build styles.

      if (componentStyle.isStatic) {
        const generatedClassName = this.generateAndInjectStyles(STATIC_EXECUTION_CONTEXT, this.props);
        this.setState({
          generatedClassName
        }); // If there is a theme in the context, subscribe to the event emitter. This
        // is necessary due to pure components blocking context updates, this circumvents
        // that by updating when an event is emitted
      } else if (styledContext !== undefined) {
        const subscribe = styledContext.subscribe;
        this.unsubscribeId = subscribe(nextTheme => {
          // This will be called once immediately
          const theme = (0, _determineTheme.default)(this.props, nextTheme, this.constructor.defaultProps);
          const generatedClassName = this.generateAndInjectStyles(theme, this.props);
          this.setState({
            theme,
            generatedClassName
          });
        });
      } else {
        // eslint-disable-next-line react/prop-types
        // const theme = this.props.theme || EMPTY_OBJ
        // maybe not pure?
        const theme = this.props.theme || {};
        const generatedClassName = this.generateAndInjectStyles(theme, this.props);
        this.setState({
          theme,
          generatedClassName
        });
      }
    }

    componentWillReceiveProps(nextProps) {
      // If this is a staticaly-styled component, we don't need to listen to
      // props changes to update styles
      const componentStyle = this.constructor.componentStyle;

      if (componentStyle.isStatic) {
        return;
      }

      this.setState(oldState => {
        const theme = (0, _determineTheme.default)(nextProps, oldState.theme, this.constructor.defaultProps);
        const generatedClassName = this.generateAndInjectStyles(theme, nextProps);
        return {
          theme,
          generatedClassName
        };
      });
    }

    componentWillUnmount() {
      this.unsubscribeFromContext();
    } // eslint-disable-next-line


    render() {
      // eslint-disable-next-line react/prop-types
      const innerRef = this.props.innerRef;
      const generatedClassName = this.state.generatedClassName;
      const _constructor2 = this.constructor,
            styledComponentId = _constructor2.styledComponentId,
            target = _constructor2.target;
      const isTargetTag = (0, _isTag.default)(target);
      const className = [// eslint-disable-next-line react/prop-types
      this.props.className, styledComponentId, this.attrs.className, generatedClassName].filter(Boolean).join(' ');

      const baseProps = _objectSpread({}, this.attrs, {
        className
      });

      if ((0, _isStyledComponent.default)(target)) {
        baseProps.innerRef = innerRef;
      } else {
        baseProps.ref = innerRef;
      }

      const propsForElement = Object.keys(this.props).reduce((acc, propName) => {
        // Don't pass through non HTML tags through to HTML elements
        // always omit innerRef
        if (propName !== 'innerRef' && propName !== 'className' && (!isTargetTag || (0, _validAttr.default)(propName))) {
          // eslint-disable-next-line no-param-reassign
          acc[propName] = this.props[propName];
        }

        return acc;
      }, baseProps);
      return (0, _react.createElement)(target, propsForElement);
    }

  }

  Object.defineProperty(BaseStyledComponent, "target", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: void 0
  });
  Object.defineProperty(BaseStyledComponent, "styledComponentId", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: void 0
  });
  Object.defineProperty(BaseStyledComponent, "attrs", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: void 0
  });
  Object.defineProperty(BaseStyledComponent, "componentStyle", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: void 0
  });
  Object.defineProperty(BaseStyledComponent, "warnTooManyClasses", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: void 0
  });

  const createStyledComponent = (target, options, rules) => {
    const _options$displayName = options.displayName,
          displayName = _options$displayName === void 0 ? (0, _isTag.default)(target) ? `styled.${target}` : `Styled(${(0, _getComponentName.default)(target)})` : _options$displayName,
          _options$componentId = options.componentId,
          componentId = _options$componentId === void 0 ? generateId(options.displayName, options.parentComponentId) : _options$componentId,
          _options$ParentCompon = options.ParentComponent,
          ParentComponent = _options$ParentCompon === void 0 ? BaseStyledComponent : _options$ParentCompon,
          extendingRules = options.rules,
          attrs = options.attrs;
    const styledComponentId = options.displayName && options.componentId ? `${(0, _escape.default)(options.displayName)}-${options.componentId}` : componentId;
    const componentStyle = new ComponentStyle(extendingRules === undefined ? rules : extendingRules.concat(rules), attrs, styledComponentId);
    /**
     * @todo this is where we change things like attrs
     */

    class StyledComponent extends ParentComponent {
      /**
       * @todo pr this, big issue - attrs can be undefined!
       */
      // static attrs() {
      //   if (isFunction(attrs)) {
      //     return attrs.apply(undefined, arguments)
      //   } else {
      //     return StyledComponent.extend.attrs.apply(undefined, arguments)
      //   }
      // }
      static withComponent(tag) {
        const previousComponentId = options.componentId,
              optionsToCopy = _objectWithoutProperties(options, ["componentId"]);

        const newComponentId = previousComponentId && `${previousComponentId}-${(0, _isTag.default)(tag) ? tag : (0, _escape.default)((0, _getComponentName.default)(tag))}`;

        const newOptions = _objectSpread({}, optionsToCopy, {
          componentId: newComponentId,
          ParentComponent: StyledComponent
        });

        return createStyledComponent(tag, newOptions, rules);
      }

      static get extend() {
        const rulesFromOptions = options.rules,
              parentComponentId = options.componentId,
              optionsToCopy = _objectWithoutProperties(options, ["rules", "componentId"]);

        const newRules = rulesFromOptions === undefined ? rules : rulesFromOptions.concat(rules);

        const newOptions = _objectSpread({}, optionsToCopy, {
          rules: newRules,
          parentComponentId,
          ParentComponent: StyledComponent
        });

        return constructWithOptions(createStyledComponent, target, newOptions);
      }

    }

    Object.defineProperty(StyledComponent, "contextTypes", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: {
        [_ThemeProvider.CHANNEL]: _propTypes.default.func,
        [_ThemeProvider.CHANNEL_NEXT]: _ThemeProvider.CONTEXT_CHANNEL_SHAPE,
        [_constants.CONTEXT_KEY]: _propTypes.default.oneOfType([// PropTypes.object,
        // PropTypes.object,
        _propTypes.default.instanceOf(_StyleSheet.default), _propTypes.default.instanceOf(_ServerStyleSheet.default)])
      }
    });
    Object.defineProperty(StyledComponent, "displayName", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: displayName
    });
    Object.defineProperty(StyledComponent, "styledComponentId", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: styledComponentId
    });
    Object.defineProperty(StyledComponent, "attrs", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: attrs
    });
    Object.defineProperty(StyledComponent, "componentStyle", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: componentStyle
    });
    Object.defineProperty(StyledComponent, "target", {
      configurable: true,
      enumerable: true,
      writable: true,
      value: target
    });

    if (process.env.NODE_ENV !== 'production') {
      StyledComponent.warnTooManyClasses = (0, _createWarnTooManyClasses.default)(displayName);
    }

    return StyledComponent;
  };

  return createStyledComponent;
};

exports.default = _default;