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

function DropdownSelect(props: any) {
    const {
        displayColumns,
        tableName,
        cols,
        placeholder,
        OnChange,
        defaultValue,
        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 (
        <VStack alignItems="center">
            <Text className="interFonts"
                  fontWeight="500"
                  fontSize="13px"
                  color="#626D85"
                  textAlign="right">
                {placeholder}
            </Text>

            <Select
                textAlign="left" color="#626D85"
                value={defaultValue ?? ""}
                placeholder={placeholder}
                onChange={(e) => {
                    if (returnColumn === "id"){
                        OnChange(parseInt(e.target.value))
                    }else {
                        OnChange(e.target.value);
                    }

                }}
            >
                <option>Select {placeholder}</option>
                {data[tableName]?.map((item: any) => (
                    <option key={item.id} value={item[returnColumn]}>
                        {displayColumns.map((col: any, key: number) =>
                            key === displayColumns.length - 1 ? item[col] : item[col] + " "
                        )}
                    </option>
                ))}
            </Select>
        </VStack>
    );
}

export default DropdownSelect;