/**
 * Example usage of FilterDropdown component
 * 
 * This component is a reusable filter dropdown that fetches data from APIs
 * and allows users to filter by multiple columns with search functionality.
 */

"use client";

import { logger } from "@/lib/logger";
import { FilterDropdown, FilterColumn } from "./FilterDropdown";

export function FilterDropdownExample() {
  // Define your filter columns with API endpoints
  const filterColumns: FilterColumn[] = [
    {
      label: "Asset Class",
      apiEndpoint: "/api/asset-classes", // Your API endpoint
      searchPlaceholder: "Search asset classes...",
      // Optional: Custom data transformation if your API returns data in a different format
      // transformData: (data) => {
      //   return data.map((item: any) => ({
      //     id: item.asset_id,
      //     label: item.asset_name,
      //     value: item.asset_id,
      //   }));
      // },
    },
    {
      label: "Select Bank",
      apiEndpoint: "/api/banks",
      searchPlaceholder: "Search banks...",
      valueKey: "bank_id", // If your API uses 'bank_id' instead of 'id'
      labelKey: "bank_name", // If your API uses 'bank_name' instead of 'label'
    },
    {
      label: "Select Currency",
      apiEndpoint: "/api/currencies",
      searchPlaceholder: "Search currencies...",
    },
  ];

  // Handle filter generation
  const handleGenerate = (
    filters: Record<string, (string | number)[]>,
    sortOrder: "asc" | "desc"
  ) => {
    logger.debug("Selected filters:", filters);
    logger.debug("Sort order:", { sortOrder });

    // Example: Build query parameters
    const params = new URLSearchParams();
    Object.entries(filters).forEach(([key, values]) => {
      if (values.length > 0) {
        params.append(key, values.join("|"));
      }
    });
    params.append("sort", sortOrder);

    // Example: Navigate to filtered page or make API call
    // router.push(`/reports?${params.toString()}`);
    // or
    // fetch(`/api/reports?${params.toString()}`);
  };

  return (
    <div className="p-4">
      <FilterDropdown
        columns={filterColumns}
        onGenerate={handleGenerate}
        initialSort="desc"
        generateButtonText="Generate Report"
        showSortOptions={true}
        // Optional: Custom filter icon
        // filterIconUrl="https://www.oxyfinz.com/assets/img/filter.png"
      />
    </div>
  );
}

/**
 * Example with custom data transformation
 */
export function FilterDropdownWithCustomTransform() {
  const columns: FilterColumn[] = [
    {
      label: "Asset Class",
      apiEndpoint: "/api/asset-classes",
      transformData: (data: any) => {
        // If your API returns data in a custom format
        const items = data.data || data;
        return items.map((item: any) => ({
          id: item.id || item.asset_id,
          label: item.name || item.asset_name || item.label,
          value: item.id || item.asset_id,
        }));
      },
    },
  ];

  return (
    <FilterDropdown
      columns={columns}
      onGenerate={(filters, sort) => {
        logger.debug("Filters and sort", { filters, sort });
      }}
    />
  );
}

/**
 * Example API response formats that the component can handle:
 * 
 * Format 1: Array of objects
 * [
 *   { id: 1, label: "Option 1" },
 *   { id: 2, label: "Option 2" }
 * ]
 * 
 * Format 2: Object with data property
 * {
 *   data: [
 *     { id: 1, name: "Option 1" },
 *     { id: 2, name: "Option 2" }
 *   ]
 * }
 * 
 * Format 3: Object with items property
 * {
 *   items: [
 *     { bank_id: 1, bank_name: "Bank 1" },
 *     { bank_id: 2, bank_name: "Bank 2" }
 *   ]
 * }
 * 
 * For Format 3, use valueKey and labelKey:
 * {
 *   label: "Select Bank",
 *   apiEndpoint: "/api/banks",
 *   valueKey: "bank_id",
 *   labelKey: "bank_name"
 * }
 */