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";
// 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 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"


const conversationsChats: any = []

function getMessagefor() {
    let userId = sessionStorage.getItem("authUser");
    if (userId == null || userId == '1')
        return 2
    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>
    }

    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
                            w="353px"
                            alignItems={"center"}
                            h="600px"
                        >
                            {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;