"use client";

import {ScrollArea} from "@/components/ui/scroll-area";
import SessionChatBubble from "@/app/(patients)/app/sessions/[sessionId]/_components/_session_chat_bubble";
import {Separator} from "@/components/ui/separator";
import {Textarea} from "@/components/ui/textarea";
import {Label} from "@/components/ui/label";
import {Switch} from "@/components/ui/switch";
import {Button} from "@/components/ui/button";
import {useState} from "react";
import {Session, SessionMessage} from "@/lib/backend/appwrite_types";
import {Models} from "node-appwrite";

type SessionDetailsPageProps = {
    sessionMessages: SessionMessage[];
    session: Session;
    currentUser: Models.User<Models.Preferences>;
}

export default function SessionDetailsPage(props: SessionDetailsPageProps) {
    const [sessionMessages, setSessionMessages] = useState<SessionMessage[]>(props.sessionMessages);

    return (
        <>
            <ScrollArea className={"flex-1"}>
                {
                    Array.isArray(sessionMessages) &&
                    sessionMessages.map((sessionMessage, index) => {
                        return (
                            <SessionChatBubble
                                key={index}
                                dateSent={sessionMessage.$updatedAt}
                                message={sessionMessage.message}
                                isReply={sessionMessage.senderId === props.currentUser.$id}
                                senderName={sessionMessage.senderId}
                                isSystemMessage={sessionMessage.senderId === "system"}/>
                        )
                    })
                }

            </ScrollArea>

            <div className="flex flex-col">
                <Separator/>
                <div className="p-4">
                    <form>
                        <div className="grid gap-4">
                            <Textarea
                                className="p-4"
                                placeholder={`Reply here...`}
                            />
                            <div className="flex items-center">
                                <Label
                                    htmlFor="mute"
                                    className="flex items-center gap-2 text-xs font-normal"
                                >
                                    <Switch id="mute" aria-label="Mute thread"/> Mute this thread
                                </Label>
                                <Button
                                    size="sm"
                                    className="ml-auto"
                                >
                                    Send
                                </Button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </>
    )
}
