"use client";

import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui/components/button";
import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "@calcom/ui/components/command";
import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
import { Tooltip } from "@calcom/ui/components/tooltip";
import { EyeOffIcon, PlusIcon } from "@coss/ui/icons";
import type { Table } from "@tanstack/react-table";
import startCase from "lodash/startCase";
import { forwardRef, useState } from "react";
import { useDataTable, useFilterableColumns } from "~/data-table/hooks";

export interface AddFilterButtonProps<TData> {
  table: Table<TData>;
  variant?: "base" | "minimal";
}

function AddFilterButtonComponent<TData>(
  { table, variant = "base" }: AddFilterButtonProps<TData>,
  ref: React.Ref<HTMLButtonElement>
) {
  const { t } = useLocale();
  const { activeFilters, addFilter, filterToOpen } = useDataTable();
  const [open, setOpen] = useState(false);

  const filterableColumns = useFilterableColumns(table);
  const availableColumns = filterableColumns.filter(
    (column) => !activeFilters?.some((filter) => filter.f === column.id)
  );

  if (variant === "minimal" && availableColumns.length === 0) {
    return null;
  }

  return (
    <div className="flex items-center space-x-2">
      <Popover open={open} onOpenChange={setOpen}>
        {variant === "base" && (
          <PopoverTrigger asChild>
            <Button
              ref={ref}
              color="secondary"
              data-testid="add-filter-button"
              StartIcon="list-filter"
              className="h-full">
              {t("filter")}
            </Button>
          </PopoverTrigger>
        )}
        {variant === "minimal" && (
          <Tooltip content={t("add_filter")}>
            <PopoverTrigger asChild>
              <Button ref={ref} color="secondary" data-testid="add-filter-button" className="h-full">
                <span className="sr-only">{t("filter")}</span>
                <PlusIcon />
              </Button>
            </PopoverTrigger>
          </Tooltip>
        )}
        <PopoverContent className="w-[200px] p-0" align="start">
          <Command>
            <CommandInput placeholder={t("search")} />
            <CommandList>
              <CommandEmpty>{t("no_columns_found")}</CommandEmpty>
              {availableColumns.map((column) => {
                const showHiddenIndicator =
                  !table.getColumn(column.id)?.getIsVisible() &&
                  table.initialState.columnVisibility?.[column.id] !== false;

                return (
                  <CommandItem
                    key={column.id}
                    onSelect={() => {
                      if (filterToOpen) filterToOpen.current = column.id;
                      addFilter(column.id);
                      setOpen(false);
                    }}
                    className="flex items-center justify-between rounded-none px-4 py-2"
                    data-testid={`add-filter-item-${column.id}`}>
                    <span>{startCase(column.title)}</span>
                    {showHiddenIndicator && <EyeOffIcon className="h-4 w-4 opacity-50" />}
                  </CommandItem>
                );
              })}
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    </div>
  );
}

export const AddFilterButton = forwardRef(AddFilterButtonComponent) as <TData>(
  props: AddFilterButtonProps<TData> & { ref?: React.Ref<HTMLButtonElement> }
) => ReturnType<typeof AddFilterButtonComponent>;