/** @jsx jsx */
import * as React from "react";
import { jsx } from "@emotion/core";
import Flex from "../components/layout/Flex";

import Fill from "./Fill";
import Button from "../components/parts/Button";

type KnobConfig = {
    setKnob: (value: any) => void;
    value: any;
    name: string;
}
// Knobs
export interface KnobsProps {
    knobs?: KnobConfig[]
    title?: string;
    currentValue?: any;
}

const Knobs: React.FC<KnobsProps> = ({
    title,
    currentValue,
    knobs
}): React.ReactElement => {
    return (
        <Flex shrink hAlignment="center" pad="medium" gap="small" vAlignment="middle">
            <Fill>{title}</Fill>
            {knobs && knobs.map((knob,  index) => 
                <Button
                    key={index}
                    variant={knob.value === currentValue ? "primary" : "outlined"}
                    onClick={() => knob.setKnob(knob.value)}
                >
                   {knob.name}
                </Button>
            )}
        </Flex>
    );
};

export default Knobs;