import React, {useEffect, useState} from "react";
import {Box, HStack, Image, Input, InputGroup, InputRightElement, Stack, Text,} from "@chakra-ui/react";
import {ConversationType, MessagingType} from "../intefaces/interfaces";
import {useMutation, useQuery, useSubscription} from "@apollo/client";
import {addTableRecord, getSearchQuery, getSubscriptionQuery,} from "./../utils/GenericQueries";
import Moment from "react-moment";
import FilterInput from "./FilterInput";

const blackUserIcon =
    "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/blackUserIcon.svg?alt=media&token=cf82416b-a44c-4666-a963-fa1336993e80";
const searchIcon =
    "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/searchIcon.svg?alt=media&token=719b8858-b923-4077-8753-a575ea850796";
const sendIcon =
    "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/sendIcon.svg?alt=media&token=270a8bba-62f5-4289-9165-90acfc91be7e";
const attachmentIcon =
    "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/attachmentIcon.svg?alt=media&token=b88da0ce-a221-4c58-8d84-147a90ec9861";
const composeIcon =
    "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/composeIcon.svg?alt=media&token=538dd52a-3feb-498b-9b50-f68645f631b7";
// import blackUserIcon from "../../../assets/images/blackUserIcon.svg";
// import searchIcon from "./../../../assets/images/searchIcon.svg";
// import sendIcon from "./../../../assets/images/sendIcon.svg";
// import attachmentIcon from "./../../../assets/images/attachmentIcon.svg";
// import composeIcon from "./../../../assets/images/composeIcon.svg";

const conversationsChats: any = [];

function getMessagefor() {
    return 1;
}

function getMessageBy() {
    let userId = sessionStorage.getItem("authUser");
    if (userId == null) return 1;
    return parseInt(userId);
}

const createDefaultMessage = {
    message_by: getMessageBy(),
    message_for: getMessagefor(),
    message_text: "",
    sender_image: "",
};

const Conversation = (props: ConversationType) => {
    const {
        id,
        title,
        shortMessage,
        onConvoSelect,
        selected,
        primary,
        secondary,
    } = props;
    const onConvoSelectChange = () => {
        onConvoSelect(id);
    };
    return (
        <HStack
            onClick={onConvoSelectChange}
            _hover={{
                background: "#e0e3ec",
            }}
            cursor={"pointer"}
            spacing={"30px"}
            justifyContent={"space-between"}
            alignItems={"center"}
            px={"17px"}
            py={"16px"}
            w="350px"
            h="53px"
            bg={selected ? "gray.300" : primary}
            borderRadius={"8px"}
        >
            <Image src={blackUserIcon}/>
            <Stack w="90%">
                <Text
                    fontFamily="Inter"
                    fontSize="13px"
                    fontStyle="normal"
                    fontWeight="700"
                    lineHeight="15.73px"
                    letterSpacing="0em"
                    textAlign="left"
                    color="#010101"
                >
                    FROM: {title}
                </Text>
                <Text
                    fontFamily="Inter"
                    fontSize="13px"
                    fontStyle="normal"
                    fontWeight="400"
                    lineHeight="15.73px"
                    letterSpacing="0em"
                    textAlign="left"
                    color={"#010101"}
                >
                    {shortMessage.substring(0, 41)}...
                </Text>
            </Stack>
        </HStack>
    );
};
const Messaging = (props: MessagingType) => {
    const {messageTable, messageCol, userTable, userCol, primary, secondary} =
        props;

    const {loading, error, data} = useQuery(getSearchQuery(userTable, userCol));
    const allmessages = useSubscription(
        getSubscriptionQuery(messageTable, messageCol)
    );
    const [conversations, setConversations] = useState(conversationsChats);
    const [defaultMessage, setDefaultMessage] = useState(createDefaultMessage);
    const [sendTheMessage, {loading: messageSending}] = useMutation(
        addTableRecord(messageTable, messageCol)
    );

    useEffect(() => {
        if (data) {
            conversationsDisplay();
        }
    }, [data]);

    function selectConversation(user_id: any) {
        function getUserBydId(id: any) {
            let user = data.app_users.find((u: any) => u.id === id);
            return user;
        }

        let appuser = getUserBydId(user_id);
        let temp = {...defaultMessage};
        temp.message_for = appuser.id;
        temp.sender_image = appuser.image;
        setDefaultMessage(temp);
    }

    function conversationsDisplay() {
        let conversations = data.app_users;
        let convo = [];
        let myId = defaultMessage.message_by;
        for (let i = 0; i < conversations.length; i++) {
            if (conversations[i].id != myId) {
                convo.push({
                    id: conversations[i].id,
                    title: conversations[i].first_name,
                    shortMessage: `${conversations[i].first_name} we should be something`,
                });
            }
        }
        setConversations(convo);
    }

    function conversationsFilter(filteredConversation: any) {
        let conversations = filteredConversation;
        let convo = [];
        let myId = defaultMessage.message_by;
        for (let i = 0; i < conversations.length; i++) {
            if (conversations[i].id != myId) {
                convo.push({
                    id: conversations[i].id,
                    title: conversations[i].first_name,
                    shortMessage: `${conversations[i].first_name} we should be something`,
                });
            }
        }
        setConversations(convo);
    }

    function displayChat(messages: any) {
        let filteredMessages: any[] = [];
        for (let i = 0; i < messages.length; i++) {
            if (
                messages[i].message_by == defaultMessage.message_by ||
                messages[i].message_for == defaultMessage.message_by
            ) {
                filteredMessages.push(messages[i]);
            }
        }
        return filteredMessages;
    }

    //form fields
    const onMessageText = (e: any) => {
        let temp = {...defaultMessage};
        temp.message_text = e.target.value;
        setDefaultMessage(temp);
    };
    const clearMessage = () => {
        let tempx = {...defaultMessage};
        tempx.message_text = "";
        setDefaultMessage(tempx);
    };

    const sendMessage = () => {
        if (defaultMessage.message_text.trim() == "") {
            return;
        }
        const {sender_image, ...temp} = defaultMessage;

        sendTheMessage({
            variables: {
                object: temp,
            },
        })
            .then((res) => {
                clearMessage();
            })
            .catch((err) => {
                console.log(err.message);
            });
    };

    if (loading || allmessages.loading) {
        return <div>Loading...</div>;
    }

    if (allmessages.error || error) {
        return <div>Error...</div>;
    }

    function showCustomerStaffs(conversations: any) {
        let customerSupport = new Set();
        customerSupport.add(1);
        let customerAgents = conversations.filter((c: any) =>
            customerSupport.has(c.id)
        );
        return customerAgents;
    }

    return (
        <Stack>
            <Stack
                bg={primary}
                py="26px"
                pl="50px"
                pr="33px"
                w="1440px"
                minH={"928px"}
            >
                <HStack
                    px="23px"
                    py="32px"
                    w={"1357px"}
                    h="874px"
                    borderRadius={"5px"}
                    justifyContent={"space-between"}
                    alignItems={"start"}
                    border="1px solid #D9E2EC"
                    bg={secondary}
                >
                    {/* left box */}
                    <Stack>
                        <HStack
                            alignItems={"center"}
                            justifyContent={"space-between"}
                            w="350px"
                        >
                            <Text
                                fontFamily="Inter"
                                fontSize="21px"
                                fontStyle="normal"
                                fontWeight="700"
                                lineHeight="25.41px"
                                letterSpacing="0em"
                                textAlign="left"
                                color={"#010101"}
                            >
                                Message Center
                            </Text>
                            <HStack
                                cursor={"pointer"}
                                w="124px"
                                h="48px"
                                border="1px solid #DFE0EB"
                                bg="transparent"
                                borderRadius={"8px"}
                                justifyContent={"space-between"}
                                alignItems={"center"}
                                px="16px"
                            >
                                <Text
                                    fontFamily={"MaisonBold"}
                                    fontSize={"14"}
                                    textAlign={"left"}
                                    letterSpacing={"0.5px"}
                                    lineHeight={"16px"}
                                >
                                    Compose
                                </Text>
                                <Image src={composeIcon}/>
                            </HStack>
                        </HStack>
                        <InputGroup>
                            <FilterInput
                                placeholder={"Label"}
                                records={data.app_users}
                                filterCols={["first_name"]}
                                value={""}
                                onChange={(filteredConversation: any) => {
                                    conversationsFilter(filteredConversation);
                                }}
                            />
                            <InputRightElement children={<Image src={searchIcon}/>}/>
                        </InputGroup>

                        <Text
                            fontFamily="Inter"
                            fontSize="13px"
                            fontStyle="normal"
                            fontWeight="700"
                            lineHeight="15.73px"
                            letterSpacing="0em"
                            textAlign="left"
                            color={"#010101"}
                        >
                            Inbox
                        </Text>

                        <Stack
                            //   overflowY={"scroll"}
                            w="353px"
                            alignItems={"center"}
                            h="600px"
                        >
                            {showCustomerStaffs(conversations).map((conversation: any) => {
                                return (
                                    <Conversation
                                        primary={primary}
                                        secondary={secondary}
                                        id={conversation.id}
                                        title={conversation.title}
                                        shortMessage={conversation.shortMessage}
                                        selected={conversation.id == defaultMessage.message_for}
                                        onConvoSelect={selectConversation}
                                    />
                                );
                            })}
                        </Stack>
                    </Stack>

                    {/* right box */}
                    <Stack
                        w="930px"
                        py="18px"
                        pl="15px"
                        pr="25px"
                        h="809px"
                        bg={primary}
                        borderRadius={"8px"}
                        justifyContent={"space-between"}
                    >
                        <Text
                            color="#9A99A2"
                            textAlign={"center"}
                            fontFamily="Inter"
                            fontSize="13px"
                            fontStyle="normal"
                            fontWeight="700"
                            lineHeight="15.73px"
                            letterSpacing="0em"
                        >
                            SATURDAY, JANUARY 10, 2021 1.39 PM
                        </Text>
                        <Stack spacing="24px">
                            <Stack>
                                {displayChat(allmessages.data.app_demo_messages).map(
                                    (res: any) => (
                                        <>
                                            {res.message_by == defaultMessage.message_by &&
                                            res.message_for == defaultMessage.message_for && (
                                                <Stack isInline w={"100%"}>
                                                    <Stack w={"10%"}></Stack>
                                                    <Stack w={"90%"}>
                                                        <Box
                                                            fontSize={"12px"}
                                                            borderRadius={"17px"}
                                                            bg="blue.300"
                                                            p={2}
                                                            color="white"
                                                        >
                                                            {res.message_text}
                                                        </Box>
                                                        <Text
                                                            lineHeight={"0"}
                                                            textAlign={"right"}
                                                            fontSize={"10"}
                                                            color={"#858E99"}
                                                        >
                                                            <Moment fromNow>{res.message_time}</Moment>
                                                        </Text>
                                                    </Stack>
                                                </Stack>
                                            )}
                                            {res.message_by == defaultMessage.message_for &&
                                            res.message_for == defaultMessage.message_by && (
                                                <Stack isInline w={"100%"}>
                                                    <Image
                                                        mt={"3px"}
                                                        borderRadius="full"
                                                        boxSize="2rem"
                                                        src={defaultMessage.sender_image}
                                                        alt="image"
                                                    />

                                                    <Stack w={"96%"}>
                                                        <Box
                                                            fontSize={"12px"}
                                                            borderRadius={"17px"}
                                                            bg="#DADADA"
                                                            p={2}
                                                            color="#000000"
                                                        >
                                                            {res.message_text}
                                                        </Box>

                                                        <Text
                                                            lineHeight={"0"}
                                                            textAlign={"right"}
                                                            fontSize={"10"}
                                                            color={"#858E99"}
                                                        >
                                                            <Moment fromNow>{res.message_time}</Moment>
                                                        </Text>
                                                    </Stack>
                                                </Stack>
                                            )}
                                        </>
                                    )
                                )}
                            </Stack>

                            <InputGroup>
                                <Input
                                    disabled={messageSending}
                                    onKeyPress={(e) => {
                                        if (e.key === "Enter") {
                                            sendMessage();
                                        }
                                    }}
                                    value={defaultMessage.message_text}
                                    onChange={onMessageText}
                                    bg="white"
                                    placeholder="Reply"
                                    alignItems={"center"}
                                    h="48px"
                                    color="black"
                                    _placeholder={{color: "black"}}
                                    textAlign={"left"}
                                    fontFamily="MaisonBold"
                                    fontSize="14px"
                                    fontStyle="normal"
                                    fontWeight="700"
                                    lineHeight="16px"
                                    letterSpacing="0.5px"
                                />
                                {!messageSending && (
                                    <InputRightElement
                                        onClick={sendMessage}
                                        mt="5px"
                                        cursor={"pointer"}
                                        children={<Image src={sendIcon}/>}
                                    />
                                )}
                            </InputGroup>
                            <HStack>
                                <Image cursor={"pointer"} src={attachmentIcon}/>
                                <Text
                                    color="black"
                                    textAlign={"center"}
                                    fontFamily="Inter"
                                    fontSize="13px"
                                    fontStyle="normal"
                                    fontWeight="700"
                                    lineHeight="18px"
                                    letterSpacing="0em"
                                >
                                    Add file or attachment
                                </Text>{" "}
                            </HStack>
                        </Stack>
                    </Stack>
                </HStack>
            </Stack>
        </Stack>
    );
};
export default Messaging;