import { FC, useEffect } from "react";
import { Grid, Box, Typography, Button } 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 style={{ marginBottom: 80 }}>
            {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>
        <Box
          sx={{
            height: 80,
            background: "#eeeeee",
            borderTop: "1px solid #ddd",
            position: "absolute",
            bottom: 0,
            width: "100%",
            zIndex: 1000,
          }}
        >
          <Grid
            container
            spacing={4}
            justifyContent="center"
            alignItems="center"
            alignContent={"center"}
            sx={{ height: 72 }}
          >
            <Grid item>
              <Button
                variant="contained"
                disableElevation
                sx={{
                  fontFamily: "Poppins, sans-serif",
                  fontWeight: 700,
                  borderRadius: 2,
                  textTransform: "none",
                  backgroundColor: "#1982FC",
                  padding: "6px 30px",
                  margin: "20px 0px",
                  whiteSpace: "nowrap",
                  py: "10px",
                }}
              >
                Reply to ticket
              </Button>
            </Grid>
            <Grid item>
              <Button
                variant="contained"
                disableElevation
                sx={{
                  fontFamily: "Poppins, sans-serif",
                  fontWeight: 700,
                  borderRadius: 2,
                  textTransform: "none",
                  color: "black",
                  backgroundColor: "#FFB620",
                  padding: "6px 30px",
                  margin: "20px 0px",
                  whiteSpace: "nowrap",
                  py: "10px",
                }}
              >
                Write note to agent
              </Button>
            </Grid>
          </Grid>
        </Box>
      </MainContainer>
    </>
  );
};