import React from "react";
import {Image, Stack, Text} from '@chakra-ui/react';
import {gql, useQuery} from '@apollo/client';

interface dashboardCardProps {
    iconURL?: string,
    title?: string,
    subtitle?: string,

    titleAboveIndicator?: boolean,
    titleFontSize?: string,
    indicatorFontSize?: string,
    fontFamily?: string,
    fontColor?: string,

    tableName: string,
    columnName: string,
    dateColumnName?: string,
    dateFrom?: string,
    dateTo?: string,
    aggregateType?: string,
    primaryColor?: string,
    secondaryColor?: string

}

export function DashboardAggregateCard(props: dashboardCardProps) {
    const {
        iconURL,
        title,
        subtitle,

        titleAboveIndicator = false,
        titleFontSize = "19px",
        indicatorFontSize = "69px",
        fontFamily = "Inter",
        fontColor = "#000000",

        tableName,
        columnName,
        dateColumnName,
        aggregateType = 'sum',
        dateFrom = new Date().toISOString().slice(0, 19).replace('T', ' '),
        dateTo = new Date().toISOString().slice(0, 19).replace('T', ' '),
        secondaryColor = '#028AE7',
        primaryColor = '#ffffff'
    } = props;

    const query = gql`
        query{
            ${tableName}_aggregate(
            where: {_or: [{_and: [{${dateColumnName}: {_gte: "${dateFrom}"}}, 
            {${dateColumnName}: {_lte: "${dateTo}"}}]}]}){
            aggregate{
                count
                sum{ 
                    ${columnName}
                }
                avg{
                    ${columnName}
                }
            }
            } 
        }
    `;

    const { data, loading, error } = useQuery(query);
    if (loading) {
        return <div>Loading...</div>;
    }
    if (error) {
        return <div>{error.message} </div>;
    }

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

    const aggregateData = data[`${tableName}_aggregate`];
    const count = aggregateData?.aggregate?.count;
    const sum = aggregateData?.aggregate?.sum ? aggregateData?.aggregate?.sum[`${columnName}`] ?? 0 : 0;
    const avg = aggregateData?.aggregate?.avg ? aggregateData?.aggregate?.avg[`${columnName}`] ?? 0 : 0;
    const aggregate = aggregateType === "sum" ? sum : aggregateType === "avg" ? avg : count;
    return (

        <Stack fontFamily={fontFamily} m={4} alignItems={"center"} justifyContent="center" w="230px" h="230px"
            bg={primaryColor} color="#071C48" borderRadius={"5px"} border="0.82px solid #BCBEC0" spacing={"36px"}>
            {iconURL && <Image boxSize='100px' objectFit='cover' src={iconURL} alt={title} />}


            {titleAboveIndicator ? <>
                {title && <Text fontSize={titleFontSize} fontWeight="600" textAlign={"center"}>{title}</Text>}
                <Text fontSize={indicatorFontSize} fontWeight='700' lineHeight='18px' fontFamily='Inter' fontStyle='normal' color={fontColor}>
                    {aggregate}
                </Text>
            </>
                : <>
                    <Text fontSize={indicatorFontSize} fontWeight='700' lineHeight='18px' fontFamily='Inter' fontStyle='normal' color={fontColor}>
                        {aggregate}
                    </Text>
                    {title && <Text fontSize={titleFontSize} fontWeight="600" textAlign={"center"}>{title}</Text>}
                </>}
            {subtitle && <Text fontSize={"70px"} fontWeight="600" textAlign={"center"}>{subtitle}</Text>}
        </Stack>

    )
}