import { createMemo } from "solid-js";
import { OutlinedCard } from "../../components/OutlinedCard";
import { CopyIcon } from "../../icons/CopyIcon";
import { Person } from "../../types/Person";
import { ClassroomCourse } from "../../types/ClassroomCourse";

export function Message(props: {
    courses: Array<ClassroomCourse>,
    person: Person,
}) {
    const personMessage = createMemo(() => `
Estimado/a: ${props.person.person_paternal_surname} ${props.person.person_maternal_surname}, ${props.person.person_names}
Ha sido registrado a la plataforma EEGSAC VIRTUAL con los siguientes parámetros:
Nombre de usuario: ${props.person.person_classroom_username ?? "--"}
Contraseña: ${props.person.person_dni}

Le recordamos que los cursos a los cual accedió son:

${props.courses.map((course) => `- ${course.name}`).join("\n")}

Gracias por registrarse en EEGSAC VIRTUAL.
El enlace para acceder a la plataforma EEGSAC VIRTUAL es : https://aulavirtual.eegsac.com/
Para cualquier aclaración no dude en contactar con nosotros.
Cordialmente
EEGSAC, Administrador
Responsable EEGSAC VIRTUAL
T. (+51) 958 916 210
Correo electrónico: soporte@eegsac.com
        `.trim());

    const companyMessage = `
Buen día estimado,
Se adjunta usuario, contraseña y cursos de la plataforma virtual para el personal solicitado.

El vínculo para acceder al aula virtual es el siguiente: https://aulavirtual.eegsac.com/ .
Quedo atenta cualquier duda o consulta.
Saludos Cordiales.
    `.trim();

    return (
        <OutlinedCard class="w-[24rem] h-[35rem] overflow-hidden">
            <h2 class="text-xl p-3 bg-c-surface-variant text-c-on-surface-variant">
                Generar mensajes
            </h2>

            <div>
                <h3 class="px-4 pt-2 font-bold">
                    <button
                        class="mr-2 hover:bg-c-surface-variant rounded"
                        title="Copiar"
                        onclick={() => {
                            navigator.clipboard.writeText(personMessage());
                        }}
                    >
                        <CopyIcon fill="var(--c-primary)" />
                    </button>
                    Mensaje usuario natural:
                </h3>
                <div class="p-4">
                    <pre
                        class="w-full p-2 bg-c-surface text-c-on-surface
                        border border-c-outline rounded font-mono text-sm
                        max-h-[15rem] overflow-x-scroll shadow-md"
                    >
                        {personMessage()}
                    </pre>
                </div>

                <h3 class="px-4 font-bold">
                    <button
                        class="mr-2 hover:bg-c-surface-variant rounded"
                        title="Copiar"
                        onclick={() => {
                            navigator.clipboard.writeText(companyMessage);
                        }}
                    >
                        <CopyIcon fill="var(--c-primary)" />
                    </button>
                    Mensaje empresa:
                </h3>
                <div class="p-4">
                    <pre
                        class="w-full p-2 bg-c-surface text-c-on-surface
                        border border-c-outline rounded font-mono text-sm
                        max-h-36 overflow-x-scroll shadow-md"
                    >
                        {companyMessage}
                    </pre>
                </div>
            </div>
        </OutlinedCard>
    );
}
