import { HomeIcon } from "../icons/HomeIcon";
import {createSignal, Show, type JSX, For} from "solid-js";
import { DocxIcon } from "../icons/DocxIcon";
import { ScanIcon } from "../icons/ScanIcon";
import { KeyIcon } from "../icons/KeyIcon";
import { PaletteIcon } from "../icons/PaletteIcon";
import { A } from "@solidjs/router";
import { Dialog } from "./Dialog";
import { Portal } from "solid-js/web";
import { applyColors } from "../colorManager";

export function NavRail() {
    return (
        <div>
            <div class="flex flex-col justify-center items-center h-screen overflow-x-hidden">
                <NavRailButton path="/" name="Inicio" icon={<HomeIcon />} />
                <NavRailButton path="/certs" name="Certs" icon={<DocxIcon />} />
                <NavRailButton path="/accesos" name="Accesos" icon={<KeyIcon />} />
                <NavRailButton path="/escaneo" name="Escaneo" icon={<ScanIcon />} />
                <ColorSelector />
            </div>
            <div id="color-selector" />
        </div>
    );
}

function NavRailButton(props: {
    name: string,
    icon: JSX.Element,
    path: string,
}) {
    const anchorEl = (
        <A
            class="my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
                max-w-[4rem] inline-block select-none"
            href={props.path}
            end
        >
            <div class={"p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors"}>
                {props.icon}
            </div>
            <span class="text-sm">
                {props.name}
            </span>
        </A>
    );



    return anchorEl;
}

function ColorSelector() {
    const [showSelector, setShowSelector] = createSignal(false);
    const colors: Array<{name: string, color: string}> = [
        {
            name: "Verde",
            color: "green",
        },
        {
            name: "Azul",
            color: "blue",
        },
        {
            name: "Amarillo",
            color: "yellow",
        },
        {
            name: "Rosado",
            color: "pink",
        },
        {
            name: "Naranja",
            color: "orange",
        },
        {
            name: "Rojo",
            color: "red",
        },
    ];

    const showColorSelector = () => {
        setShowSelector(true);
    };

    return (
        <>
            <button
                class="relative my-3 text-center group hover:bg-c-surface-variant rounded-xl transition-colors
                max-w-[4rem] inline-block select-none"
                onclick={showColorSelector}
            >
                <div class={"p-1 inline-block group-[.active]:bg-c-surface-variant min-w-[4rem] rounded-full transition-colors"}>
                    <PaletteIcon />
                </div>
                <span class="text-sm">
                Colores
                </span>
            </button>
            <Portal mount={document.getElementById("color-selector")!}>
                <Show when={showSelector()}>
                    <Dialog
                        class="absolute left-[5rem] w-[15rem] top-[60%] z-10
                                border border-c-outline p-2
                                shadow-md rounded-md"
                        onClose={() => setShowSelector(false)}
                    >
                        <div class="w-full grid grid-cols-3 gap-2">
                            <For
                                each={colors}
                            >
                                {({name, color}) => <ColorButton name={name} color={color} />}
                            </For>
                        </div>
                    </Dialog>
                </Show>
            </Portal>
        </>
    );
}

function ColorButton(props: {name: string, color: string}) {
    const select = () => {
        applyColors(props.color);
    };

    return (
        <button
            class="text-center bg-c-outline rounded pt-2
                    border border-c-transparent hover:border-c-outline transition-colors"
            style={{"background-color": `var(--c-${props.color}-surface-variant)`}}
            onclick={select}
        >
            <span
                class="inline-block w-8 h-8 rounded-full"
                style={{"background-color": `var(--c-${props.color}-primary)`}}
            />
            <br />
            {props.name}
        </button>
    );
}
