import React from "react";
import {gql, useQuery} from "@apollo/client";
import {HStack, Text} from "@chakra-ui/layout";
import {Tag, TagLabel} from "@chakra-ui/react";

function MultipleDisplay(props: any) {
    const {
        displayColumns,
        tableName,
        cols,
        placeholder,
        OnChange,
        defaultValues,
        returnColumn
    } = props;

    // create a function to generate graphql query
    const generateQuery = (tableName: string, cols: Array<string>) => {
        let query = `query {
            ${tableName} {
                ${cols.join("\n")}
            }
        }`;
        return query;
    };

    let getQuery = generateQuery(tableName, cols);

    let theQuery = gql`
    ${getQuery}
  `;

    const {data, loading, error} = useQuery(theQuery);

    if (loading) {
        return <div>Loading...</div>;
    }
    if (error) {
        console.log("error ", error);
        return <div>Error... </div>;
    }

    if (!data) {
        return <Text>No data</Text>;
    }


    return (
        <HStack>
            {data[tableName]?.map((item: any, itemIndex: number) => {
                if (defaultValues?.includes(item.id)) {
                    return (
                        item.color ?
                            <Tag key={itemIndex} w="fit-content" size="md" variant='solid' colorScheme={item.color}>
                                <TagLabel>{item.name}</TagLabel>
                            </Tag>
                            :
                            <Text key={itemIndex} w="15%" className="interFonts"
                                  fontWeight="500"
                                  fontSize="13px"
                                  color="#626D85"
                                  textAlign="right">
                                {item.name}
                            </Text>
                    )
                }
            })
            }
        </HStack>

    );
}

export default MultipleDisplay;