import React from "react";
import {gql, useQuery} from "@apollo/client";
import {Text} from "@chakra-ui/layout";
import {Checkbox, Grid, GridItem, SimpleGrid, Stack, Tag, TagLabel} from "@chakra-ui/react";

function MultipleSelect(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>;
    }
    let categories = data[tableName]?.map((item: any) => {
        return item.category;
    })
    categories = Array.from(new Set(categories))

    return (
        <Grid
            px="10%"
            border="1px"
            p="2"
            borderColor="gray.200"
            templateColumns={`repeat(${categories.length === 0 ? 1 : categories.length}, 1fr)`} gap={4}>
            {categories?.map((category: any, catIndex:number) => {
                let categoryItems = data[tableName]?.filter((item: any) => item.category === category)
                return (
                    <GridItem key={catIndex}>
                        <Text w="100%" className="interFonts"
                              fontWeight="700"
                              fontSize="13px"
                              color="#626D85"
                              textAlign="left">
                            {category}
                        </Text>
                        <Stack gap={2} mt={2}>
                        {categoryItems?.map((item: any, itemIndex: number) => (
                            <SimpleGrid key={itemIndex} alignItems="left" columns={2}>
                                {item.color ?
                                    <Tag w="fit-content" size="lg" variant='solid' colorScheme={item.color}>
                                        <TagLabel>{item.name}</TagLabel>
                                    </Tag>
                                :
                                    <Text w="15%" className="interFonts"
                                          fontWeight="500"
                                          fontSize="13px"
                                          color="#626D85"
                                          textAlign="right">
                                        {item.name}
                                    </Text>
                                }
                                <Checkbox
                                    size='lg'
                                    isChecked={defaultValues?.includes(item.id)}
                                    onChange={(e: any) => {
                                        let onChangeValues = defaultValues? JSON.parse(defaultValues) :[];
                                        if (!e.target.checked) {
                                            onChangeValues = onChangeValues?.filter((val: any) => val !== item.id)
                                        } else {
                                            onChangeValues.push(item.id)
                                        }
                                        onChangeValues = JSON.stringify(onChangeValues)
                                        OnChange(onChangeValues);
                                    }}
                                />
                            </SimpleGrid>
                        ))}
                        </Stack>
                    </GridItem>
                )
            })
            }
        </Grid>
    );
}

export default MultipleSelect;