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

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

import React from 'react';
import { If, Then, Else } from 'react-if';
import AppIcon from '../app-icon';
import { Block, Col, Row } from 'jsxstyle';

import * as fonts from '../../mixins/fonts';
import * as sizes from '../../mixins/sizes';
import { subpixelAntialiasedFonts } from '../../mixins/font-smoothing';
import * as colors from '../../mixins/colors';
import Link from '../link';
import * as tileDimensions from './dimensions';
import prefixKeys from '../../utilities/prefix-object-keys';
import { paths } from '../../utilities/routes';
var APPS_BASE_PATH = paths.APPS_BASE_PATH,
    CF_DASHBOARD_BASE_PATH = paths.CF_DASHBOARD_BASE_PATH;

var tileImageHeight = 134;

var AppTile = function (_React$Component) {
    _inherits(AppTile, _React$Component);

    function AppTile() {
        _classCallCheck(this, AppTile);

        return _possibleConstructorReturn(this, (AppTile.__proto__ || Object.getPrototypeOf(AppTile)).apply(this, arguments));
    }

    _createClass(AppTile, [{
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                app = _props.app,
                recommendedCategory = _props.recommendedCategory,
                style = _props.style;

            var commonTrackData = {
                category: 'Promo Banner',
                label: recommendedCategory ? recommendedCategory.id : ''
            };
            var Container = function Container(_ref) {
                var children = _ref.children;
                return React.createElement(Col, Object.assign({}, subpixelAntialiasedFonts, { style: style }, prefixKeys('after', {
                    position: 'absolute',
                    content: '""',
                    display: 'block',
                    pointerEvents: 'none',
                    border: '1px solid ' + 'rgba(0,0,0,0.1)',
                    zIndex: 1,
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0
                }), { background: '#f8f8f8', color: '#000', flex: '0 0 auto', fontFamily: fonts.sansSerif, fontSize: sizes.baseFontSize, lineHeight: 1.5, position: 'relative', width: tileDimensions.width, pointerEvents: app._placeholder ? 'none' : 'auto', props: {
                        'data-app-id': app.id,
                        'data-component': 'app-tile',
                        title: _this2.appTitle
                    } }), children);
            };
            return React.createElement(Container, null, React.createElement(Link, Object.assign({ props: {
                    href: this.appURL,
                    target: '_blank'
                }, track: Object.assign({}, commonTrackData, { action: 'Routed to app via app icon' }), position: 'relative', hoverBackground: colors.lighterGray }, prefixKeys('before', {
                content: '""',
                position: 'absolute',
                display: 'block',
                pointerEvents: 'none',
                border: '2px solid ' + colors.linkBlue,
                borderColor: app.color,
                boxShadow: 'inset 0 0 0 3px #fff',
                zIndex: 1,
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
                opacity: 0,
                transition: 'opacity .2s'
            }), prefixKeys('after', {
                content: '""',
                position: 'absolute',
                display: 'block',
                pointerEvents: 'none',
                border: '1px solid rgba(0,0,0, .05)',
                zIndex: 1,
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
                hoverBackground: 'hsla(0 , 0%, 100%, .2)'
            })), React.createElement(If, { condition: !!app.tileImage }, React.createElement(Then, null, function () {
                return React.createElement(Block, { component: 'img', backgroundColor: '#fff', height: tileImageHeight, maxWidth: '100%', props: {
                        src: app.tileImage + '?w=420&h=268'
                    } });
            }), React.createElement(Else, null, function () {
                return React.createElement(Row, { backgroundColor: '#fff', height: tileImageHeight, flex: '1 1 auto', alignItems: 'center', justifyContent: 'center' }, React.createElement(AppIcon, { app: app, nativeWidth: 256, nativeHeight: 256, width: 72, height: 72 }));
            }))), React.createElement(Block, { padding: '1.3125em', paddingTop: '1em', minHeight: '5em' }, React.createElement(Link, { props: {
                    href: this.appURL,
                    target: '_blank'
                }, track: Object.assign({}, commonTrackData, { action: 'Routed to app via title' }), padding: '.5em', margin: '-.5em -.5em 0 -.5em', color: '#000' }, this.appTitle), React.createElement(Block, { fontSize: '0.9em', color: colors.pageSubtitleGray }, app.shortDescription)));
        }
    }, {
        key: 'appURL',
        get: function get() {
            var _props2 = this.props,
                app = _props2.app,
                recommendedCategory = _props2.recommendedCategory;

            var slug = app.alias || app.id;
            var utmContent = [recommendedCategory ? recommendedCategory.id : '', slug].filter(function (entry) {
                return entry.length;
            }).join(':');
            var pathWithParams = ['utm_source=cf_dashboard', 'utm_medium=promotional_banner', 'utm_campaign=related_apps_by_category', 'utm_content=' + utmContent].reduce(function (acc, entry, index) {
                var separator = index === 0 ? '?' : '&';
                return acc + separator + entry;
            }, slug);
            if (this.props.domain) {
                return CF_DASHBOARD_BASE_PATH + '/apps/' + this.props.domain + '/' + pathWithParams;
            }
            return APPS_BASE_PATH + '/' + pathWithParams;
        }
    }, {
        key: 'appTitle',
        get: function get() {
            if (this.props.app._placeholder) return '';
            return this.props.app.title || 'Untitled app';
        }
    }]);

    return AppTile;
}(React.Component);

export default AppTile;
//# sourceMappingURL=app-tile.js.map