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

export class PositionsTable extends Component<{ positions: Array<PositionProp> }> {
    constructor(props) {
        super(props);
    }

    stateColor(state: string): string {
        const lower_state = state.toLowerCase()
        let res: string

        if (lower_state.includes("profit")) {
            res = "green"
        } else if (lower_state.includes("break")) {
            res = "yellow"
        } else {
            res = "red"
        }

        return res
    }


    renderTableHead() {
        return ["status", "currency pair", "base price", "amount", "Profit/Loss", "actions"].map((entry) => {
                return (
                    <th scope="col"
                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        {entry}
                    </th>
                )
            }
        )
    }

    renderTableRows() {
        return this.props.positions.map((position) => {
            const stateBg = "bg-".concat(this.stateColor(position.state)).concat("-100 ")
            const stateText = "text-".concat(this.stateColor(position.state)).concat("-800 ")
            const stateClass = "px-2 inline-flex text-xs leading-5 font-semibold rounded-full ".concat(stateBg).concat(stateText)

            return (
                <tr key={position.id}>
                    {/* Status */}
                    <td className="px-6 py-4 whitespace-nowrap">
                        <span
                            className={stateClass}>
                          {position.state}
                        </span>
                    </td>

                    <td className="px-6 py-1 whitespace-nowrap">
                        <div className="text-sm text-gray-900">{position.symbol}</div>
                        {/*<div className="text-sm text-gray-500">{position.}</div>*/}
                    </td>

                    <td className="px-6 py-1 whitespace-nowrap">
                        <div className="text-sm text-gray-900">{position.base_price.toLocaleString()} USD/BTC</div>
                        {/*<div className="text-sm text-gray-500">Insert total % here?</div>*/}
                    </td>

                    <td className="px-6 py-1 whitespace-nowrap">
                        <div className="text-sm text-gray-900">{position.amount.toFixed(5)} BTC</div>
                        <div className="text-sm text-gray-500">Insert total % here?</div>
                    </td>

                    <td className="px-6 py-1 whitespace-nowrap">
                        <div className="text-sm text-gray-900">{position.profit_loss.toLocaleString()} USD</div>
                        <div className="text-sm text-gray-500">{position.profit_loss_percentage.toFixed(2)}%</div>
                    </td>

                    <td className="px-6 py-1 whitespace-nowrap text-right text-sm font-medium">
                        <div className="p-2 md:w-40">
                            <div
                                className="p-4 flex justify-center bg-red-200 rounded-lg shadow-xs cursor-pointer hover:bg-red-500 hover:text-red-100">
                                <span className="ml-2">Close</span>
                            </div>
                        </div>
                    </td>
                </tr>
            )
        })
    }

    render() {
        return (
            <div className="flex flex-col">
                <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                    <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                        <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                            <table className="min-w-full divide-y divide-gray-200">

                                <thead className="bg-gray-50">
                                <tr>
                                    {this.renderTableHead()}
                                </tr>
                                </thead>

                                <tbody className="bg-white divide-y divide-gray-200">
                                {this.renderTableRows()}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        )
    }
}