import {gql, useLazyQuery} from '@apollo/client';
import {Spinner, Stack, Text} from '@chakra-ui/react';
import {snakeCase} from 'change-case';
import React, {useEffect, useState} from 'react';
import {Bar, BarChart, CartesianGrid, Cell, Legend, Tooltip, XAxis, YAxis} from 'recharts';


export interface BarComponentProps {
    componentName: string,
    title?: string,
    titleFontColor?: string,
    titleFontSize?: string,
    titleFontWeight?: string,
    table_name: string,
    data_columns: string[],
    orientation?: string,
    showLegend?: boolean,
    width: number,
    height: number,
    barsColor: string,
}


function BarChartComponent(props: BarComponentProps) {

    const {
        title,
        titleFontColor = "black",
        titleFontSize = "18px",
        titleFontWeight = "500",
        table_name = "",
        data_columns,
        orientation,
        showLegend = true,
        width,
        height,
        barsColor
    } = props;

    const [barContent, setBarContent] = useState([
        {
            name: '',
            value: 0
        }
    ]);

    useEffect(() => {
        if (data_columns.length >= 2) {
            fetchData()
        } else {
            console.log("Not enough data columns");
        }
    }, [data_columns]);

    let q = gql`
    query {
        ${snakeCase(table_name)} {
            ${data_columns.map(col => `${col}`).join(',')}
        }
    }`;

    const [fetchData, { loading, error }] = useLazyQuery(q, {
        onCompleted: (res) => {
            let mData = [...res[snakeCase(table_name)]];
            // sort array in descending order by value
            mData.sort((a, b) => (a.value < b.value) ? 1 : -1);
            setBarContent(mData);
        },
        onError: (error) => {
            console.log(error);
        }
    });

    function isVertical() {
        return orientation === "vertical";
    }

    return (
        <Stack alignItems={"center"} py={8} px={3} w="fit-content" h="fit-content"
            border="1px solid #F2F2F2" borderRadius={"8px"} bg="white">
            <Text fontSize={titleFontSize} fontWeight={titleFontWeight}
                color={titleFontColor}>{title}</Text>
            {loading ? <Spinner m={12} />
                : error ? <Text color="red.400">{error.message}</Text>
                    : data_columns.length < 2 ?
                        <Text color="red.400">
                            Not enough data columns (required: 2)
                        </Text>
                        :
                        isVertical() ?
                            <BarChart
                                layout={isVertical() ? "vertical" : "horizontal"}
                                width={width}
                                height={height}
                                data={barContent}
                                margin={{
                                    top: 5,
                                    right: 30,
                                    left: 20,
                                    bottom: 5,
                                }}
                            >
                                <CartesianGrid strokeDasharray="3 3" />
                                <XAxis type="number" />
                                <YAxis type="category"
                                    axisLine={false}
                                    tickLine={false}
                                    dataKey={"name"} />
                                <Tooltip />
                                {showLegend && <Legend />}
                                <Bar minPointSize={2} dataKey={"value"}
                                    barSize={24}
                                    fill={barsColor}>
                                    {barContent.map((d, idx) => {
                                        return <Cell key={d["name"]} />;
                                    })}
                                </Bar>
                            </BarChart>

                            :

                            <BarChart
                                layout={"horizontal"}
                                width={width}
                                height={height}
                                data={barContent}
                                margin={{
                                    top: 5,
                                    right: 30,
                                    left: 20,
                                    bottom: 5,
                                }}
                            >
                                <CartesianGrid strokeDasharray="3 3" />
                                <XAxis dataKey={"name"} />
                                <YAxis dataKey={"value"} />
                                <Tooltip />
                                {showLegend && <Legend />}
                                <Bar dataKey={"value"} fill={barsColor} />
                            </BarChart>
            }

        </Stack>
    );
}

export default BarChartComponent;