import { useState } from "react";
import { InsightView } from "@gooddata/sdk-ui-ext";
import { PivotTable } from "@gooddata/sdk-ui-pivot";
import { IDrillEvent } from "@gooddata/sdk-ui";
import { IAttributeFilter, newPositiveAttributeFilter, IFilter } from "@gooddata/sdk-model";
import { OrderUnitPrice, OrderUnitQuantity, CustomerState, ProductBrand, Insights } from "../md/catalog.ts";

export function SimpleDrillExample() {
    const [drillFilter, setDrillFilter] = useState<IFilter | null>(null);
    const [selectedValue, setSelectedValue] = useState<string>("");

    const handleDrill = (drillEvent: IDrillEvent) => {
        // Find the attribute item that was clicked
        const intersection = drillEvent.drillContext?.intersection;
        if (!intersection || intersection.length === 0) return;

        for (const intersectionElement of intersection) {
            const { header } = intersectionElement;

            // Check if this is an attribute (not a measure)
            if (header && "attributeHeaderItem" in header && "attributeHeader" in header) {
                const attributeRef = (header as any).attributeHeader.ref;
                const attributeValue = (header as any).attributeHeaderItem.name;

                console.log(`Drilling on: ${attributeValue}`);

                // Create filter for the clicked value
                const filter: IAttributeFilter = newPositiveAttributeFilter(attributeRef, [attributeValue]);

                setDrillFilter(filter);
                setSelectedValue(attributeValue);
                break;
            }
        }
    };

    const clearDrill = () => {
        setDrillFilter(null);
        setSelectedValue("");
    };

    return (
        <div>
            <h2>Simple Drill-Down Example</h2>
            <p>Click on any slice of the pie chart to filter the table below.</p>

            {selectedValue && (
                <div>
                    <span>Filtered by: {selectedValue}</span>
                    <button onClick={clearDrill}>Clear Filter</button>
                </div>
            )}

            <div style={{ display: "flex" }}>
                <div style={{ flex: 1, height: "400px" }}>
                    <h4>Pie Chart</h4>
                    <InsightView
                        insight={Insights.Pie}
                        drillableItems={[() => true]}
                        onDrill={handleDrill}
                    />
                </div>

                <div style={{ flex: 1, height: "400px" }}>
                    <h4>Results Table</h4>
                    <PivotTable
                        measures={[OrderUnitPrice.Sum, OrderUnitQuantity.Sum]}
                        rows={[CustomerState]}
                        columns={[ProductBrand]}
                        filters={drillFilter ? [drillFilter] : []}
                    />
                </div>
            </div>
        </div>
    );
}

import { OrderUnitPrice, OrderUnitQuantity, CustomerState, ProductBrand, Insights } from "../md/catalog.ts";