import { html, css } from 'lit';
import { dispatchUpdate } from "../state/store";
import OlComponent from './OlComponent'

export default class ColorComponent extends OlComponent {
    override styles = css`
    .color-buttons button {
        border-radius: 20px;
        width: 20px;
        height: 20px;
        border: .5px solid black;
    }
    .color-buttons button:hover {
        box-shadow: 2px 2px 3px 2px rgba(0,0,0,.1);
        opacity: 1;
    }
`
    updateColor(clr: string): void{
        dispatchUpdate("highlightColor", clr);
    }

    override render() {
        return (
            html`
            <style>${this.styles}</style>
            <div class="color-buttons container">
                <button style="background:yellow" @click=${() => this.updateColor("yellow")} part="button"></button>
                <button style="background:orange" @click=${() => this.updateColor("orange")} part="button"></button>
                <button style="background:red" @click=${() => this.updateColor("red")} part="button"></button>
                <button style="background:purple" @click=${() => this.updateColor("purple")} part="button"></button>
                <button style="background:blue" @click=${() => this.updateColor("blue")} part="button"></button>
                <button style="background:green" @click=${() => this.updateColor("green")} part="button"></button>
            </div>`
        )
    }
}