import { useEffect, 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]);

import { MoneyDTO } from "@erp/core";
import { formatDate, formatMoney } from "@erp/core/client";
// Core CSS
import { AgGridReact } from "ag-grid-react";
import { useCustomerInvoicesQuery } from "../hooks";

/**
 * Fetch example Json data
 * Not recommended for production use!
 */
export const useFetchJson = <T,>(url: string, limit?: number) => {
  const [data, setData] = useState<T[]>();
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);

      // Note error handling is omitted here for brevity
      const response = await fetch(url);
      const json = await response.json();
      const data = limit ? json.slice(0, limit) : json;
      setData(data);
      setLoading(false);
    };
    fetchData();
  }, [url, limit]);
  return { data, loading };
};

// Row Data Interface
interface IRow {
  mission: string;
  company: string;
  location: string;
  date: string;
  time: string;
  rocket: string;
  price: number;
  successful: boolean;
}

// Create new GridExample component
export const CustomerInvoicesGrid = () => {
  //const { useList } = useCustomerInvoices();

  const { data, isLoading, isPending, isError, error } = useCustomerInvoicesQuery({});

  // Column Definitions: Defines & controls grid columns.
  const [colDefs] = useState<ColDef[]>([
    { field: "invoice_number", headerName: "Num. factura" },
    { field: "invoice_series", headerName: "Serie" },
    {
      field: "invoice_status",
      filter: true,
      headerName: "Estado",
    },

    {
      field: "issue_date",
      headerName: "Fecha fact.",
      valueFormatter: (params: ValueFormatterParams) => {
        return formatDate(params.value);
      },
    },
    {
      field: "subtotal_price",
      valueFormatter: (params: ValueFormatterParams) => {
        const rawValue: MoneyDTO = params.value;
        return formatMoney(rawValue);
      },
    },
    {
      field: "total_price",
      valueFormatter: (params: ValueFormatterParams) => {
        const rawValue: MoneyDTO = params.value;
        return formatMoney(rawValue);
      },
    },
  ]);

  const gridOptions: GridOptions = {
    columnDefs: colDefs,
    defaultColDef: {
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: false,
      sortable: false,
      resizable: true,
    },
    sideBar: true,
    statusBar: {
      statusPanels: [
        { statusPanel: "agTotalAndFilteredRowCountComponent", align: "left" },
        { statusPanel: "agAggregationComponent" },
      ],
    },
    rowGroupPanelShow: "always",
    pagination: true,
    paginationPageSize: 10,
    paginationPageSizeSelector: [10, 20, 30, 50],
    enableCharts: true,
    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>
  );
};