import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
import authManager from '../AuthManager'
import ConversationAvatar from './ConversationAvatar'
import Conversation from '../../../model/Conversation'
import React, { useState } from "react";
import { useNavigate, useParams } from "react-router-dom"
import { Person } from "@mui/icons-material";
import { ListItem, ListItemAvatar, ListItemText, Box, Typography } from '@mui/material'
import { Button, Stack, Switch, ThemeProvider, Typography, Modal as ModalUM } from "@mui/material"
import { RemoveContactIcon, VideoCallIcon } from './svgIcons';
import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, CrossIcon, MessageIcon } from './svgIcons';
import { styled } from "@mui/material/styles";
import {QRCodeSVG, QRCodeCanvas} from 'qrcode.react';

const customStyles = {
  content: {
    // right: "auto",
    // bottom: "auto",
    // // marginRight: "-50%",
    // transform: "translate(-50%, -50%)",
    // padding: "16px"

    // top: "1364px",
    left: "94px",
    width: "180px",
    height: "262px",
    background: "#FFFFFF 0% 0% no-repeat padding-box",
    boxShadow: "3px 3px 7px #00000029",
    borderRadius: "5px 20px 20px 20px",
    opacity: "1",

    textAlign: "left",
    font: "normal normal normal 12px/26px Ubuntu",
    letterSpacing: "0px",
    color: "#000000",
  },
};

const cancelStyles = {
  content: {
    left: "94px",
    width: "300px",
    height: "220px",
    background: "#FFFFFF 0% 0% no-repeat padding-box",
    boxShadow: "3px 3px 7px #00000029",
    borderRadius: "20px",
    opacity: "1",

    textAlign: "left",
    font: "normal normal normal 12px/26px Ubuntu",
    letterSpacing: "0px",
    color: "#000000",
  },
};

const contactDetailsStyles = {
  content: {
    left: "94px",
    width: "450px",
    height: "450px",
    background: "#FFFFFF 0% 0% no-repeat padding-box",
    boxShadow: "3px 3px 7px #00000029",
    borderRadius: "20px",
    opacity: "1",

    textAlign: "left",
    font: "normal normal normal 12px/26px Ubuntu",
    letterSpacing: "0px",
    color: "#000000",
  },
};

const stackStyles = {
  flexDirection: "row",
  marginBottom: "4px",
  spacing: "40px",
  flex: 1,
  alignItems: "center",
};

const iconTextStyle = {
  marginRight: "10px",
};

const iconColor = "#005699";

export default function ConversationListItem(props) {
  const { conversationId, contactId } = useParams();
  const conversation = props.conversation;
  console.log(
    "XXX",
    conversation,
    conversation.id,
    conversation.getAccountId()
  );

  const pathId = conversationId || contactId;
  const isSelected = conversation.getDisplayUri() === pathId;
  const navigate = useNavigate();

  const [modalIsOpen, setIsOpen] = useState(false);
  const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
  const [modalDeleteIsOpen, setModalDeleteIsOpen] = useState(false);
  const [blockOrRemove, setBlockOrRemove] = useState(true);
  const [userId, setUserId] = useState(
    conversation.getFirstMember().contact.getUri()
  );
  const [isSwarm, setIsSwarm] = useState("true");

  const openModal = (e) => {
    e.preventDefault();
    console.log(e);
    setIsOpen(true);
  };
  const openModalDetails = () => setModalDetailsIsOpen(true);
  const openModalDelete = () => setModalDeleteIsOpen(true);
  const closeModal = () => setIsOpen(false);
  const closeModalDetails = () => setModalDetailsIsOpen(false);
  const closeModalDelete = () => setModalDeleteIsOpen(false);

  let subtitle;
  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    subtitle.style.color = "#f00";
  }

  const getContactDetails = () => {
    const controller = new AbortController();
    authManager
      .fetch(
        `/api/accounts/${conversation.getAccountId()}/contacts/details/${userId}`,
        {
          signal: controller.signal,
        }
      )
      .then((res) => res.json())
      .then((result) => {
        console.log("CONTACT LIST - DETAILS: ", result);
      })
      .catch((e) => console.log("ERROR GET CONTACT DETAILS: ", e));
  };

  const removeOrBlock = (typeOfRemove) => {
    console.log(typeOfRemove);
    setBlockOrRemove(false);

    console.log("EEEH", typeOfRemove, conversation.getAccountId(), userId);

    const controller = new AbortController();
    authManager
      .fetch(
        `/api/accounts/${conversation.getAccountId()}/contacts/${typeOfRemove}/${userId}`,
        {
          signal: controller.signal,
          method: "DELETE",
        }
      )
      .then((res) => res.json())
      .then((result) => {})
      .catch((e) => console.log(`ERROR ${typeOfRemove}ing CONTACT : `, e));
    closeModalDelete();
    setRefresh(!refresh)
  };
  const [refresh, setRefresh] = useState(true)

  useEffect(() => {
    console.log("refresh");
  }, [refresh]);


  const uri = conversation.getId()
    ? `conversation/${conversation.getId()}`
    : `addContact/${userId}`;
  if (conversation instanceof Conversation) {
    return (
      <div onContextMenu={openModal}>
        <div name="Modal conversation">
          <Modal
            isOpen={modalIsOpen}
            //   onAfterOpen={afterOpenModal}
            onRequestClose={closeModal}
            style={customStyles}
            contentLabel="Example Modal"
          >
            <Stack
              onClick={() => {
                navigate(`/account/${conversation.getAccountId()}/${uri}`);
                closeModal();
              }}
              {...stackStyles}
            >
              <div style={{ ...iconTextStyle }}>
                <MessageIcon style={{ color: iconColor }} />
              </div>
              Message
            </Stack>
            <Stack {...stackStyles}>
              <div style={{ ...iconTextStyle }}>
                <AudioCallIcon style={{ color: iconColor }} />
              </div>
              Démarrer appel audio
            </Stack>

            <Stack {...stackStyles}>
              <div style={{ ...iconTextStyle }}>
                <VideoCallIcon style={{ color: iconColor }} />
              </div>
              Démarrer appel vidéo
            </Stack>

            <Stack
              {...stackStyles}
              onClick={() => {
                navigate(`/account/${conversation.getAccountId()}/`);
                closeModal();
              }}
            >
              <div style={{ ...iconTextStyle }}>
                <CrossIcon style={{ color: iconColor }} />
              </div>
              Fermer la conversation
            </Stack>

            <Stack
              onClick={() => {
                console.log("open details contact for: ");
                closeModal();
                openModalDetails();
                getContactDetails();
              }}
              {...stackStyles}
            >
              <div style={{ ...iconTextStyle }}>
                <ContactDetailsIcon style={{ color: iconColor }} />
              </div>
              Détails de la conversation
            </Stack>

            <Stack
              onClick={() => {
                setBlockOrRemove(true);
                closeModal();
                openModalDelete();
              }}
              {...stackStyles}
            >
              <div style={{ ...iconTextStyle }}>
                <BlockContactIcon style={{ color: iconColor }} />
              </div>
              Bloquer le contact
            </Stack>

            <Stack
              onClick={() => {
                setBlockOrRemove(false);
                closeModal();
                openModalDelete();
              }}
              {...stackStyles}
            >
              <div style={{ ...iconTextStyle }}>
                <RemoveContactIcon style={{ color: iconColor }} />
              </div>
              Supprimer contact
            </Stack>
          </Modal>
        </div>

        <div name="Contact details">
          <Modal
            isOpen={modalDetailsIsOpen}
            onRequestClose={closeModalDetails}
            style={contactDetailsStyles}
            contentLabel="Détails contact"
          >
            <Stack direction={"row"} alignContent="flex-end">
              <Stack direction={"column"}>
                <div style={{ height: "100px" }}>
                  <ConversationAvatar
                    displayName={conversation.getDisplayNameNoFallback()}
                  />
                </div>

                <div
                  style={{
                    fontSize: "20px",
                    marginBottom: "20px",
                    height: "20px",
                  }}
                >
                  Informations
                </div>

                <Typography variant="caption">Nom d'utilisateur</Typography>
                <div style={{ height: "20px" }} />
                <Typography variant="caption">Identifiant </Typography>
                <div style={{ height: "20px" }} />

                <div
                  style={{
                    flex: 1,
                    height: "150px",
                    direction: "column",
                    flexDirection: "column",
                    // alignSelf: "flex-end",
                  }}
                >
                  <Typography variant="caption">Code QR</Typography>
                </div>

                <Typography variant="caption">est un swarm </Typography>
              </Stack>

              <Stack direction={"column"}>
                <div
                  style={{
                    fontWeight: "bold",
                    fontSize: "20px",
                    height: "100px",
                  }}
                >
                  {conversation.getDisplayNameNoFallback() + "(resolved name)"}
                </div>

                <div
                  style={{
                    height: "40px",
                  }}
                />
                <Typography variant="caption">
                  <div style={{ fontWeight: "bold" }}>
                    {conversation.getDisplayNameNoFallback()}
                  </div>
                </Typography>

                <div style={{ height: "20px" }} />

                <Typography variant="caption">
                  <div style={{ fontWeight: "bold" }}> {userId}</div>
                </Typography>

                <div style={{ height: "20px" }} />

                <div height={"40px"}>
                  <QRCodeCanvas value={`${userId}`} />
                </div>

                <Typography variant="caption">
                  <div style={{ fontWeight: "bold" }}> {isSwarm}</div>
                </Typography>
              </Stack>
            </Stack>
            <div
              onClick={closeModalDetails}
              style={{
                width: "100px",
                borderStyle: "solid",
                textAlign: "center",
                borderRadius: "5px",
                marginLeft: "150px",
                marginTop: "10px",
              }}
            >
              <Typography variant="caption">Fermer</Typography>
            </div>
          </Modal>
        </div>

        <div name="Remove or block details">
          <Modal
            isOpen={modalDeleteIsOpen}
            onRequestClose={closeModalDelete}
            style={cancelStyles}
            contentLabel="Merci de confirmer"
          >
            <Typography variant="h4">Merci de confirmer</Typography>
            <Stack
              direction={"column"}
              justifyContent="space-around"
              spacing={"75px"}
            >
              <div style={{ textAlign: "center", marginTop: "10%" }}>
                <Typography variant="body2">
                  Voulez vous vraiment {blockOrRemove ? "bloquer" : "supprimer"}{" "}
                  ce contact?
                </Typography>
              </div>

              <Stack
                direction={"row"}
                top={"25px"}
                alignSelf="center"
                spacing={1}
              >
                <Box
                  onClick={() => {
                    if (blockOrRemove) removeOrBlock("block");
                    else removeOrBlock("remove");
                  }}
                  style={{
                    width: "100px",
                    textAlign: "center",
                    borderStyle: "solid",
                    borderColor: "red",
                    borderRadius: "10px",
                    color: "red",
                  }}
                >
                  {blockOrRemove ? "Bloquer" : "Supprimer"}
                </Box>
                <Box
                  onClick={closeModalDelete}
                  style={{
                    width: "100px",
                    textAlign: "center",
                    paddingLeft: "12px",
                    paddingRight: "12px",
                    borderStyle: "solid",
                    borderRadius: "10px",
                  }}
                >
                  Annuler
                </Box>
              </Stack>
            </Stack>
          </Modal>
        </div>

        <ListItem
          button
          alignItems="flex-start"
          selected={isSelected}
          onClick={() =>
            navigate(`/account/${conversation.getAccountId()}/${uri}`)
          }
        >
          <ListItemAvatar>
            <ConversationAvatar
              displayName={conversation.getDisplayNameNoFallback()}
            />
          </ListItemAvatar>
          <ListItemText
            primary={conversation.getDisplayName()}
            secondary={conversation.getDisplayUri()}
          />
        </ListItem>
      </div>
    );
  } else return null;
}