text: /* eslint-disable no-unused-vars */
  import React, { useState, useEffect } from "react";
  import {
    Grid,
    Paper,
    makeStyles,
    TextField,
    TextareaAutosize,
  } from "@material-ui/core";
  import Avatars from "./Avatars";
  import { Typography } from "@material-ui/core";
  import Box from "@material-ui/core/Box";
  import SendIcon from "@material-ui/icons/Send";
  import Divider from "./Divider";
  import CancelPresentationTwoToneIcon from '@material-ui/icons/CancelPresentationTwoTone';
  import CancelPresentation from "./CancelPresentation";
  import { format } from "date-fns-jalali";
  import FileUploader from "./FileUploader";
  import io from "socket.io-client";
  import Messages from "./Messages";
  import Emoji from "./Emoji";
  import clsx from "clsx";
  import RatingSupport from "./RatingChat";
  const useStyles = makeStyles((theme) => ({
    root: {
      width: "100%",
    },
  
    paper: {
      width: "100%",
      marginBottom: theme.spacing(2),
      padding: "20px",
    },
    header: {
      border: "1px solid black",
      padding: "20px",
      marginBottom: "8px",
      boxShadow: "",
    },
    avatar: {
      textAlign: "center",
    },
    text: {
      marginLeft: "30px",
      marginTop: "10px",
      marginBottom: "10px",
    },
    body: {
      border: "1px solid black",
      padding: "20px",
    },
  
    box1: {
      borderRadius: "8px",
      backgroundColor: "#00D69A",
      color: "#fff",
      display: "inline-block",
      margin: "30 auto",
      height: "3rem",
    },
    box2: {
      borderRadius: "8px",
      backgroundColor: "#2979FF",
      color: "#fff",
      display: "inline-block",
    },
    footerhead: {
      borderRadius: "10px",
      marginTop: "10px",
      marginLeft: "20px",
    },
    footer: {
      borderRadius: "10px",
      // border: "1px solid black",
      marginTop: "10px",
    },
    footerbox: {
      marginTop: "10px",
      height: "10%",
  
      border: "unset",
    },
  
    footerIcon: {
      padding: "10px",
      border: "1px solid black",
      borderRadius: "8px",
    },
    vote: {
      borderRadius: "10px",
      border: "1px solid black",
      textAlign: "center",
    },
    star: {
      color: "#00D69A",
    },
    divider: {
      margin: "10px 0 10px 0",
    },
    theirMessage: {
      borderRadius: "8px",
      backgroundColor: "#2979FF",
      color: "#fff",
      display: "inline-block",
    },
  
    TextareaAutosize: {
      width: "100%",
      padding: "0.5rem",
      border: "unset",
      outline: "none",
      resize: "none",
      overflowY: "auto !important",
      height: "100px",
      maxHeight: "100px",
    },
  }));
  
  const dummy_messages = {
    "2021-10-01": [
      {
        isYourMessage: true,
        isRead: true,
        message: "this is a messages",
      },
      {
        isYourMessage: false,
        isRead: null,
        message: "this is a messages",
      },
      {
        isYourMessage: true,
        isRead: false,
        message: "this is a messages",
      },
    ],
    "2021-10-02": [
      {
        isYourMessage: true,
        isRead: true,
        message: "this is a messages",
      },
      {
        isYourMessage: false,
        isRead: null,
        message: "this is a messages",
      },
      {
        isYourMessage: true,
        isRead: false,
        message: "this is a messages",
      },
    ],
  };
  
  function Chat() {
    const classes = useStyles();
    const [open, setOpen] = useState(false);
    const [openCancel, setOpenCancel] = useState(false);
    const [messages, setMessages] = useState(dummy_messages);
    // const [showRating, setShowRating] = useState(false);
    const [inputStr, setInputStr] = useState("");
    const [showPicker, setShowPicker] = useState(false);
    const [socket, setSocket] = useState(null);
    const onEmojiClick = (event, emojiObject) => {
      setInputStr((prevInput) => prevInput + emojiObject.emoji);
      setShowPicker(false);
    };
    const handleClickCancel = () => {
      setOpenCancel(true);
      setOpen(true);
    };
    const handleCancel = () => {
      setOpenCancel(false);
    };
    function handleSendMessage() {
      socket.emit("message", {
        message: inputStr,
        attachment: null,
      });
      appendMessage(inputStr);
      setInputStr("");
    }
  
    function appendMessage(msg) {
      const now = new Date().toISOString();
      const date = now.substring(0, 10);
  
      setMessages((p) => ({
        ...p,
        [date]: [
          ...(p[date] ?? []),
          {
            isYourMessage: true,
            isRead: false,
            message: msg,
          },
        ],
      }));
    }
  
    useEffect(() => {
      const newSocket = io(`http://localhost:3000`);
      setSocket(newSocket);
      return () => newSocket.close();
    }, [setSocket]);
  
    return (
      <div className={classes.root}>
        <Paper className={classes.paper}>
          <Box className={classes.header} boxShadow={1}>
            <Grid item container>
              <Grid item className={classes.avatar}>
                <Avatars />
              </Grid>
              <Grid item>
                <Typography>reza@gmail.com</Typography>
                <Typography>09363248836</Typography>
              </Grid>
            </Grid>
            <Grid item className={classes.text}>
              اختلاف حساب در معاملات ...
            </Grid>
            <Grid item container className={classes.footerhead}>
              <Typography>تاریخ ایجاد: 1400/04/27 16:15</Typography>
              <Typography>شماره تیکت: 26573</Typography>
              <Typography>دسته بندی : مالی</Typography>
            </Grid>
          </Box>
          <Grid container direction="column" className={classes.body}>
            {Object.keys(messages).map((date) => {
              const pms = messages[date];
              return (
                <>
                  <Divider>{format(new Date(date), "yyyy MMMM d EEEE")}</Divider>
                  {pms.map((pm, i) => (
                    <Grid
                      key={i}
                      item
                      style={{
                        alignSelf: pm.isYourMessage ? "flex-end" : "flex-start",
                      }}
                    >
                      <Box
                        boxShadow={1}
                        m={1}
                        p={1}
                        className={clsx({
                          [classes.box2]: !pm.isYourMessage,
                          [classes.box1]: pm.isYourMessage,
                        })}
                      >
                        {pm.message}
                      </Box>
                      {pm.isYourMessage && (
                        <Typography
                          style={{
                            fontSize: "10px",
                            color: "#2979FF",
                            textAlign: "left",
                          }}
                        >
                          {pm.isRead ? "خوانده شد" : "خوانده نشده"}
                        </Typography>
                      )}
                    </Grid>
                  ))}
                </>
              );
            })}
            <Grid item>
              {socket ? (
                <div className="chat-container">
                  <Messages socket={socket} />
                  {/* <MessageInput socket={socket} /> */}
                </div>
              ) : (
                <div>Not Connected</div>
              )}
              <Box
                boxShadow={1}
                bgcolor="background.paper"
                m={1}
                p={1}
                style={{
                  height: "3rem",
                }}
                className={classes.box2}
              >
                فکر کنم میکنم کسی به اکانتم دسترسی دارد! لطفا دسترسی های غیر از آی
                پی خودم رو بندید
              </Box>
            </Grid>
            <Grid item style={{ alignSelf: "flex-end" }}>
              <Box
                boxShadow={1}
                bgcolor="background.paper"
                m={1}
                p={1}
                style={{
                  height: "3rem",
                }}
                className={classes.box1}
              >
                پس از بررسی نتیجه به شما اعلام می گردد.
              </Box>
              <Typography
                style={{ fontSize: "10px", color: "#2979FF", textAlign: "left" }}
              >
                خوانده شد
              </Typography>
            </Grid>
            <Grid
              item
              style={{ display: "flex", justifyContent: "space-around" }}
            >
              <Box
                boxShadow={1}
                bgcolor="background.paper"
                m={1}
                p={1}
                style={{
                  height: "4rem",
                  width: "30%",
                }}
                className={classes.vote}
              >
                <RatingSupport />
              </Box>
            </Grid>
            <Grid item container className={classes.footerIcon}>
              <TextareaAutosize
                className={classes.TextareaAutosize}
                placeholder="یک پاسخ بنویسید ..."
                value={inputStr}
                onChange={(e) => setInputStr(e.target.value)}
              />
              <Grid item container>
                <Grid item>
                  <SendIcon
                    style={{
                      color: "#00D69A",
                    }}
                    onClick={handleSendMessage}
                  />
                </Grid>
                <Grid item>
                  <Emoji
                    onEmojiClicked={(emoji) =>
                      setInputStr((prev) => prev + emoji)
                    }
                  />
                </Grid>
  
                <FileUploader />
                <CancelPresentationTwoToneIcon
                  style={{ color: "#FC4848" }}
                  onClick={() => {
                    handleClickCancel();
                  }}
                />
              </Grid>
            </Grid>
          </Grid>
        </Paper>
        <CancelPresentation
          open={openCancel}
          setOpen={setOpenCancel}
          onAction={handleCancel}
        />
      </div>
    );
  }
  
  export default Chat;
  