'use client';

import { ef } from '@/lib/helpers/utfNumbers';
import { EmojiHappy, Microphone2, Paperclip2 } from 'iconsax-react';
import React, { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next';

type Props = object

type MessageModel = {
    type: "sender" | "receiver",
    senderName: string,
    content: string,
    date: string,
    time: string,
}

function ChatIndex({ }: Props) {

    const { t } = useTranslation('chat');

    const [messages, setMessages] = useState<Array<MessageModel>>([
        {
            type: "sender",
            senderName: "علی مصلحی",
            content: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است',
            date: '1403/09/30',
            time: '10:07'
        },
        {
            type: 'receiver',
            senderName: 'سیما فرهادی',
            content: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است',
            date: '1403/09/30',
            time: '10:07'
        },
    ]);

    const addMessageOutgoing = (model: MessageModel) => {
        setMessages((previous) => {
            return [...previous, model]
        })
    }

    const submitMessage = async (formData: FormData) => {
        const content = formData.get('textMessage');
        if (!content) return;
        const model: MessageModel = {
            type: 'sender',
            senderName: 'علی مصلحی',
            content: String(content),
            date: '1403/09/30',
            time: '10:07'
        }
        addMessageOutgoing(model);
    };


    const messagesMemo = useMemo(() => messages, [messages]);

    return (
        <section className="flex flex-col h-full pt-6">
            <h1 className="font-medium">علی مصلحی</h1>

            <div className="bg-container rounded-[30px] flex flex-col justify-between mt-6 flex-1 px-6 pt-7 pb-8 overflow-hidden">
                <div className="overflow-y-auto flex flex-col-reverse">
                    <ul className="grid gap-6 pb-6 ">
                        {messagesMemo.map((v, i) => {
                            if (v.type === "sender") {
                                return (
                                    <li key={i} className='bg-[#F6F7FA] rounded-[30px] rounded-tr-none p-6'>
                                        <article>
                                            <p className='text-xs2'>
                                                {v.content}
                                            </p>

                                            <span dir='ltr' className='text-[11px] float-end text-disabled-text mt-2.5'>
                                                {ef(`${v.time}  |  ${v.date}`)}
                                            </span>
                                        </article>
                                    </li>
                                )
                            }
                            else {
                                return (
                                    <li key={i} className='bg-[#EBEDF5] rounded-[30px] rounded-tl-none p-6'>
                                        <article>
                                            <h6 className='text-xs font-medium'>
                                                {v.senderName}
                                            </h6>
                                            <p className='text-xs2 mt-2.5'>
                                                {v.content}
                                            </p>

                                            <span dir='ltr' className='text-[11px] float-end text-disabled-text mt-2.5'>
                                                {ef(`${v.time}  |  ${v.date}`)}
                                            </span>
                                        </article>
                                    </li>
                                )
                            }
                        })}
                    </ul>
                </div>

                <section aria-labelledby={t("InputMessage.AriaLabelBy")} className="w-full">
                    <form
                        action={submitMessage}
                        className="focus-within:outline-blue-400 outline outline-transparent transition-colors duration-100 flex items-center gap-0 bg-transparent border border-[#D0D0D0] h-12 rounded-xl py-2.5 px-2"
                    >
                        <button type="button" className="active:bg-neutral-100 transition-colors duration-150 rounded-full p-1">
                            <Microphone2 className="stroke-foreground" size={24} />
                        </button>
                        <input
                            name="textMessage"
                            role="textbox"
                            autoComplete="off"
                            className="w-full text-[11px] h-full outline-none ms-1"
                            type="text"
                            placeholder={t("InputMessage.Placeholder")}
                        />
                        <button type="button" className="active:bg-neutral-100 transition-colors duration-150 rounded-full p-1.5">
                            <EmojiHappy className="stroke-disabled2" size={20} />
                        </button>
                        <button type="button" className="active:bg-neutral-100 transition-colors duration-150 rounded-full p-1.5">
                            <Paperclip2 className="stroke-disabled2" size={20} />
                        </button>
                    </form>
                </section>
            </div>
        </section>
    )
}

export default ChatIndex