import * as _ from 'lodash';
import * as React from 'react';
import { Link } from 'react-router-dom';
import { WebsitePaths } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';

interface MenuItemsBySection {
    [sectionName: string]: FooterMenuItem[];
}

interface FooterMenuItem {
    title: string;
    path?: string;
    isExternal?: boolean;
}

enum Sections {
    Documentation = 'Documentation',
    Community = 'Community',
    Organization = 'Organization',
}

const ICON_DIMENSION = 16;
const menuItemsBySection: MenuItemsBySection = {
    Documentation: [
        {
            title: '0x.js',
            path: WebsitePaths.ZeroExJs,
        },
        {
            title: '0x Smart Contracts',
            path: WebsitePaths.SmartContracts,
        },
        {
            title: '0x Connect',
            path: WebsitePaths.Connect,
        },
        {
            title: 'Whitepaper',
            path: WebsitePaths.Whitepaper,
            isExternal: true,
        },
        {
            title: 'Wiki',
            path: WebsitePaths.Wiki,
        },
        {
            title: 'FAQ',
            path: WebsitePaths.FAQ,
        },
    ],
    Community: [
        {
            title: 'Rocket.chat',
            isExternal: true,
            path: constants.URL_ZEROEX_CHAT,
        },
        {
            title: 'Blog',
            isExternal: true,
            path: constants.URL_BLOG,
        },
        {
            title: 'Twitter',
            isExternal: true,
            path: constants.URL_TWITTER,
        },
        {
            title: 'Reddit',
            isExternal: true,
            path: constants.URL_REDDIT,
        },
    ],
    Organization: [
        {
            title: 'About',
            isExternal: false,
            path: WebsitePaths.About,
        },
        {
            title: 'Careers',
            isExternal: true,
            path: constants.URL_ANGELLIST,
        },
        {
            title: 'Contact',
            isExternal: true,
            path: 'mailto:team@0xproject.com',
        },
    ],
};
const linkStyle = {
    color: colors.white,
    cursor: 'pointer',
};

const titleToIcon: { [title: string]: string } = {
    'Rocket.chat': 'rocketchat.png',
    Blog: 'medium.png',
    Twitter: 'twitter.png',
    Reddit: 'reddit.png',
};

export interface FooterProps {}

interface FooterState {}

export class Footer extends React.Component<FooterProps, FooterState> {
    public render() {
        return (
            <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}>
                <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
                    <div className="col lg-col-4 md-col-4 col-12 left">
                        <div className="sm-mx-auto" style={{ width: 148 }}>
                            <div>
                                <img src="/images/protocol_logo_white.png" height="30" />
                            </div>
                            <div
                                style={{
                                    fontSize: 11,
                                    color: colors.grey,
                                    paddingLeft: 37,
                                    paddingTop: 2,
                                }}
                            >
                                © ZeroEx, Intl.
                            </div>
                        </div>
                    </div>
                    <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4">
                        <div className="col lg-col-4 md-col-4 col-12">
                            <div className="lg-right md-right sm-center">
                                {this._renderHeader(Sections.Documentation)}
                                {_.map(menuItemsBySection[Sections.Documentation], this._renderMenuItem.bind(this))}
                            </div>
                        </div>
                        <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
                            <div className="lg-right md-right sm-center">
                                {this._renderHeader(Sections.Community)}
                                {_.map(menuItemsBySection[Sections.Community], this._renderMenuItem.bind(this))}
                            </div>
                        </div>
                        <div className="col lg-col-4 md-col-4 col-12">
                            <div className="lg-right md-right sm-center">
                                {this._renderHeader(Sections.Organization)}
                                {_.map(menuItemsBySection[Sections.Organization], this._renderMenuItem.bind(this))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
    private _renderIcon(fileName: string) {
        return (
            <div style={{ height: ICON_DIMENSION, width: ICON_DIMENSION }}>
                <img src={`/images/social/${fileName}`} style={{ width: ICON_DIMENSION }} />
            </div>
        );
    }
    private _renderMenuItem(item: FooterMenuItem) {
        const iconIfExists = titleToIcon[item.title];
        return (
            <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
                {item.isExternal ? (
                    <a className="text-decoration-none" style={linkStyle} target="_blank" href={item.path}>
                        {!_.isUndefined(iconIfExists) ? (
                            <div className="sm-mx-auto" style={{ width: 65 }}>
                                <div className="flex">
                                    <div className="pr1">{this._renderIcon(iconIfExists)}</div>
                                    <div>{item.title}</div>
                                </div>
                            </div>
                        ) : (
                            item.title
                        )}
                    </a>
                ) : (
                    <Link to={item.path} style={linkStyle} className="text-decoration-none">
                        <div>
                            {!_.isUndefined(iconIfExists) && (
                                <div className="pr1">{this._renderIcon(iconIfExists)}</div>
                            )}
                            {item.title}
                        </div>
                    </Link>
                )}
            </div>
        );
    }
    private _renderHeader(title: string) {
        const headerStyle = {
            textTransform: 'uppercase',
            color: colors.grey400,
            letterSpacing: 2,
            fontFamily: 'Roboto Mono',
            fontSize: 13,
        };
        return (
            <div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}>
                {title}
            </div>
        );
    }
}