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

export default class SpeedReaderComponent extends OlComponent {
    constructor() {
        super();
    }

    toggleReader() {
        dispatchUpdate("reader", !accessStore("reader"));
    }

    override styles = css`
        .lh-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .lh-buttons button {
            border-radius: 20px;
            border: none;
            white-space: nowrap;
            text-align: center;
        }
        .lh-buttons button:hover {
            box-shadow: 2px 2px 3px 2px rgba(0,0,0,.1);
            opacity: 1;
        }
        .lh-buttons label {
            font-size: 10px
        }
        .lh-buttons p {
            padding: 0;
            margin: 0;
        }
        input[type=range][data-orient=vertical] {
            -webkit-appearance: slider-vertical; /* Chromium */
            width: 8px;
            height: 100px;
            padding: 0 5px;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 30px;
            height: 20px;
        }

        /* Hide default HTML checkbox */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 13px;
            width: 13px;
            left: 2px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(13px);
            -ms-transform: translateX(13px);
            transform: translateX(13px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 20px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    `

    updateSpeed(e: InputEvent) {
        if (!e.currentTarget) return;
        // @ts-ignore
        const { value } = e.currentTarget;
        dispatchUpdate("readerSpeed", value);
    }

    override render() {

        return (
            html`
            <style>${this.styles}</style>
            <div class="lh-buttons container">
                <label class="switch">
                    <input type="checkbox" @click=${() => { this.toggleReader() }}
                    ?checked= "${accessStore("reader") ? true : false}">
                    <span class="slider round"></span>
                </label>
                <label>WPM</label>
                <input type="range" 
                    @input=${(e: InputEvent) => this.updateSpeed(e)}
                    data-orient="vertical"
                    step="5"
                    value="100"
                    min="10"
                    max="200"
                />
                <p>${accessStore("readerSpeed")}</p>
            </div>`
        )
    }
}

export interface SpeedReaderSettings {
    on: boolean,
    wpm: number
}