import { FC, useEffect } from "react";
import { Grid, Box, Typography } from "@mui/material";
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  MessageInput,
  Conversation,
  ConversationHeader,
} from "@chatscope/chat-ui-kit-react";

interface TicketDetailProps {
  ticket: any;
  articles: any[];
}

export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
  console.log({ here: "here", ticket });
  return (
    <MainContainer>
      <ChatContainer>
        <ConversationHeader>
          <ConversationHeader.Content>
            <Box
              sx={{
                width: "100%",

                textAlign: "center",
                fontWeight: "bold",
              }}
            >
              <Typography
                variant="h5"
                sx={{ fontFamily: "Poppins", fontWeight: 700 }}
              >
                {ticket.title}
              </Typography>
              <Typography
                variant="h6"
                sx={{ fontFamily: "Roboto", fontWeight: 400 }}
              >{`Ticket #${ticket.number} (created ${new Date(
                ticket.created_at
              ).toLocaleDateString()})`}</Typography>
            </Box>
          </ConversationHeader.Content>
        </ConversationHeader>
        <MessageList>
          {articles.map((article: any) => (
            <Message
              className={
                article.internal
                  ? "internal-note"
                  : article.sender === "Agent"
                  ? "outgoing-message"
                  : "incoming-message"
              }
              model={{
                message: article.body.replace(/<div>*<br>*<div>/g, ""),
                sentTime: article.updated_at,
                sender: article.from,
                direction: article.sender === "Agent" ? "outgoing" : "incoming",
                position: "last",
                type: "html",
              }}
            />
          ))}
        </MessageList>
        {/* <MessageInput
          placeholder="Type message here"
          sendOnReturnDisabled
          attachButton={false}
          sendButton={false}
            /> */}
      </ChatContainer>
    </MainContainer>
  );
};
