import { JSX } from "solid-js";
import { CopyIcon } from "../../icons/CopyIcon";
import { Person } from "../../types/Person";
import { CopyButton } from "./CopyButton";

type HTMLButtonEvent = JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;

export function PersonDisplay(props: {person: Person}) {
    const namesAndSurnames = () => {
        const p = props.person;
        return `${p.person_names} ${p.person_paternal_surname} ${p.person_maternal_surname}`;
    };

    const surnamesAndNames = () => {
        const p = props.person;
        return `${p.person_paternal_surname} ${p.person_maternal_surname} ${p.person_names}`;
    };

    const surnames = () => {
        const p = props.person;
        return `${p.person_paternal_surname} ${p.person_maternal_surname}`;
    };

    const personNames = () => {
        const p = props.person;
        return p.person_names;
    };

    return (
        <div>
            <MaterialLabel text={props.person.person_paternal_surname} resource="Apellido Paterno" />
            <MaterialLabel text={props.person.person_maternal_surname} resource="Apellido Materno" />
            <MaterialLabel text={personNames()} resource="Nombres" />


            <div class={"relative max-w-[14rem] mx-auto my-6"}>
                <CopyButton copyText={namesAndSurnames()}>
                    <CopyIcon fill="var(--c-on-primary-container)" />
                                &nbsp;
                                Nombres y <b>Apellidos</b>
                </CopyButton>

                <CopyButton copyText={surnamesAndNames()}>
                    <CopyIcon fill="var(--c-on-primary-container)" />
                                &nbsp;
                    <b>Apellidos</b> y Nombres
                </CopyButton>

                <div class="grid grid-cols-2 gap-2">
                    <CopyButton copyText={surnames()}>
                        <CopyIcon fill="var(--c-on-primary-container)" />
                                    &nbsp;
                        <b>Apellidos</b>
                    </CopyButton>
                    <CopyButton copyText={personNames()}>
                        <CopyIcon fill="var(--c-on-primary-container)" />
                                    &nbsp;
                                    Nombres
                    </CopyButton>
                </div>
            </div>
        </div>
    );
}


function MaterialLabel(props: {text: string, resource: string}) {
    const copyToClipboard: HTMLButtonEvent = (ev) => {
        ev.preventDefault();

        if (props.text !== "") {
            navigator.clipboard.writeText(props.text);
        }
    };

    return (
        <div class="relative max-w-[14rem] mx-auto my-6">
            <label class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">
                {props.resource}
            </label>
            <span
                class="bg-c-background text-c-on-background border-c-outline
                border-2 rounded px-2 py-1 w-full inline-block font-mono
                disabled:opacity-50 disabled:cursor-not-allowed"
            >
                {props.text}
                <span class="select-none">&nbsp;</span>
            </span>

            <button
                type="button"
                class="absolute top-1 right-1 rounded hover:bg-c-surface-variant"
                onclick={copyToClipboard}
            >
                <CopyIcon fill="var(--c-on-surface)" />
            </button>
        </div>
    );
}



