import { Show, createSignal } from "solid-js"

type ButtonProps = {
    link?: string,
    action?: () => void,
    disabled?: boolean,
    text: string,
    encryptedMail?: string
}

const [showHint, setShowHint] = createSignal(false)

const executeThenHref = async (action: ()=>void, link: string) => {
    await action()
    window.location.href = link
}

const routeToEncryptedMail = (mail: string) => {
    location.href = `mailto:${atob(mail)}`;
    setTimeout(() => {
        setShowHint(true)
    }, 2000);
}


export const Button = (props: ButtonProps) => {
    return (
        <>
            <Show when={props.link}>
                <a href={props.link} class={`col-span-2 w-full h-16 text-center items-center text-xl justify-center shadow-md shadow-zinc-500 border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}>
                    {props.text}
                </a>
            </Show>
            <Show when={props.action}>
                <button onclick={()=>props.action} class={`col-span-2 w-full h-16 text-center items-center text-xl justify-center shadow-md shadow-zinc-500 border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}>
                    {props.text}
                </button>
            </Show>
            <Show when={props.action && props.link}>
                <button onclick={()=>executeThenHref(props.action, props.link)} class={`col-span-2 w-full h-16 text-center items-center text-xl justify-center shadow-md shadow-zinc-500 border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}>
                    {props.text}
                </button>
            </Show>
            <Show when={props.encryptedMail}>
                <button onclick={()=>routeToEncryptedMail(props.encryptedMail)} class={`col-span-2 w-full h-16 text-center items-center text-xl justify-center shadow-md border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}>
                    {props.text}
                </button>
                <Show when={showHint()}>
                    <p class="text-zinc-50 text-left mt-5">E-Mail App öffnet sich nicht? Hier die E-Mail adresse: <span class="mt-2 text-emerald-200">{atob(props.encryptedMail)}</span></p>
                </Show>
            </Show>
        </>
    )
}