import {
    constants as sharedConstants,
    EtherscanLinkSuffixes,
    Styles,
    utils as sharedUtils,
} from '@0xproject/react-shared';
import { BigNumber, errorUtils } from '@0xproject/utils';
import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
import FloatingActionButton from 'material-ui/FloatingActionButton';

import { ListItem } from 'material-ui/List';
import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
import ContentAdd from 'material-ui/svg-icons/content/add';
import ContentRemove from 'material-ui/svg-icons/content/remove';
import * as React from 'react';
import { Link } from 'react-router-dom';
import firstBy = require('thenby');

import { Blockchain } from 'ts/blockchain';
import { Circle } from 'ts/components/ui/circle';
import { Container } from 'ts/components/ui/container';
import { IconButton } from 'ts/components/ui/icon_button';
import { Identicon } from 'ts/components/ui/identicon';
import { Island } from 'ts/components/ui/island';
import { Text } from 'ts/components/ui/text';
import { TokenIcon } from 'ts/components/ui/token_icon';
import { BodyOverlay } from 'ts/components/wallet/body_overlay';
import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
import { Dispatcher } from 'ts/redux/dispatcher';
import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme';
import {
    BlockchainErrs,
    ProviderType,
    ScreenWidths,
    Side,
    Token,
    TokenByAddress,
    TokenState,
    TokenStateByAddress,
    WebsitePaths,
} from 'ts/types';
import { analytics } from 'ts/utils/analytics';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';

export interface WalletProps {
    userAddress: string;
    networkId: number;
    blockchain: Blockchain;
    blockchainIsLoaded: boolean;
    blockchainErr: BlockchainErrs;
    dispatcher: Dispatcher;
    tokenByAddress: TokenByAddress;
    trackedTokens: Token[];
    userEtherBalanceInWei?: BigNumber;
    lastForceTokenStateRefetch: number;
    injectedProviderName: string;
    providerType: ProviderType;
    screenWidth: ScreenWidths;
    location: Location;
    trackedTokenStateByAddress: TokenStateByAddress;
    onToggleLedgerDialog: () => void;
    onAddToken: () => void;
    onRemoveToken: () => void;
    refetchTokenStateAsync: (tokenAddress: string) => Promise<void>;
    style: React.CSSProperties;
}

interface WalletState {
    wrappedEtherDirection?: Side;
    isHoveringSidebar: boolean;
}

interface AllowanceToggleConfig {
    token: Token;
    tokenState: TokenState;
}

interface AccessoryItemConfig {
    wrappedEtherDirection?: Side;
    allowanceToggleConfig?: AllowanceToggleConfig;
}

const styles: Styles = {
    borderedItem: {
        borderBottomColor: colors.walletBorder,
        borderBottomStyle: 'solid',
        borderWidth: 1,
    },
    tokenItem: {
        backgroundColor: colors.walletDefaultItemBackground,
        minHeight: 85,
    },
    headerItem: {
        minHeight: 60,
    },
    amountLabel: {
        fontWeight: 'bold',
        color: colors.black,
    },
    valueLabel: {
        color: colors.darkGrey,
        fontSize: 14,
    },
    bodyInnerDiv: {
        overflow: 'auto',
        WebkitOverflowScrolling: 'touch',
        position: 'relative',
    },
};

const ETHER_ICON_PATH = '/images/ether.png';
const ICON_DIMENSION = 28;
const BODY_ITEM_KEY = 'BODY';
const HEADER_ITEM_KEY = 'HEADER';
const ETHER_ITEM_KEY = 'ETHER';
const USD_DECIMAL_PLACES = 2;
const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
const PLACEHOLDER_COLOR = colors.grey300;
const LOADING_ROWS_COUNT = 6;

const ActionButton = styled(FloatingActionButton)`
    button {
        position: static !important;
    }
`;

export class Wallet extends React.Component<WalletProps, WalletState> {
    public static defaultProps = {
        style: {},
    };
    constructor(props: WalletProps) {
        super(props);
        this.state = {
            wrappedEtherDirection: undefined,
            isHoveringSidebar: false,
        };
    }
    public componentDidUpdate(prevProps: WalletProps): void {
        const currentTrackedTokens = this.props.trackedTokens;
        const differentTrackedTokens = _.difference(currentTrackedTokens, prevProps.trackedTokens);
        const firstDifferentTrackedToken = _.head(differentTrackedTokens);
        // check if there is only one different token, and if that token is a member of the current tracked tokens
        // this means that the token was added, not removed
        if (
            !_.isUndefined(firstDifferentTrackedToken) &&
            _.size(differentTrackedTokens) === 1 &&
            _.includes(currentTrackedTokens, firstDifferentTrackedToken)
        ) {
            document.getElementById(firstDifferentTrackedToken.address).scrollIntoView();
        }
    }
    public render(): React.ReactNode {
        const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError;
        return (
            <Island className="flex flex-column wallet" style={this.props.style}>
                {isBlockchainLoaded ? this._renderLoadedRows() : this._renderLoadingRows()}
            </Island>
        );
    }
    private _renderLoadingRows(): React.ReactNode {
        return _.concat(this._renderLoadingHeaderRows(), this._renderLoadingBodyRows());
    }
    private _renderLoadingHeaderRows(): React.ReactElement<{}> {
        return this._renderPlainHeaderRow('Loading...');
    }
    private _renderLoadingBodyRows(): React.ReactElement<{}> {
        const bodyStyle = this._getBodyStyle();
        const loadingRowsRange = _.range(LOADING_ROWS_COUNT);
        return (
            <div key={BODY_ITEM_KEY} className="flex flex-column" style={bodyStyle}>
                {_.map(loadingRowsRange, index => {
                    return <NullTokenRow key={index} />;
                })}
                <Container
                    className="flex items-center"
                    position="absolute"
                    width="100%"
                    height="100%"
                    maxHeight={bodyStyle.maxHeight}
                >
                    <div className="mx-auto">
                        <BodyOverlay
                            dispatcher={this.props.dispatcher}
                            userAddress={this.props.userAddress}
                            injectedProviderName={this.props.injectedProviderName}
                            providerType={this.props.providerType}
                            onToggleLedgerDialog={this.props.onToggleLedgerDialog}
                            blockchain={this.props.blockchain}
                            blockchainIsLoaded={this.props.blockchainIsLoaded}
                        />
                    </div>
                </Container>
            </div>
        );
    }
    private _renderLoadedRows(): React.ReactNode {
        const isAddressAvailable = !_.isEmpty(this.props.userAddress);
        return isAddressAvailable
            ? _.concat(this._renderConnectedHeaderRows(), this._renderBody())
            : _.concat(this._renderDisconnectedHeaderRows(), this._renderLoadingBodyRows());
    }
    private _renderDisconnectedHeaderRows(): React.ReactElement<{}> {
        const isExternallyInjectedProvider = utils.isExternallyInjected(
            this.props.providerType,
            this.props.injectedProviderName,
        );
        const text = isExternallyInjectedProvider ? 'Please unlock MetaMask...' : 'Please connect a wallet...';
        return this._renderPlainHeaderRow(text);
    }
    private _renderPlainHeaderRow(text: string): React.ReactElement<{}> {
        return (
            <StandardIconRow
                key={HEADER_ITEM_KEY}
                icon={<ActionAccountBalanceWallet color={colors.grey} />}
                main={
                    <Text fontSize="16px" fontColor={colors.grey}>
                        {text}
                    </Text>
                    // https://github.com/palantir/tslint-react/issues/140
                    // tslint:disable-next-line:jsx-curly-spacing
                }
                style={{ ...styles.borderedItem, ...styles.headerItem }}
            />
        );
    }
    private _renderConnectedHeaderRows(): React.ReactElement<{}> {
        const userAddress = this.props.userAddress;
        const main = (
            <div className="flex flex-column">
                <Text fontSize="16px" lineHeight="19px" fontWeight={500}>
                    {utils.getAddressBeginAndEnd(userAddress)}
                </Text>
                <Container className="flex items-center">
                    <Circle diameter={6} fillColor="#37D400" />
                    <Container marginLeft="6px">
                        <Text fontSize="12px" lineHeight="14px" fontColor={colors.darkGrey}>
                            {this.props.injectedProviderName}
                        </Text>
                    </Container>
                </Container>
            </div>
        );
        return (
            <Link key={HEADER_ITEM_KEY} to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}>
                <StandardIconRow
                    icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
                    main={main}
                    style={{ ...styles.borderedItem, ...styles.headerItem }}
                />
            </Link>
        );
    }
    private _renderBody(): React.ReactElement<{}> {
        const bodyStyle = this._getBodyStyle();
        return (
            <div
                style={bodyStyle}
                key={BODY_ITEM_KEY}
                onMouseEnter={this._onSidebarHover.bind(this)}
                onMouseLeave={this._onSidebarHoverOff.bind(this)}
            >
                {this._renderEthRows()}
                {this._renderTokenRows()}
            </div>
        );
    }
    private _getBodyStyle(): React.CSSProperties {
        return {
            ...styles.bodyInnerDiv,
            overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
            marginRight: this.state.isHoveringSidebar ? 0 : 4,
            // TODO: make this completely responsive
            maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined,
        };
    }
    private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void {
        this.setState({
            isHoveringSidebar: true,
        });
    }
    private _onSidebarHoverOff(): void {
        this.setState({
            isHoveringSidebar: false,
        });
    }
    private _renderEthRows(): React.ReactNode {
        const icon = <img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />;
        const primaryText = this._renderAmount(
            this.props.userEtherBalanceInWei || new BigNumber(0),
            constants.DECIMAL_PLACES_ETH,
            constants.ETHER_SYMBOL,
            _.isUndefined(this.props.userEtherBalanceInWei),
        );
        const etherToken = this._getEthToken();
        const etherTokenState = this.props.trackedTokenStateByAddress[etherToken.address];
        const etherPrice = etherTokenState.price;
        const secondaryText = this._renderValue(
            this.props.userEtherBalanceInWei || new BigNumber(0),
            constants.DECIMAL_PLACES_ETH,
            etherPrice,
            _.isUndefined(this.props.userEtherBalanceInWei) || !etherTokenState.isLoaded,
        );
        const accessoryItemConfig = {
            wrappedEtherDirection: Side.Deposit,
        };
        const key = ETHER_ITEM_KEY;
        return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, false, 'eth-row');
    }
    private _renderTokenRows(): React.ReactNode {
        const trackedTokens = this.props.trackedTokens;
        const trackedTokensStartingWithEtherToken = trackedTokens.sort(
            firstBy((t: Token) => t.symbol !== constants.ETHER_TOKEN_SYMBOL)
                .thenBy((t: Token) => t.symbol !== constants.ZRX_TOKEN_SYMBOL)
                .thenBy('trackedTimestamp'),
        );
        return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this));
    }
    private _renderTokenRow(token: Token, index: number): React.ReactNode {
        const tokenState = this.props.trackedTokenStateByAddress[token.address];
        if (_.isUndefined(tokenState)) {
            return null;
        }
        const tokenLink = sharedUtils.getEtherScanLinkIfExists(
            token.address,
            this.props.networkId,
            EtherscanLinkSuffixes.Address,
        );
        const icon = <TokenIcon token={token} diameter={ICON_DIMENSION} link={tokenLink} />;
        const isWeth = token.symbol === constants.ETHER_TOKEN_SYMBOL;
        const wrappedEtherDirection = isWeth ? Side.Receive : undefined;
        const primaryText = this._renderAmount(tokenState.balance, token.decimals, token.symbol, !tokenState.isLoaded);
        const secondaryText = this._renderValue(
            tokenState.balance,
            token.decimals,
            tokenState.price,
            !tokenState.isLoaded,
        );
        const accessoryItemConfig: AccessoryItemConfig = {
            wrappedEtherDirection,
            allowanceToggleConfig: {
                token,
                tokenState,
            },
        };
        const key = token.address;
        const isLastRow = index === this.props.trackedTokens.length - 1;
        return this._renderBalanceRow(
            key,
            icon,
            primaryText,
            secondaryText,
            accessoryItemConfig,
            isLastRow,
            isWeth ? 'weth-row' : undefined,
        );
    }
    private _renderBalanceRow(
        key: string,
        icon: React.ReactNode,
        primaryText: React.ReactNode,
        secondaryText: React.ReactNode,
        accessoryItemConfig: AccessoryItemConfig,
        isLastRow: boolean,
        className?: string,
    ): React.ReactNode {
        const shouldShowWrapEtherItem =
            !_.isUndefined(this.state.wrappedEtherDirection) &&
            this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection &&
            !_.isUndefined(this.props.userEtherBalanceInWei);
        let additionalStyle;
        if (shouldShowWrapEtherItem) {
            additionalStyle = walletItemStyles.focusedItem;
        } else if (!isLastRow) {
            additionalStyle = styles.borderedItem;
        }
        const style = { ...styles.tokenItem, ...additionalStyle };
        const etherToken = this._getEthToken();
        return (
            <div id={key} key={key} className={`flex flex-column ${className || ''}`}>
                <StandardIconRow
                    icon={icon}
                    main={
                        <div className="flex flex-column">
                            {primaryText}
                            <Container marginTop="3px">{secondaryText}</Container>
                        </div>
                    }
                    accessory={this._renderAccessoryItems(accessoryItemConfig)}
                    style={style}
                />
                {shouldShowWrapEtherItem && (
                    <WrapEtherItem
                        userAddress={this.props.userAddress}
                        networkId={this.props.networkId}
                        blockchain={this.props.blockchain}
                        dispatcher={this.props.dispatcher}
                        userEtherBalanceInWei={this.props.userEtherBalanceInWei}
                        direction={accessoryItemConfig.wrappedEtherDirection}
                        etherToken={etherToken}
                        lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
                        onConversionSuccessful={this._closeWrappedEtherActionRow.bind(this)}
                        // tslint:disable:jsx-no-lambda
                        refetchEthTokenStateAsync={async () => this.props.refetchTokenStateAsync(etherToken.address)}
                    />
                )}
            </div>
        );
    }
    private _renderAccessoryItems(config: AccessoryItemConfig): React.ReactElement<{}> {
        const shouldShowWrappedEtherAction = !_.isUndefined(config.wrappedEtherDirection);
        const shouldShowToggle = !_.isUndefined(config.allowanceToggleConfig);
        // if we don't have a toggle, we still want some space to the right of the "wrap" button so that it aligns with
        // the "unwrap" button in the row below
        const toggle = shouldShowToggle ? (
            this._renderAllowanceToggle(config.allowanceToggleConfig)
        ) : (
            <div style={{ width: NO_ALLOWANCE_TOGGLE_SPACE_WIDTH }} />
        );
        return (
            <div className="flex items-center">
                <div className="flex-auto">
                    {shouldShowWrappedEtherAction && this._renderWrappedEtherButton(config.wrappedEtherDirection)}
                </div>
                <div className="flex-last pl2">{toggle}</div>
            </div>
        );
    }
    private _renderAllowanceToggle(config: AllowanceToggleConfig): React.ReactNode {
        // TODO: Error handling
        return (
            <AllowanceToggle
                blockchain={this.props.blockchain}
                token={config.token}
                tokenState={config.tokenState}
                isDisabled={!config.tokenState.isLoaded}
                refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)}
            />
        );
    }
    private _renderAmount(
        amount: BigNumber,
        decimals: number,
        symbol: string,
        isLoading: boolean = false,
    ): React.ReactNode {
        if (isLoading) {
            return (
                <PlaceHolder hideChildren={isLoading}>
                    <div style={styles.amountLabel}>0.00 XXX</div>
                </PlaceHolder>
            );
        } else {
            const result = utils.getFormattedAmount(amount, decimals, symbol);
            return <div style={styles.amountLabel}>{result}</div>;
        }
    }
    private _renderValue(
        amount: BigNumber,
        decimals: number,
        price?: BigNumber,
        isLoading: boolean = false,
    ): React.ReactNode {
        let result;
        if (!isLoading) {
            if (_.isUndefined(price)) {
                result = '--';
            } else {
                const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
                const value = unitAmount.mul(price);
                const formattedAmount = value.toFixed(USD_DECIMAL_PLACES);
                result = `$${formattedAmount}`;
            }
        } else {
            result = '$0.00';
        }
        return (
            <PlaceHolder hideChildren={isLoading}>
                <div style={styles.valueLabel}>{result}</div>
            </PlaceHolder>
        );
    }
    private _renderWrappedEtherButton(wrappedEtherDirection: Side): React.ReactNode {
        const isWrappedEtherDirectionOpen = this.state.wrappedEtherDirection === wrappedEtherDirection;
        let buttonLabel;
        let buttonIconName;
        if (isWrappedEtherDirectionOpen) {
            buttonLabel = 'cancel';
            buttonIconName = 'zmdi-close';
        } else {
            switch (wrappedEtherDirection) {
                case Side.Deposit:
                    buttonLabel = 'wrap';
                    buttonIconName = 'zmdi-long-arrow-down';
                    break;
                case Side.Receive:
                    buttonLabel = 'unwrap';
                    buttonIconName = 'zmdi-long-arrow-up';
                    break;
                default:
                    throw errorUtils.spawnSwitchErr('wrappedEtherDirection', wrappedEtherDirection);
            }
        }
        const onClick = isWrappedEtherDirectionOpen
            ? this._closeWrappedEtherActionRow.bind(this, wrappedEtherDirection)
            : this._openWrappedEtherActionRow.bind(this, wrappedEtherDirection);
        return (
            <IconButton iconName={buttonIconName} labelText={buttonLabel} onClick={onClick} color={colors.mediumBlue} />
        );
    }
    private _openWrappedEtherActionRow(wrappedEtherDirection: Side): void {
        const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
        const action =
            wrappedEtherDirection === Side.Deposit ? 'Wallet - Wrap ETH Opened' : 'Wallet - Unwrap WETH Opened';
        analytics.logEvent('Portal', action, networkName);
        this.setState({
            wrappedEtherDirection,
        });
    }
    private _closeWrappedEtherActionRow(wrappedEtherDirection: Side): void {
        const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
        const action =
            wrappedEtherDirection === Side.Deposit ? 'Wallet - Wrap ETH Closed' : 'Wallet - Unwrap WETH Closed';
        analytics.logEvent('Portal', action, networkName);
        this.setState({
            wrappedEtherDirection: undefined,
        });
    }
    private _getEthToken(): Token {
        return utils.getEthToken(this.props.tokenByAddress);
    }
}

interface StandardIconRowProps {
    icon: React.ReactNode;
    main: React.ReactNode;
    accessory?: React.ReactNode;
    style?: React.CSSProperties;
}
const StandardIconRow = (props: StandardIconRowProps) => {
    return (
        <div className="flex items-center" style={props.style}>
            <div className="flex items-center px2">{props.icon}</div>
            <div className="flex-none pr2">{props.main}</div>
            <div className="flex-auto" />
            <div>{props.accessory}</div>
        </div>
    );
};
interface PlaceHolderProps {
    hideChildren: React.ReactNode;
    children?: React.ReactNode;
}
const PlaceHolder = (props: PlaceHolderProps) => {
    const rootBackgroundColor = props.hideChildren ? PLACEHOLDER_COLOR : 'transparent';
    const rootStyle: React.CSSProperties = {
        backgroundColor: rootBackgroundColor,
        display: 'inline-block',
        borderRadius: 2,
    };
    const childrenVisibility = props.hideChildren ? 'hidden' : 'visible';
    const childrenStyle: React.CSSProperties = { visibility: childrenVisibility };
    return (
        <div style={rootStyle}>
            <div style={childrenStyle}>{props.children}</div>
        </div>
    );
};

const NullTokenRow = () => {
    const icon = <Circle diameter={ICON_DIMENSION} fillColor={PLACEHOLDER_COLOR} />;
    const main = (
        <div className="flex flex-column">
            <PlaceHolder hideChildren={true}>
                <div style={styles.amountLabel}>0.00 XXX</div>
            </PlaceHolder>
            <Container marginTop="3px">
                <PlaceHolder hideChildren={true}>
                    <div style={styles.valueLabel}>0.00</div>
                </PlaceHolder>
            </Container>
        </div>
    );
    const accessory = (
        <Container marginRight="12px">
            <PlaceHolder hideChildren={true}>
                <Container width="20px" height="14px" />
            </PlaceHolder>
        </Container>
    );
    return (
        <StandardIconRow
            icon={icon}
            main={main}
            accessory={accessory}
            style={{ ...styles.tokenItem, ...styles.borderedItem }}
        />
    );
};
// tslint:disable:max-file-line-count