import React from 'react';
import { If, Then, Else } from 'react-if';
import AppIcon from '../app-icon';
import { Block, Col, Row } from 'jsxstyle';
import { rgba } from 'polished';
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';
const tileImageHeight = 134;
class AppTile extends React.Component {
    get appURL() {
        const { app, recommendedCategory } = this.props;
        const slug = app.alias || app.id;
        const utmContent = [
            recommendedCategory ? recommendedCategory.id : '',
            slug
        ].filter(entry => entry.length).join(':');
        return [
            'utm_source=cf_dashboard',
            'utm_medium=promotional_banner',
            'utm_campaign=related_apps_by_category',
            `utm_content=${utmContent}`
        ].reduce((acc, entry, index) => {
            const separator = index === 0 ? '?' : '&';
            return acc + separator + entry;
        }, `${APPS_BASE_PATH}/${slug}`);
    }
    get appTitle() {
        if (this.props.app._placeholder)
            return '';
        return this.props.app.title || 'Untitled app';
    }
    render() {
        const { app, recommendedCategory, style } = this.props;
        const commonTrackData = {
            category: 'Promo Banner',
            label: recommendedCategory ? recommendedCategory.id : ''
        };
        const Container = ({ children }) => (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, props: {
                'data-app-id': app.id,
                'data-component': 'app-tile',
                title: this.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, .13)',
                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, () => (React.createElement(Block, { component: 'img', backgroundColor: '#fff', height: tileImageHeight, maxWidth: '100%', props: {
                            src: `${app.tileImage}?w=420&h=268`
                        } }))),
                    React.createElement(Else, null, () => (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)));
    }
}
export default AppTile;
//# sourceMappingURL=app-tile.js.map