import React from "react";
import { useTranslations } from "next-intl";
import { ChevronDown, ChevronsUpDown, ChevronUp, X } from "lucide-react";
import { flexRender, Header } from '@tanstack/react-table';
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import { DatasetItem } from "@/components/ui/dataset/dataset-provider";

type DatasetViewTableHeaderProps<T extends DatasetItem = DatasetItem> = {
    header: Header<T, unknown>;
};

export const DatasetViewTableHeader = <T extends DatasetItem = DatasetItem>(props: DatasetViewTableHeaderProps<T>) => {
    const {
        header
    } = props;

    const t = useTranslations("dashboard.general.sorting");
    const { column } = header;
    const title = flexRender(column.columnDef.header, header.getContext());
    if(!column.getCanSort()) {
        return (
            <div>{title}</div>
        );
    }

    return (
        <DropdownMenu>
            <DropdownMenuTrigger
              className="hover:bg-accent focus:ring-ring data-[state=open]:bg-accent [&_svg]:text-muted-foreground -ml-1.5 flex h-8 items-center gap-1.5 rounded-md px-2 py-1.5 focus:ring-1 focus:outline-none [&_svg]:size-4 [&_svg]:shrink-0">
                {title}

                {column.getCanSort() && (
                    column.getIsSorted() === "desc" ? (
                        <ChevronDown />
                    ) : column.getIsSorted() === "asc" ? (
                        <ChevronUp />
                    ) : (
                        <ChevronsUpDown />
                    )
                )}
            </DropdownMenuTrigger>

            <DropdownMenuContent align="start" className="w-28">
                {column.getCanSort() && (
                    <>
                        <DropdownMenuCheckboxItem
                          className="[&_svg]:text-muted-foreground relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto"
                          checked={column.getIsSorted() === "asc"}
                          onClick={() => column.toggleSorting(false)}>
                            <ChevronUp />
                            {t("asc")}
                        </DropdownMenuCheckboxItem>

                        <DropdownMenuCheckboxItem
                          className="[&_svg]:text-muted-foreground relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto"
                          checked={column.getIsSorted() === "desc"}
                          onClick={() => column.toggleSorting(true)}>
                            <ChevronDown />
                            {t("desc")}
                        </DropdownMenuCheckboxItem>

                        {column.getIsSorted() && (
                            <DropdownMenuItem
                              className="[&_svg]:text-muted-foreground pl-2"
                              onClick={() => column.clearSorting()}>
                                <X />
                                {t("reset")}
                            </DropdownMenuItem>
                        )}
                    </>
                )}
            </DropdownMenuContent>
        </DropdownMenu>
    );
};