dmenu-plus-front/src/app/[name]/(Main)/chat/[id]/page.tsx

'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'
import { glassSurfaceCard } from '@/lib/styles/glassSurface'

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 = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    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={glassSurfaceCard('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] dark:bg-gray-700 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] dark:bg-gray-600 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
            onSubmit={submitMessage}
            className='focus-within:outline-blue-400 outline outline-transparent transition-colors duration-100 flex items-center gap-0 bg-transparent border border-border h-12 rounded-xl py-2.5 px-2'
          >
            <button
              type='button'
              className='active:bg-neutral-100 dark:active:bg-neutral-600 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 dark:active:bg-neutral-600 transition-colors duration-150 rounded-full p-1.5'
            >
              <EmojiHappy
                className='stroke-disabled2 dark:stroke-neutral-400'
                size={20}
              />
            </button>
            <button
              type='button'
              className='active:bg-neutral-100 dark:active:bg-neutral-600 transition-colors duration-150 rounded-full p-1.5'
            >
              <Paperclip2
                className='stroke-disabled2 dark:stroke-neutral-400'
                size={20}
              />
            </button>
          </form>
        </section>
      </div>
    </section>
  )
}

export default ChatIndex