import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
import { colors } from 'ts/utils/colors';

interface FillWarningDialogProps {
    isOpen: boolean;
    onToggleDialog: () => void;
}

export function FillWarningDialog(props: FillWarningDialogProps) {
    const didCancel = true;
    return (
        <Dialog
            title="Warning"
            titleStyle={{ fontWeight: 100, color: colors.red500 }}
            actions={[
                <FlatButton
                    key="fillWarningCancel"
                    label="Cancel"
                    onTouchTap={props.onToggleDialog.bind(this, didCancel)}
                />,
                <FlatButton
                    key="fillWarningContinue"
                    label="Fill Order"
                    onTouchTap={props.onToggleDialog.bind(this, !didCancel)}
                />,
            ]}
            open={props.isOpen}
            onRequestClose={props.onToggleDialog.bind(this)}
            autoScrollBodyContent={true}
            modal={true}
        >
            <div className="pt2" style={{ color: colors.grey700 }}>
                <div>
                    At least one of the tokens in this order was not found in the token registry smart contract and may
                    be counterfeit. It is your responsibility to verify the token addresses on Etherscan (
                    <a href="https://0xproject.com/wiki#Verifying-Custom-Tokens" target="_blank">
                        See this how-to guide
                    </a>) before filling an order. <b>This action may result in the loss of funds</b>.
                </div>
            </div>
        </Dialog>
    );
}