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

function ForeignKeyDisplay(props: any) {
    const {
        tableName,
        cols,
        displayColumns,
        foreignId
    } = props;

    // create a function to generate graphql query
    const generateQuery = (tableName: string, cols: Array<string>) => {
        let query = `query {
            ${tableName}_by_pk(id: ${foreignId}) {
                ${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 text = ""
    if (data[`${tableName}_by_pk`]) {

        displayColumns?.forEach((item: any) => {
            text += data[`${tableName}_by_pk`][item] + " "
        })
    } else {
        text = "null"
    }
    return (
        <Text>
            {text}
        </Text>
    );
}

export default ForeignKeyDisplay;