'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ContributionCard = undefined;

var _addPadding, _image, _lists, _addPadding2, _button;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _radium = require('radium');

var _radium2 = _interopRequireDefault(_radium);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _marger = require('kitten/components/layout/marger');

var _grid = require('kitten/components/grid/grid');

var _button2 = require('kitten/components/buttons/button');

var _starIcon = require('kitten/components/icons/star-icon');

var _title = require('kitten/components/typography/title');

var _text = require('kitten/components/typography/text');

var _paragraph = require('kitten/components/typography/paragraph');

var _iconBadge = require('kitten/components/notifications/icon-badge');

var _checkedIcon = require('kitten/components/icons/checked-icon');

var _horizontalStroke = require('kitten/components/layout/horizontal-stroke');

var _colorsConfig = require('kitten/constants/colors-config');

var _colorsConfig2 = _interopRequireDefault(_colorsConfig);

var _screenConfig = require('kitten/constants/screen-config');

var _mediaQueries = require('kitten/hoc/media-queries');

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

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; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Grid = (0, _radium2.default)(_grid.Grid);
var GridCol = (0, _radium2.default)(_grid.GridCol);
var Button = (0, _radium2.default)(_button2.Button);
var Title = (0, _radium2.default)(_title.Title);
var Text = (0, _radium2.default)(_text.Text);
var Paragraph = (0, _radium2.default)(_paragraph.Paragraph);
var IconBadge = (0, _radium2.default)(_iconBadge.IconBadge);
var HorizontalStroke = (0, _radium2.default)(_horizontalStroke.HorizontalStroke);

var ContributionCardComponent = function (_Component) {
  _inherits(ContributionCardComponent, _Component);

  function ContributionCardComponent() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, ContributionCardComponent);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ContributionCardComponent.__proto__ || Object.getPrototypeOf(ContributionCardComponent)).call.apply(_ref, [this].concat(args))), _this), _this.isTinyVersion = function () {
      return _this.props.version === 'tiny' || _this.props.viewportIsSOrLess;
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(ContributionCardComponent, [{
    key: 'render',
    value: function render() {
      // We need to destructure the props to prevent them to hydrate children components.
      var _props = this.props,
          isDisabled = _props.isDisabled,
          viewportIsSOrLess = _props.viewportIsSOrLess,
          viewportIsTabletOrLess = _props.viewportIsTabletOrLess,
          titleAmount = _props.titleAmount,
          titleDescription = _props.titleDescription,
          textDescription = _props.textDescription,
          titleContributors = _props.titleContributors,
          titleDelivery = _props.titleDelivery,
          titleAvailability = _props.titleAvailability,
          valueContributors = _props.valueContributors,
          valueDelivery = _props.valueDelivery,
          valueAvailability = _props.valueAvailability,
          button = _props.button,
          buttonOnMouseEnter = _props.buttonOnMouseEnter,
          buttonOnMouseLeave = _props.buttonOnMouseLeave,
          buttonOnClick = _props.buttonOnClick,
          myContribution = _props.myContribution,
          manageContribution = _props.manageContribution,
          manageContributionLink = _props.manageContributionLink,
          imageProps = _props.imageProps,
          titleTag = _props.titleTag,
          textTag = _props.textTag,
          render = _props.render,
          starred = _props.starred,
          starLabel = _props.starLabel,
          version = _props.version,
          others = _objectWithoutProperties(_props, ['isDisabled', 'viewportIsSOrLess', 'viewportIsTabletOrLess', 'titleAmount', 'titleDescription', 'textDescription', 'titleContributors', 'titleDelivery', 'titleAvailability', 'valueContributors', 'valueDelivery', 'valueAvailability', 'button', 'buttonOnMouseEnter', 'buttonOnMouseLeave', 'buttonOnClick', 'myContribution', 'manageContribution', 'manageContributionLink', 'imageProps', 'titleTag', 'textTag', 'render', 'starred', 'starLabel', 'version']);

      var styleCard = [others.style, styles.card];

      var cardAddPadding = this.isTinyVersion() ? styles.card.addPadding.tinyVersion : styles.card.addPadding;

      var cardImage = this.isTinyVersion() ? styles.card.image.tinyVersion : styles.card.image;

      var leftColumnProps = this.isTinyVersion() ? null : {
        'col-m': !imageProps.src ? 10 : 7,
        'col-l': 7
      };

      var rightColumnProps = this.isTinyVersion() ? null : {
        'col-m': 4,
        'offset-m': 1
      };

      return _react2.default.createElement(
        _radium.StyleRoot,
        _extends({}, others, { style: styleCard }),
        _react2.default.createElement(
          _marger.Marger,
          {
            bottom: this.isTinyVersion() ? 0 : 4,
            top: this.isTinyVersion() ? 3 : 4
          },
          _react2.default.createElement(
            Grid,
            { style: cardAddPadding },
            _react2.default.createElement(
              GridCol,
              leftColumnProps,
              this.renderDescription()
            ),
            imageProps.src && _react2.default.createElement(
              GridCol,
              _extends({}, rightColumnProps, { style: cardImage }),
              _react2.default.createElement(
                _marger.Marger,
                { bottom: !myContribution ? 2 : null },
                this.renderImage()
              )
            )
          ),
          this.isTinyVersion() && this.renderChoiceButton()
        )
      );
    }
  }, {
    key: 'renderDescription',
    value: function renderDescription() {
      var _props2 = this.props,
          titleAmount = _props2.titleAmount,
          titleDescription = _props2.titleDescription,
          textDescription = _props2.textDescription,
          titleTag = _props2.titleTag,
          textTag = _props2.textTag,
          starred = _props2.starred,
          starLabel = _props2.starLabel,
          isDisabled = _props2.isDisabled;


      var styleDescription = [isDisabled && styles.disabled];

      return _react2.default.createElement(
        _react.Fragment,
        null,
        _react2.default.createElement(
          'div',
          { style: styleDescription, disabled: isDisabled },
          starred && _react2.default.createElement(
            _marger.Marger,
            { bottom: '2' },
            _react2.default.createElement(
              Button,
              {
                icon: true,
                readonly: true,
                tag: 'span',
                size: 'tiny',
                modifier: 'lithium',
                style: { borderRadius: 5 }
              },
              _react2.default.createElement(_starIcon.StarIcon, { className: 'k-Button__icon is-readonly' }),
              starLabel
            )
          ),
          _react2.default.createElement(
            _marger.Marger,
            { top: starred ? 2 : 0, bottom: '2' },
            _react2.default.createElement(
              Title,
              {
                modifier: this.isTinyVersion() ? 'quaternary' : 'tertiary',
                italic: true,
                margin: false,
                tag: titleTag,
                style: styles.textColor
              },
              titleAmount
            )
          ),
          _react2.default.createElement(
            _marger.Marger,
            { top: '2', bottom: '3' },
            _react2.default.createElement(HorizontalStroke, { size: 'big' })
          ),
          titleDescription && _react2.default.createElement(
            _marger.Marger,
            { top: '3', bottom: '1' },
            _react2.default.createElement(
              Text,
              {
                color: 'font1',
                size: this.isTinyVersion() ? 'big' : 'huge',
                tag: textTag,
                weight: 'bold',
                style: styles.textMargin
              },
              titleDescription
            )
          ),
          _react2.default.createElement(
            _marger.Marger,
            { top: !titleDescription ? 3 : 1 },
            _react2.default.createElement(
              Paragraph,
              {
                style: styles.textColor,
                modifier: this.isTinyVersion() ? 'quaternary' : 'tertiary',
                margin: false
              },
              textDescription
            )
          )
        ),
        !!this.props.render && this.props.render(),
        this.renderInfos(),
        !this.isTinyVersion() && this.renderChoiceButton()
      );
    }
  }, {
    key: 'renderInfos',
    value: function renderInfos() {
      var _props3 = this.props,
          titleContributors = _props3.titleContributors,
          titleDelivery = _props3.titleDelivery,
          titleAvailability = _props3.titleAvailability,
          valueContributors = _props3.valueContributors,
          valueDelivery = _props3.valueDelivery,
          valueAvailability = _props3.valueAvailability,
          isDisabled = _props3.isDisabled;


      var styleInfos = [isDisabled && styles.disabled];

      if (!valueContributors && !valueDelivery && !valueAvailability) return;

      return _react2.default.createElement(
        'div',
        { style: styleInfos, disabled: isDisabled },
        _react2.default.createElement(
          _marger.Marger,
          {
            top: this.isTinyVersion() ? 2 : 3,
            bottom: this.isTinyVersion() ? 3 : 4
          },
          this.renderInfo(titleContributors, valueContributors),
          this.renderInfo(titleDelivery, valueDelivery),
          this.renderInfo(titleAvailability, valueAvailability)
        )
      );
    }
  }, {
    key: 'renderInfo',
    value: function renderInfo(title, value) {
      var viewportIsTabletOrLess = this.props.viewportIsTabletOrLess;


      if (!title) return;

      var infosLists = this.isTinyVersion() ? styles.infos.lists.tinyVersion : styles.infos.lists;

      return _react2.default.createElement(
        _react.Fragment,
        null,
        viewportIsTabletOrLess || this.isTinyVersion() && _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(
            Text,
            { color: 'font1', weight: 'regular', style: infosLists },
            title,
            ' ',
            _react2.default.createElement(
              Text,
              { color: 'font1', weight: 'light' },
              value
            )
          )
        ),
        !viewportIsTabletOrLess && !this.isTinyVersion() && _react2.default.createElement(
          Text,
          { color: 'font1', weight: 'regular', style: infosLists },
          title,
          ' ',
          _react2.default.createElement(
            Text,
            { color: 'font1', weight: 'light' },
            value
          )
        )
      );
    }
  }, {
    key: 'renderChoiceButton',
    value: function renderChoiceButton() {
      var _props4 = this.props,
          myContribution = _props4.myContribution,
          button = _props4.button;


      if (!button && !myContribution) return;

      return _react2.default.createElement(
        _react.Fragment,
        null,
        this.isTinyVersion() && _react2.default.createElement(
          _react.Fragment,
          null,
          myContribution && _react2.default.createElement(
            _marger.Marger,
            {
              top: !this.props.imageProps.src ? 0 : 2,
              bottom: !myContribution ? 0 : 2
            },
            this.renderMyContribution()
          ),
          this.renderButton()
        ),
        !this.isTinyVersion() && _react2.default.createElement(
          _marger.Marger,
          { top: '4' },
          this.renderButton(),
          myContribution && _react2.default.createElement(
            _marger.Marger,
            { top: !myContribution ? 0 : 2 },
            this.renderMyContribution()
          )
        )
      );
    }
  }, {
    key: 'renderButton',
    value: function renderButton() {
      var _props5 = this.props,
          button = _props5.button,
          buttonOnMouseEnter = _props5.buttonOnMouseEnter,
          buttonOnMouseLeave = _props5.buttonOnMouseLeave,
          buttonOnClick = _props5.buttonOnClick,
          myContribution = _props5.myContribution,
          isDisabled = _props5.isDisabled;


      var buttonMargin = this.isTinyVersion() || !myContribution ? null : 2;
      var buttonStyles = this.isTinyVersion() ? styles.button.tinyVersion : styles.button;

      if (!button) return;

      return _react2.default.createElement(
        _marger.Marger,
        { bottom: buttonMargin },
        _react2.default.createElement(
          Button,
          {
            size: 'big',
            modifier: 'helium',
            type: 'button',
            'aria-label': button,
            style: buttonStyles,
            onMouseEnter: buttonOnMouseEnter,
            onMouseLeave: buttonOnMouseLeave,
            onClick: buttonOnClick,
            disabled: isDisabled
          },
          button
        )
      );
    }
  }, {
    key: 'renderIconBadge',
    value: function renderIconBadge() {
      return _react2.default.createElement(
        IconBadge,
        { valid: true, style: styles.iconBadge },
        _react2.default.createElement(_checkedIcon.CheckedIcon, { className: 'k-IconBadge__svg' })
      );
    }
  }, {
    key: 'renderMyContribution',
    value: function renderMyContribution() {
      var _props6 = this.props,
          isDisabled = _props6.isDisabled,
          myContribution = _props6.myContribution,
          manageContribution = _props6.manageContribution,
          manageContributionLink = _props6.manageContributionLink;


      if (!myContribution || this.isTinyVersion() && isDisabled) return;

      var choiceButtonAddPadding = this.isTinyVersion() ? styles.choiceButton.addPadding.tinyVersion : styles.choiceButton.addPadding;

      return _react2.default.createElement(
        _react.Fragment,
        null,
        this.isTinyVersion() && _react2.default.createElement(
          Grid,
          { style: choiceButtonAddPadding },
          _react2.default.createElement(
            GridCol,
            null,
            _react2.default.createElement(
              'div',
              { style: styles.myContribution },
              this.renderIconBadge(),
              _react2.default.createElement(
                'div',
                { style: styles.myContribution.text },
                _react2.default.createElement(
                  Text,
                  { color: 'font1', size: 'tiny', weight: 'regular' },
                  myContribution,
                  _react2.default.createElement('br', null),
                  _react2.default.createElement(
                    Text,
                    {
                      tag: 'a',
                      href: manageContributionLink,
                      color: 'primary1',
                      weight: 'regular',
                      decoration: 'none'
                    },
                    manageContribution
                  )
                )
              )
            )
          )
        ),
        !this.isTinyVersion() && _react2.default.createElement(
          'div',
          { style: styles.myContribution },
          this.renderIconBadge(),
          _react2.default.createElement(
            'div',
            { style: styles.myContribution.text },
            _react2.default.createElement(
              Text,
              { color: 'font1', size: 'tiny', weight: 'regular' },
              myContribution,
              _react2.default.createElement('br', null),
              _react2.default.createElement(
                Text,
                {
                  tag: 'a',
                  href: manageContributionLink,
                  color: 'primary1',
                  weight: 'regular',
                  decoration: 'none'
                },
                manageContribution
              )
            )
          )
        )
      );
    }
  }, {
    key: 'renderImage',
    value: function renderImage() {
      var isDisabled = this.props.isDisabled;


      var styleImage = [isDisabled && styles.disabled];

      if (!this.props.imageProps.src) return;

      return _react2.default.createElement(
        'div',
        { style: styleImage, disabled: isDisabled },
        _react2.default.createElement('img', _extends({}, this.props.imageProps, { style: styles.image }))
      );
    }
  }]);

  return ContributionCardComponent;
}(_react.Component);

ContributionCardComponent.propTypes = {
  titleAmount: _propTypes2.default.string.isRequired,
  titleTag: _propTypes2.default.string,
  titleDescription: _propTypes2.default.string,
  textDescription: _propTypes2.default.string.isRequired,
  textTag: _propTypes2.default.string,

  button: _propTypes2.default.string,
  buttonOnMouseEnter: _propTypes2.default.func,
  buttonOnMouseLeave: _propTypes2.default.func,
  buttonOnClick: _propTypes2.default.func,

  myContribution: _propTypes2.default.string,
  manageContribution: _propTypes2.default.string,
  manageContributionLink: _propTypes2.default.string,

  isDisabled: _propTypes2.default.bool,
  starred: _propTypes2.default.bool,
  starLabel: _propTypes2.default.string,
  render: _propTypes2.default.func,

  version: _propTypes2.default.oneOf(['default', 'tiny'])
};
ContributionCardComponent.defaultProps = {
  titleDescription: '',
  titleTag: 'h1',
  textTag: 'p',
  imageProps: {
    src: '',
    alt: ''
  },
  button: '',
  buttonOnMouseEnter: function buttonOnMouseEnter() {},
  buttonOnMouseLeave: function buttonOnMouseLeave() {},
  buttonOnClick: function buttonOnClick() {},

  myContribution: '',
  manageContribution: '',
  manageContributionLink: '',

  isDisabled: false,
  starred: false,
  starLabel: '',
  render: function render() {},

  version: 'default'
};


var styles = {
  disabled: {
    filter: 'grayscale(1) opacity(.4)',
    cursor: 'not-allowed'
  },

  textColor: {
    color: _colorsConfig2.default.font1
  },

  card: {
    borderWidth: 2,
    borderStyle: 'solid',
    borderColor: _colorsConfig2.default.line1,

    addPadding: (_addPadding = {
      paddingLeft: 20,
      paddingRight: 20

    }, _defineProperty(_addPadding, '@media (min-width: ' + _screenConfig.ScreenConfig['S'].min + 'px)', {
      paddingLeft: 50,
      paddingRight: 50
    }), _defineProperty(_addPadding, '@media (min-width: ' + _screenConfig.ScreenConfig['M'].min + 'px)', {
      paddingLeft: 40,
      paddingRight: 0
    }), _defineProperty(_addPadding, '@media (min-width: ' + _screenConfig.ScreenConfig['L'].min + 'px)', {
      paddingLeft: 115,
      paddingRight: 0
    }), _defineProperty(_addPadding, 'tinyVersion', {
      paddingLeft: 20,
      paddingRight: 20
    }), _addPadding),

    image: (_image = {}, _defineProperty(_image, '@media (min-width: ' + _screenConfig.ScreenConfig['M'].min + 'px)', {
      paddingRight: 50
    }), _defineProperty(_image, 'tinyVersion', {
      paddingRight: 0
    }), _image)
  },

  textMargin: {
    margin: 0
  },

  infos: {
    lists: (_lists = {
      fontSize: 14

    }, _defineProperty(_lists, '@media (min-width: ' + _screenConfig.ScreenConfig['M'].min + 'px)', {
      fontSize: 16,
      marginRight: 30
    }), _defineProperty(_lists, 'tinyVersion', {
      fontSize: 14,
      marginRight: 0
    }), _lists)
  },

  choiceButton: {
    paddingLeft: 20,
    paddingRight: 20,

    addPadding: (_addPadding2 = {}, _defineProperty(_addPadding2, '@media (min-width: ' + _screenConfig.ScreenConfig['S'].min + 'px)', {
      paddingLeft: 50,
      paddingRight: 50
    }), _defineProperty(_addPadding2, 'tinyVersion', {
      paddingLeft: 20,
      paddingRight: 20
    }), _addPadding2)
  },

  myContribution: {
    display: 'flex',
    alignItems: 'center',

    text: {
      display: 'flex',
      lineHeight: 'normal'
    }
  },

  button: (_button = {}, _defineProperty(_button, '@media (max-width: ' + _screenConfig.ScreenConfig['S'].max + 'px)', {
    width: '100%'
  }), _defineProperty(_button, 'tinyVersion', {
    width: '100%'
  }), _button),

  iconBadge: {
    marginRight: 10
  },

  image: {
    width: '100%'
  }
};

var ContributionCard = exports.ContributionCard = (0, _mediaQueries.mediaQueries)((0, _radium2.default)(ContributionCardComponent), {
  viewportIsTabletOrLess: true,
  viewportIsSOrLess: true
});