import React from 'react';
import Media from 'react-media';

import classNames from 'classnames';

import { MAX_MOBILE_WIDTH, MIN_DESKTOP_WIDTH, MIN_TABLET_WIDTH } from 'common/models/constants';

import * as styles from 'app/styles/PokemonApp.scss';

interface IFooterProps {}

export class Footer extends React.Component<IFooterProps> {

    public render() {
        const footerCss = classNames(
            'nes-container',
            styles.footer
        );

        return (
            <footer className={ footerCss }>
                <div className={ styles.adWrapper }>
                    <i className="icon pixel sprite menu pokemon-rhydon" />
                    <i className="icon pixel sprite menu pokemon-bird" />
                    <i className="icon pixel sprite menu pokemon-fish" />
                    <i className="icon pixel sprite menu pokemon-clefairy" />
                    <i className="icon pixel sprite menu pokemon-plant" />
                    <i className="icon pixel sprite menu pokemon-bug" />
                    <i className="icon pixel sprite menu pokemon-snake" />
                    <i className="icon pixel sprite menu pokemon-tauros" />
                    <i className="icon pixel sprite menu pokemon-pokeball" />
                    <i className="icon pixel sprite menu pokemon-fossil" />
                </div>
                <span className={ styles.contactWrapper }>
                    <Media query={ { minWidth: MIN_DESKTOP_WIDTH } }>
                        <span className={ styles.feedback }>Feedback?</span>
                    </Media>
                    <Media query={ { minWidth: MIN_TABLET_WIDTH } }>
                        <React.Fragment>
                            <a href="mailto:feedback@pvpokemon.com"><i className="nes-icon gmail" /></a>
                            <a href="https://twitter.com/pvpokemongo"><i className="nes-icon twitter" /></a>
                        </React.Fragment>
                    </Media>
                </span>
            </footer>
        );
    }
}