import { useState } from "react";

import { AG_GRID_LOCALE_ES } from "@ag-grid-community/locale";
// Grid
import type { ColDef, GridOptions, ValueFormatterParams } from "ag-grid-community";
import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";

ModuleRegistry.registerModules([AllCommunityModule]);

// Core CSS
import { AgGridReact } from "ag-grid-react";
import { useCustomersQuery } from "../hooks";
import { useTranslation } from "../i18n";
import { CustomerStatusBadge } from "./customer-status-badge";

// Create new GridExample component
export const CustomersListGrid = () => {
  const { t } = useTranslation();
  const { data, isLoading, isPending, isError, error } = useCustomersQuery({});

  // Column Definitions: Defines & controls grid columns.
  const [colDefs] = useState<ColDef[]>([
    {
      field: "status",

      headerName: t("pages.list.grid_columns.status"),
      cellRenderer: (params: ValueFormatterParams) => {
        return <CustomerStatusBadge status={params.value} />;
      },
    },

    { field: "name", headerName: t("pages.list.grid_columns.name") },
    { field: "trade_name", headerName: t("pages.list.grid_columns.trade_name") },

    {
      field: "email",
      headerName: t("pages.list.grid_columns.email"),
    },
  ]);

  const gridOptions: GridOptions = {
    columnDefs: colDefs,
    defaultColDef: {
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: false,
      sortable: false,
      resizable: true,
    },
    pagination: true,
    paginationPageSize: 10,
    paginationPageSizeSelector: [10, 20, 30, 50],
    localeText: AG_GRID_LOCALE_ES,
    rowSelection: { mode: "multiRow" },
  };

  // Container: Defines the grid's theme & dimensions.
  return (
    <div
      className='ag-theme-alpine'
      style={{
        height: "100%",
        width: "100%",
      }}
    >
      <AgGridReact rowData={data?.items ?? []} loading={isLoading || isPending} {...gridOptions} />
    </div>
  );
};