#include colour.js

const MamiColourPickerGridTab = function() {
    let onChange = () => {};

    const greys = [0xFFFFFF, 0xEBEBEB, 0xD6D6D6, 0xC2C2C2, 0xADADAD, 0x999999, 0x858585, 0x707070, 0x5C5C5C, 0x474747, 0x333333, 0];
    const colours = [0x00A1D8, 0x0061FE, 0x4D22B2, 0x982ABC, 0xB92D5D, 0xFF4015, 0xFF6A00, 0xFFAB01, 0xFDC700, 0xFEFB41, 0xD9EC37, 0x76BB40];
    const shades = [-.675, -.499, -.345, -.134, 0, .134, .345, .499, .675];

    const html = <div/>;

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

    for(const shade of shades)
        for(const colour of colours) {
            const shaded = MamiColour.shaded(colour, shade);
            html.appendChild(<button class={['colpick-grid-option', `colpick-grid-option-${shaded}`]}
                style={{ background: MamiColour.hex(shaded) }}
                type="button" onclick={() => onChange(shaded)}/>);
        }

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

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