import { Styles } from '@0xproject/react-shared';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';

import { colors } from 'ts/style/colors';
import { BrowserType, ProviderType } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';

export interface WalletDisconnectedItemProps {
    providerType: ProviderType;
    injectedProviderName: string;
    onToggleLedgerDialog: () => void;
}

const styles: Styles = {
    button: {
        border: colors.walletBorder,
        borderStyle: 'solid',
        borderWidth: 1,
        height: 80,
    },
    hrefAdjustment: {
        paddingTop: 20, // HACK: For some reason when we set the href prop of a FlatButton material-ui reduces the top padding
    },
    otherWalletText: {
        fontSize: 14,
        color: colors.grey500,
        textDecoration: 'underline',
    },
};

const ITEM_HEIGHT = 381;
const METAMASK_ICON_WIDTH = 35;
const LEDGER_ICON_WIDTH = 30;
const BUTTON_BOTTOM_PADDING = 80;

export const WalletDisconnectedItem: React.StatelessComponent<WalletDisconnectedItemProps> = (
    props: WalletDisconnectedItemProps,
) => {
    const isExternallyInjectedProvider = utils.isExternallyInjected(props.providerType, props.injectedProviderName);
    return (
        <div className="flex flex-center">
            <div className="mx-auto">
                <div className="table" style={{ height: ITEM_HEIGHT }}>
                    <div className="table-cell align-middle">
                        <ProviderButton isExternallyInjectedProvider={isExternallyInjectedProvider} />
                        <div className="flex flex-center py2" style={{ paddingBottom: BUTTON_BOTTOM_PADDING }}>
                            <div className="mx-auto">
                                <div onClick={props.onToggleLedgerDialog} style={{ cursor: 'pointer' }}>
                                    <img src="/images/ledger_icon.png" style={{ width: LEDGER_ICON_WIDTH }} />
                                    <span className="px1" style={styles.otherWalletText}>
                                        user other wallet
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

interface ProviderButtonProps {
    isExternallyInjectedProvider: boolean;
}

const ProviderButton: React.StatelessComponent<ProviderButtonProps> = (props: ProviderButtonProps) => {
    const browserType = utils.getBrowserType();
    let extensionLink;
    if (!props.isExternallyInjectedProvider) {
        switch (browserType) {
            case BrowserType.Chrome:
                extensionLink = constants.URL_METAMASK_CHROME_STORE;
                break;
            case BrowserType.Firefox:
                extensionLink = constants.URL_METAMASK_FIREFOX_STORE;
                break;
            case BrowserType.Opera:
                extensionLink = constants.URL_METAMASK_OPERA_STORE;
                break;
            default:
                extensionLink = constants.URL_METAMASK_HOMEPAGE;
        }
    }
    return (
        <FlatButton
            label={props.isExternallyInjectedProvider ? 'Please unlock account' : 'Get Metamask Wallet Extension'}
            labelStyle={{ color: colors.black }}
            labelPosition="after"
            primary={true}
            icon={<img src="/images/metamask_icon.png" width={METAMASK_ICON_WIDTH.toString()} />}
            style={props.isExternallyInjectedProvider ? styles.button : { ...styles.button, ...styles.hrefAdjustment }}
            href={extensionLink}
            target={props.isExternallyInjectedProvider ? undefined : '_blank'}
            disabled={props.isExternallyInjectedProvider}
        />
    );
};