/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from './message.module.scss'
import ReadMessage from './read-message'
import DeleteConfirmation from '../Modals/delete_confirmation'
import { useState } from 'react'

const Message = ({ message }: any) => {
  const [readModal, setReadModal] = useState(false)
  const [deleteModal, setDeleteModal] = useState(false)
  const { title, content } = message

const handleReadMessage = () => {
    setReadModal(!readModal)
  }

const handleToggleDelete = () => {
    setDeleteModal(!deleteModal)
  }

const handleDelete = () => {
    alert('Resource has been deleted')
  }
  return (
    <>
      {readModal ? <ReadMessage closeModal={handleReadMessage} message={message} /> : null}
      {deleteModal ? (
        <DeleteConfirmation
          handleDelete={handleDelete}
          closeModal={handleToggleDelete}
          item={message}
        />
      ) : null}
      <div className={styles['message']}>
        <span>Message</span>
        <h4>{title}</h4>
        <p>{content}</p>
        <div className={styles['message__buttons']}>
          <div onClick={() => handleReadMessage()} className={styles['message__buttons--read']}>
            Read more
          </div>
          <div onClick={() => handleToggleDelete()} className={styles['message__buttons--delete']}>
            Delete Message
          </div>
        </div>
      </div>
    </>
  )
}

export default Message