import { html, css } from 'lit';
import { Styles } from '../types/types';
import SemiSelectorComponent from './SemiSelectorComponent';
import { accessStore, dispatchUpdate } from '../state/store';
import OlComponent from './OlComponent';
import { STYLES } from '../styles';

export default class MoreComponent extends OlComponent {
    update: <K extends keyof Styles>(key: K, value: Styles[K]) => void;

    constructor(update: <K extends keyof Styles>(key: K, value: Styles[K]) => void) {
        super();
        this.update = update;
    }

    // The components that are spawned by the buttons.
    private components = {
        wordSpacing: new SemiSelectorComponent("word-spacing", (lh) => {
            this.update("word-spacing", lh as Styles["word-spacing"])
        }, "word-spacing: ?;", STYLES["word-spacing"].reduce((acc, key) => ({ ...acc, [key]: '| |' }), {})),

        lineSpacing: new SemiSelectorComponent("line-height", (lh) => {
            this.update("line-height", lh as Styles["line-height"])
        }, "line-height: ?;"),

        textAlign: new SemiSelectorComponent("text-align", (lh) => {
            this.update("text-align", lh as Styles["text-align"])
        }),

        bgColor: new SemiSelectorComponent("background-color", (bgc) => {
            this.update("background-color", bgc as Styles["background-color"])
        }, "background-color: ?; font-size: 0; width: 22.5px; left: 12.5px; height: 22.5px; border-radius: 100%; border: 1px solid black;",
            25),

        //speedReader: new SpeedReaderComponent(),

        //highlightColor: new HighlightColorComponent(),
    }

    // Initialize current component
    private curComponent: {
        id: keyof typeof this.components | null,
        component: OlComponent | null
    } = {
            id: null,
            component: null
        }

    // Change current component
    showComponent = (id: keyof typeof this.components) => {
        dispatchUpdate("moreToolbar", !accessStore("moreToolbar"));
        if (this.curComponent.id == id) {
            this.curComponent = { id: null, component: null }
        } else {
            this.curComponent = { id, component: this.components[id] }
            dispatchUpdate("moreToolbar", true);
        }
    }

    readerUpdate = () => {
        dispatchUpdate("reader", !accessStore("reader"));
    }

    highlightUpdate = () => {
        dispatchUpdate("highlight", !accessStore("highlight"));
    }

    override styles = css`
        @keyframes fadeIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .more-container {
            display: flex;
            transform: translateY(calc(90px - 50%)) scale(1);
            background: white;
            box-shadow: 0 0 2px 2px rgba(0,0,0, .2);
            border-radius: 25px;
            padding: 3px;
            flex-wrap: wrap;
            z-index: 101;
            animation: .3s ease-in 0s 1 fadeIn;
        }
        .even-more {
            position: absolute;
            flex: 1;
            bottom: 0;
            transform: translateY(calc(-90px + 50%));
            background-color: white;
            box-shadow: 0 0 2px 2px rgba(0,0,0, .2);
            border-radius: 25px;
            flex-direction: column;
            z-index: -1;
            padding: 3px;
        }
    `

    handleReset = () => {
        Object.keys(STYLES).forEach((key) => {
            this.update(key as keyof Styles, "initial")
        })
    }

    override render() {
        return (
            html`
            <style>${this.styles}</style>
            <div class="more-container">
                <div class="even-more" style="${!this.curComponent.component ? "display: none" : "display:block"}">${this.curComponent.component?.render()}</div>
                <div id="more-component" class="container">
                    <button @click=${() => this.showComponent('lineSpacing')} part="button">
                        <span class="material-icons">format_line_spacing</span>
                    </button>
                    <button @click=${() => this.showComponent('wordSpacing')} part="button">
                        <span class="material-icons">space_bar</span>
                    </button>
                    <button @click=${() => this.showComponent('bgColor')} part="button">
                        <span class="material-icons">format_color_fill</span>
                    </button>
                    <button @click=${() => this.showComponent('textAlign')} part="button">
                        <span class="material-icons">format_align_justify</span>
                    </button>
                    <button style="background:${accessStore("highlight") ? "#0000FF44" : "inherit"}" @click=${() => this.highlightUpdate()} part="button">
                        <span class="material-icons">highlight</span>
                    </button>
                    <button @click=${() => this.handleReset()} part="button">
                        <span class="material-icons">replay</span>
                    </button>
                </div>
            </div>`
        )
    }
}

/*
<button @click=${() => this.showComponent('highlightColor')} part="button">
    <span class="material-icons">colorize</span>
</button>
<button style="background:${accessStore("highlight") ? "#0000FF44" : "inherit"}" @click=${() => this.highlightUpdate()} part="button">
    <span class="material-icons">highlight</span>
</button>
*/