import React, {Component} from 'react';
import {Balance, EventName, FirstConnectMessage, NewTickMessage} from "../types";
import {socket} from "../index";
import {SymbolAccessories} from "../utils";

export type CoinBalanceProps = {
    name: string,
    amount: number,
    percentage?: number,
    quote_equivalent: number,
    quote_symbol: string,
}

class CoinBalance extends Component<CoinBalanceProps> {
    constructor(props) {
        super(props);

    }

    render() {
        // do not print equivalent if this element is the quote itself
        const quoteBlock = this.props.name != this.props.quote_symbol ? this.props.quote_symbol.concat(" ").concat(this.props.quote_equivalent.toLocaleString()) : null

        // const accessory = SymbolAccessories.filter((accessory) => {
        //     return accessory.name == this.props.name
        // })
        //
        // const icon = accessory.length > 0 ? accessory.pop().icon : null

        return (
            <div className="flex-grow flex px-6 py-3 text-gray-800 items-center border-b -mx-4 align-middle">
                <div className={"w-1/8"}>
                    {/*{icon}*/}
                </div>
                <div className="w-2/5 xl:w-1/4 px-4 flex items-center">
                    <span className="text-lg">{this.props.name}</span>
                </div>
                <div className="hidden md:flex lg:hidden xl:flex w-1/4 px-1 flex-col">
                    <div className={"italic w-full text-center"}>
                        {Math.trunc(this.props.percentage)}%
                    </div>
                    <div className="w-full bg-transparent mt-2">
                        <div className={"bg-blue-400 rounded-lg text-xs leading-none py-1 text-center text-white"}
                             style={{width: this.props.percentage.toString().concat("%")}}/>
                    </div>
                </div>
                <div className="flex w-3/5 md:w/12">
                    <div className="w-1/2 px-4">
                        <div className="text-right">
                            {this.props.amount.toFixed(5)} {this.props.name}
                        </div>
                    </div>
                    <div className="w-1/2 px-4 my-auto">
                        <div className="text-right">
                            <div
                                className={"px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-200 text-gray-800"}>
                                {quoteBlock}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

}

export type WalletCardProps = {
    quote: string,
}

export class WalletCard extends Component
    <{}, { balances: Array<Balance> }> {
    constructor(props) {
        super(props);
    }

    state =
        {
            balances: []
        }

    totalQuoteBalance() {
        let total = 0

        this.state.balances.forEach((balance: Balance) => {
            if (balance.currency == balance.quote) {
                total += balance.amount
            } else {
                total += balance.quote_equivalent
            }
        })

        return total
    }

    renderCoinBalances() {
        return (
            this.state.balances.map((balance: Balance) => {
                const percentage_amount = balance.quote == balance.currency ? balance.amount : balance.quote_equivalent;

                return (
                    <CoinBalance key={balance.currency.concat(balance.kind)} name={balance.currency}
                                 amount={balance.amount} quote_equivalent={balance.quote_equivalent}
                                 percentage={percentage_amount / this.totalQuoteBalance() * 100}
                                 quote_symbol={balance.quote}/>
                )
            })
        )
    }

    componentDidMount() {
        socket.on(EventName.NewTick, (data: NewTickMessage) => {
            this.setState({
                balances: data.balances
            })
        })

        socket.on(EventName.FirstConnect, (data: FirstConnectMessage) => {
            this.setState({
                balances: data.balances
            })
        })
    }

    render() {
        return (
            <div className="w-full mb-6 lg:mb-0 px-4 flex flex-col">
                <div
                    className="flex-grow flex bg-white flex-col border-t border-b sm:rounded-lg sm:border shadow overflow-hidden">
                    <div className="border-b bg-gray-50">
                        <div className="flex justify-between px-6 -mb-px">
                            <h3 className="text-blue-700 py-4 font-normal text-lg">Your Wallets</h3>
                            <div className="flex">
                                <button type="button"
                                        className="appearance-none py-4 text-blue-700 border-b border-blue-dark mr-3">
                                    Margin
                                </button>
                                <button type="button"
                                        className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark">
                                    Chart
                                </button>
                            </div>
                        </div>
                    </div>

                    {this.renderCoinBalances()}

                    <div className="px-6 py-4">
                        <div className="text-center text-gray-400">
                            Total Balance &asymp; USD {this.totalQuoteBalance().toLocaleString()}
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}