import React from 'react';

require('./ToggleButtons.scss');

const noop = () => null;

export default ({ options, value, size, onChange, labelKey = "label", valueKey = "value", simpleValue = true }) => {
    if (!Array.isArray(options) || !options.length) {
        return null;
    }

    let onClick = null;
    if (typeof onChange === "function") {
        if (simpleValue) {
            onClick = (val) => () => onChange(val[valueKey]);
        } else {
            onClick = (val) => () => onChange(val);
        }
    } else {
        onClick = noop;
    }


    let equals = simpleValue ? (v1, v2) => v1 == v2[valueKey] : (v1, v2) => v1[valueKey] == v2[valueKey];


    return (
        <div className="ToggleButtons">
            { options.map((opt, key) => {
                    return <button type="button" className={ equals(value, opt) ? "selected" : "" } key={ opt[valueKey] || `_empty_${key}` } onClick={ onClick(opt) }>{ opt[labelKey] }</button>
                }) 
            }
        </div>
    );
}