"use client";

import style from "./style.module.css";
import Textbox from "@core/app/components/Textbox/Textbox";
import Button from "@core/app/components/Button/Button";
import { useOrgDataStore } from "@core/Store/OrganizationData.Store";
import { PublicOrganizationView } from "@core/Models/Company.model";
import { useEffect, useState } from "react";
import { sendMessage } from "@core/app/messenger/Messages.service";
import { MESSAGE_CONVERSATION_TYPES, SendMessageParams } from "@core/Models/Messages.model";
import { useSessionStore } from "@core/Store/Sesion.Store";
import { useAlert } from "@core/Store/Alert.Store";

export default function OrganizationPublicProfile() {
    const SessionInfo = useSessionStore();
    const alert = useAlert();
    const OrganizationData = useOrgDataStore();
    const [orgData, setOrgData] = useState<PublicOrganizationView>();
    const [comments, setComments] = useState<string>("");

    useEffect(() => {
        if (!OrganizationData.orgData) return;
        setOrgData(OrganizationData.orgData);
    }, [OrganizationData.orgData]);

    const send = () => {
        if (!orgData) return;

        const conversationType = MESSAGE_CONVERSATION_TYPES.USER_TO_ORG;

        const sendMessageData: SendMessageParams = {
            conversationId: undefined,
            type: conversationType,
            userIdFrom: SessionInfo.userId,
            userIdTo: undefined,
            companyId: orgData.id,
            message: comments,
            sessionUser: SessionInfo.userId,
        };

        sendMessage(sendMessageData)
            .then(() => {
                alert.showSuccess("Mensaje enviado");
                setComments("");
            })
            .catch((error) => {
                alert.showError(error);
            });
    };

    return (
        <>
            {orgData && (
                <div className="homeCentered">
                    <div className={style.organizationContent}>
                        <h1 className="homeTitleHeader">Contactate con nosotros</h1>
                        <p className="homeResumeHeader">
                            ¿Tienes preguntas, sugerencias o necesitas más información? Estás en el
                            lugar indicado. Aquí puedes ponerte en contacto directamente con nuestro
                            equipo.{" "}
                            <b>
                                Para enviar tu mensaje, es necesario estar registrado en el sitio.{" "}
                            </b>
                            Completa el formulario y te responderemos lo antes posible. ¡Será un
                            placer ayudarte!
                        </p>
                        <Textbox
                            type="comments"
                            placeholder="Escribe tu mensaje"
                            value={comments}
                            width="100%"
                            style={{ height: "200px" }}
                            onChange={(e) => setComments(e.target.value)}
                        />
                        <Button
                            color="primary"
                            text="Enviar"
                            width="100%"
                            style={{ marginTop: "20px", marginBottom: "20px" }}
                            onClick={send}
                        />
                    </div>
                </div>
            )}
        </>
    );
}
