import React, {Component} from "react";
import {NewTickMessage} from "../types";

type QuoteStatusProps = {
    percentage?: boolean,
    quote_symbol?: string,
    amount: number,
    subtitle: string,
    sign?: boolean
}

export class QuoteStatus extends Component<QuoteStatusProps> {
    private whole: number;
    private decimal: number;
    private sign: string;
    private signClass: string;

    constructor(props) {
        super(props);

        console.log("SUB")
        console.log(this.props.amount)
        this.deriveProps()
    }

    deriveProps() {
        this.whole = Math.abs(Math.trunc(this.props.amount))
        this.decimal = Math.trunc(this.props.amount % 1 * 100)
        this.sign = this.props.amount > 0 ? "+" : "-"

        this.signClass = this.props.amount > 0 ? "text-green-500" : "text-red-500"
    }

    renderSign() {
        if (this.props.sign) {
            return (
                <span
                    className={this.signClass}>{this.sign}</span>
            )
        }
        return null
    }

    symbolOrPercentageRender() {
        if (this.props.percentage) {
            return (
                <>
                <span className="text-4xl text-bold align-top">
                    {this.renderSign()}</span>
                    <span className="text-5xl">{Math.abs(this.props.amount).toFixed(2)}</span>
                    <span className="text-3xl align-top">%</span>
                </>
            )
        } else {
            return (
                <>
                    <span className="text-4xl text-bold align-top">{this.renderSign()}{this.props.quote_symbol}</span>
                    <span className="text-5xl">{this.whole}</span>
                    <span className="text-3xl align-top">.{this.decimal}</span>
                </>
            )
        }
    }

    render() {
        return (
            <>
                <div className="text-gray-700 mb-2">
                    {this.symbolOrPercentageRender()}
                </div>
                <div className="text-sm uppercase text-gray-300 tracking-wide">
                    {this.props.subtitle}
                </div>
            </>
        )
    }
}

type DateButtonProps = {
    label: string
}

type DateButtonState = {
    selected: boolean
}

class DateButton extends Component<DateButtonProps, DateButtonState> {
    private classSelected: string = "appearance-none py-4 text-blue-600 border-b border-blue-600 mr-3";
    private classNotSelected: string = "appearance-none py-4 text-gray-600 border-b border-transparent hover:border-gray-800 mr-3";
    private currentClass: string;

    state = {
        selected: false
    }

    constructor(props) {
        super(props);

        this.updateClass()
    }

    toggleState() {
        this.setState({selected: !this.state.selected})
        this.updateClass()
    }

    updateClass() {
        this.currentClass = this.state.selected ? this.classSelected : this.classNotSelected;
    }

    render() {
        return (
            <button type="button"
                    className={this.currentClass} onClick={() => this.toggleState()}>
                {this.props.label}
            </button>
        )
    }
}

export class Statusbar extends Component<NewTickMessage> {
    constructor(props) {
        super(props);
    }

    render() {
        console.log("MAIN")
        console.log(this.props.price)
        return (
            <div className="bg-white border-t border-b sm:border-l sm:border-r sm:rounded shadow flex-grow mb-6">
                <div className="border-b px-6">
                    <div className="flex justify-between -mb-px">
                        <div className="lg:hidden text-blue-600 py-4 text-lg">
                            Price Charts
                        </div>
                        <div className="hidden lg:flex">
                            <button type="button"
                                    className="appearance-none py-4 text-blue-600 border-b border-blue-dark mr-6">
                                Bitcoin &middot; CA$21,404.74
                            </button>
                            <button type="button"
                                    className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark mr-6">
                                Ethereum &middot; CA$884.80
                            </button>
                            <button type="button"
                                    className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark">
                                Litecoin &middot; CA$358.24
                            </button>
                        </div>
                        <div className="flex text-sm">
                            <DateButton label={"1m"}/>
                            <DateButton label={"1D"}/>
                            <DateButton label={"1W"}/>
                            <DateButton label={"1M"}/>
                            <DateButton label={"1Y"}/>
                            <DateButton label={"ALL"}/>
                        </div>
                    </div>
                </div>
                <div className="flex items-center px-6 lg:hidden">
                    <div className="flex-grow flex-no-shrink py-6">
                        <div className="text-gray-700 mb-2">
                            <span className="text-3xl align-top">CA$</span>
                            <span className="text-5xl">21,404</span>
                            <span className="text-3xl align-top">.74</span>
                        </div>
                        <div className="text-green-300 text-sm">
                            &uarr; CA$12,955.35 (154.16%)
                        </div>
                    </div>
                    <div className="flex-shrink w-32 inline-block relative">
                        <select
                            className="block appearance-none w-full bg-white border border-grey-light px-4 py-2 pr-8 rounded">
                            <option>BTC</option>
                            <option>ETH</option>
                            <option>LTC</option>
                        </select>
                        <div className="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-gray-300">
                            <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 20 20">
                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                            </svg>
                        </div>
                    </div>
                </div>
                <div className="hidden lg:flex">
                    <div className="w-1/3 text-center py-8">
                        <div className="border-r">
                            <QuoteStatus key={this.props.price} quote_symbol={"USD"} amount={this.props.price}
                                         subtitle={"Bitcoin price"}/>
                        </div>
                    </div>
                    <div className="w-1/3 text-center py-8">
                        <div className="border-r">
                            <QuoteStatus quote_symbol={"GBP"} sign={true} amount={12134.20} subtitle={"since last month"}/>
                        </div>
                    </div>
                    <div className="w-1/3 text-center py-8">
                        <div>
                            <QuoteStatus percentage={true} sign={true} amount={-100.45} subtitle={"since last month"}/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}