#include colour.js

const MamiColourPickerPresetsTab = function(presets) {
    let onChange = () => {};

    const html = <div/>;

    for(const preset of presets)
        html.appendChild(<button class={['colpick-presets-option', `colpick-presets-option-${preset.c}`]}
            style={{ background: MamiColour.hex(preset.c) }} title={preset.n}
            type="button" onclick={() => onChange(preset.c)}/>);

    return {
        getName: () => 'presets',
        getTitle: () => 'Presets',
        getElement: () => html,
        onChange: handler => onChange = handler,
        updateColour: colour => {
            let elem = html.querySelector('.colpick-presets-option-active');
            if(elem !== null)
                elem.classList.remove('colpick-presets-option-active');

            elem = html.querySelector(`.colpick-presets-option-${colour}`);
            if(elem !== null)
                elem.classList.add('colpick-presets-option-active');
        },
    };
};
