import {Button, ButtonGroup, Dropdown} from "react-bootstrap";
import React, {Component} from "react";
import DropdownItem from "react-bootstrap/DropdownItem";
import {CurrencyPair} from "../types";


export type CurrencyPairProps = {
    active_pair: CurrencyPair,
    pairs: Array<CurrencyPair>
}

export class CurrencyDropdown extends Component<CurrencyPairProps> {
    constructor(props) {
        super(props);
    }

    dropdownItems() {
        return this.props.pairs.map((pair) => {
            return (
                <DropdownItem key={String(pair.base) + String(pair.quote)}> {pair.base} / {pair.quote} </DropdownItem>)
        })
    }

    render() {
        return (
            <Dropdown as={ButtonGroup} className={"mr-3"}>
                <Button variant="outline-primary"><b>{this.props.active_pair.base} / {this.props.active_pair.quote}</b></Button>

                {this.props.pairs.length > 0 &&

                <>
                    <Dropdown.Toggle split variant="primary" id="dropdown-split-basic"/>

                    <Dropdown.Menu className={"mr-3"}>
                        {this.dropdownItems()}
                    </Dropdown.Menu>
                </>
                }

            </Dropdown>
        )
    }

}

