import { LstCard } from "@/components/extendedUI/LstCard";
import { CardContent, CardFooter, CardHeader } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
import { getLanes } from "@/utils/querys/logistics/getWarehouseLanes";
import { CollapsibleTrigger } from "@radix-ui/react-collapsible";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import Barcode from "react-barcode";
import { BarcodePDFExport } from "./BarcodeExport";
import { BulkBarcodePDFExport } from "./BulkExport";
import CommonCommands from "./CommonCommands";

export default function BGPage() {
    const { data, isError, isLoading } = useQuery(getLanes());
    const [checked, setChecked] = useState([]);

    if (isLoading) return <div>Loading Data</div>;

    if (isError)
        return <div>There was an error getting the warehouse lane data.</div>;

    /**
     * get the warehouse names only
     */

    const warhouses = new Map();

    data?.forEach((item: any) => {
        // if the warhouse is not already included add it to the map
        if (!warhouses.has(item.warehouseId)) {
            warhouses.set(item.warehouseId, item.warehouseDescription);
        }
    });

    // convert the map to an array
    const warehouseArray = Array.from(warhouses).map(([wid, wname]) => ({
        warehouseId: wid,
        warehouseDescription: wname,
    }));

    //console.log(warehouseArray);

    // handle the onchange
    const changeBox = (d: any) => {
        setChecked((prev: any) => {
            if (prev.includes(d)) {
                return prev.filter((name: any) => name !== d);
            } else {
                return [...prev, d];
            }
        });
    };

    return (
        <div className="flex flex-row m-2">
            <div className="flex flex-row">
                <div className="m-2">
                    <LstCard>
                        <CardHeader>Warehouse Barcodes</CardHeader>
                        <CardContent>
                            {warehouseArray.map((i: any) => {
                                const lanes = data?.filter(
                                    (wid: any) =>
                                        wid.warehouseId === i.warehouseId
                                );
                                return (
                                    <div className="m-2" key={i.warehouseId}>
                                        <Collapsible>
                                            <CollapsibleTrigger>
                                                {i.warehouseDescription}
                                            </CollapsibleTrigger>
                                            <CollapsibleContent>
                                                <div className="ml-2">
                                                    {lanes?.map((l: any) => {
                                                        return (
                                                            <div key={l.laneId}>
                                                                <Checkbox
                                                                    id={
                                                                        l.laneId
                                                                    }
                                                                    // checked={checked.includes(
                                                                    //     l
                                                                    // )}
                                                                    onCheckedChange={() =>
                                                                        changeBox(
                                                                            l
                                                                        )
                                                                    }
                                                                />
                                                                <label
                                                                    id={
                                                                        l.laneId
                                                                    }
                                                                    className="ml-2"
                                                                >
                                                                    {
                                                                        l.laneDescription
                                                                    }
                                                                </label>
                                                            </div>
                                                        );
                                                    })}
                                                </div>
                                            </CollapsibleContent>
                                        </Collapsible>
                                    </div>
                                );
                            })}
                        </CardContent>
                    </LstCard>
                </div>
                {checked.length > 0 && (
                    <div className="m-2">
                        <LstCard>
                            <CardHeader>Current selected lanes</CardHeader>
                            <CardContent>
                                {checked.map((c: any) => {
                                    return (
                                        <div
                                            className="flex justify-center"
                                            key={`${c.warehouseId}-${c.laneId}`}
                                        >
                                            <div>
                                                <Barcode
                                                    value={`loc#${c.warehouseId}#${c.laneId}`}
                                                    width={2}
                                                    height={50}
                                                    displayValue={false}
                                                />
                                                <p className="flex justify-center">
                                                    Lane: {c.laneDescription}
                                                </p>
                                            </div>
                                            <div className="ml-2 mt-4">
                                                <BarcodePDFExport
                                                    barcodeValue={`loc#${c.warehouseId}#${c.laneId}`}
                                                    data={c}
                                                />
                                            </div>
                                        </div>
                                    );
                                })}
                            </CardContent>
                            <CardFooter>
                                <div className="flex justify-end">
                                    {checked.length > 1 && (
                                        <div>
                                            <BulkBarcodePDFExport
                                                data={checked}
                                            />
                                        </div>
                                    )}
                                </div>
                            </CardFooter>
                        </LstCard>
                    </div>
                )}
            </div>
            <div className="m-2">
                <CommonCommands />
            </div>
        </div>
    );
}