"use client"
import { PickOrderResult } from "@/app/api/pickOrder";
import { SearchParams } from "@/app/utils/fetchUtil";
import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import SearchBox, { Criterion } from "../SearchBox";
import SearchResults, { Column } from "../SearchResults";
import { groupBy, map, sortBy, sortedUniq, uniqBy, upperCase, upperFirst } from "lodash";

interface Props {
    pickOrders: PickOrderResult[];
}

type SearchQuery = Partial<Omit<PickOrderResult,
    | "id"
    | "consoCode"
    | "completeDate">>

type SearchParamNames = keyof SearchQuery;

const PickOrderSearch: React.FC<Props> = ({
    pickOrders,
}) => {
    const { t } = useTranslation("pickOrders");

    const [filteredPickOrders, setFilteredPickOrders] = useState(pickOrders)

    const searchCriteria: Criterion<SearchParamNames>[] = useMemo(() => [
        { label: t("Code"), paramName: "code", type: "text" },
        { label: t("Target Date From"), label2: t("Target Date To"), paramName: "targetDate", type: "dateRange" },
        {
            label: t("Type"), paramName: "type", type: "autocomplete",
            options: sortBy(
                uniqBy(pickOrders.map((po) => ({ value: po.type, label: t(upperCase(po.type)) })), "value"),
                "label").map((po) => (po))
        },
        {
            label: t("Status"), paramName: "status", type: "autocomplete",
            options: sortBy(
                uniqBy(pickOrders.map((po) => ({ value: po.status, label: t(upperFirst(po.status)) })), "value"),
                "label").map((po) => (po))
        },
        // {
        //     label: t("Items"), paramName: "items", type: "autocomplete", multiple: true,
        //     options: sortBy(
        //         uniqBy(pickOrders.map((po) => po.items?.map((item) => ({ value: item.name, label: item.name, group: item.type }))), "value"), 
        //         "label")
        // },
    ], [t])

    const onReset = useCallback(() => {
        setFilteredPickOrders(pickOrders)
    }, [pickOrders])

    const columns = useMemo<Column<PickOrderResult>[]>(() => [
        {
            name: "code",
            label: t("Code"),
        },
        {
            name: "consoCode",
            label: t("Consolidated Code"),
        },
        {
            name: "type",
            label: t("type"),
        },
        {
            name: "items",
            label: t("Items"),
            renderCell: (params) => {
                return params.items?.map((i) => i.name).join(", ")
            }
        },
        {
            name: "releasedBy",
            label: t("Released By"),
        },
        {
            name: "status",
            label: t("Status"),
        },
    ], [t])

    return (
        <>
            <SearchBox
                criteria={searchCriteria}
                onSearch={(query) => {
                    setFilteredPickOrders(
                        pickOrders.filter(
                            (po) =>
                                po.code.toLowerCase().includes(query.code.toLowerCase())
                        )
                    )
                }}
                onReset={onReset}
            />
            <SearchResults<PickOrderResult> items={filteredPickOrders} columns={columns} pagingController={{
                pageNum: 0,
                pageSize: 0,
                totalCount: 0,
            }} />
        </>
    )
}

export default PickOrderSearch;