import {
    useEffect,
    useState,
} from 'react';

import { RefreshCw } from 'lucide-react';

import { rpc } from '@/api/request';
import {
    StructureType,
    VizDataType,
} from '@/api/types';
import { ColCSS } from '@/components/CollectionFields/components/GridCss';
import ShortViewText from '@/components/ShortViewText';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';

import VizBarChartItem from './Items/VizBarChartItem';
import VizCardItem from './Items/VizCardItem';
import VizLineChartItem from './Items/VizLineChartItem';
import VizPieChartItem from './Items/VizPieChartItem';
import VizRadarChartItem from './Items/VizRadarChartItem';
import VizRFMItem from './Items/VizRFMItem';

type VizItemProps = {
    structure: StructureType | null,
    search: string | null,
    collection: string,
    filter: any,
    pipeline: any,
}

const VizItem = (props: VizItemProps) => {

    const { structure, search, collection, filter, pipeline } = props;

    if (!structure) return <></>;

    if (structure.type != 'viz' || !structure.inAdmin) {
        return <></>
    }

    const [data, setData] = useState<VizDataType | null>(null);

    const [loading, setLoading] = useState<boolean>(false);

    useEffect(() => {

        setLoading(true);
        rpc.dataViz({
            collection: collection,
            viz: structure.key!,
            search: !!search ? search : undefined,
            filter: filter,
            pipeline: pipeline,
        })
            .then((data) => {
                setData(data.result ?? null);
            })
            .catch((error) => {
                console.log('error', error);
            })
            .finally(() => {
                setLoading(false);
            });
    }, [search, filter, pipeline]);



    const [refresh, setRefresh] = useState<boolean>(false);


    return <ColCSS col={structure.col ?? 24} row={structure.row}>
        <Card className='p-0 gap-0 mr-1 mb-1'>

            <Button
                className='absolute top-0 right-0'
                size="icon-sm"
                variant="ghost" onClick={() => {
                    setRefresh(true);
                    rpc.dataViz({
                        collection: collection,
                        viz: structure.key!,
                    }).then((data) => {
                        setData(data.result ?? null);
                    }).finally(() => {
                        setRefresh(false);
                    });
                }}>
                <RefreshCw className={cn('size-3', refresh && 'animate-spin text-muted-foreground')} />
            </Button>

            <ShortViewText
                className='p-4 pb-0 font-medium text-sm'
                text={structure.title} type="tail" maxLength={18} />
            <div className='p-4'>
                {loading && <Skeleton className="w-full h-20" />}
                {!loading && data?.vizCard && <VizCardItem item={data.vizCard} />}
                {!loading && data?.vizLineChart && <VizLineChartItem items={data.vizLineChart.items ?? []} />}
                {!loading && data?.vizBarChart && <VizBarChartItem items={data.vizBarChart.items ?? []} />}
                {!loading && data?.vizPieChart && <VizPieChartItem items={data.vizPieChart.items ?? []} />}
                {!loading && data?.vizRadarChart && <VizRadarChartItem items={data.vizRadarChart.items ?? []} />}
                {!loading && data?.vizRFM && <VizRFMItem ranges={data.vizRFM.ranges ?? {}} items={data.vizRFM.items ?? []} />}
            </div>
        </Card>
    </ColCSS >
}

export default VizItem;