import React from "react";
import {
  useAddKeyToData,
  Table,
  useTranslation,
  usePagination,
  Loading,
  EmptyData,
} from ".";
import { DataTableProps } from "../../../types/Table";

const DataTable: React.FC<DataTableProps> = ({
  response,
  useColumns,
  ...props
}) => {
  const data: any[] = response?.data?.data || [];
  const dataSource = useAddKeyToData(data);
  const columns = useColumns();
  const { pagination, handlePageChange } = usePagination(response?.data);
  const [t] = useTranslation();
  const getRowClassName = (record: any, index: number): string => {
    return index % 2 === 0 ? "even-row" : "odd-row";
  };
  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      rowClassName={(record, index) => getRowClassName(record, index)}
      className="DataTable"
      loading={{
        spinning: response?.isLoading,
        indicator: <Loading />,
        size: "large",
      }}
      locale={{
        emptyText: (
          <EmptyData
            loading={response?.isLoading}
            header={t("Table.header")}
            info={t("Table.info")}
          />
        ),
      }}
      pagination={{
        ...pagination,
        onChange: handlePageChange,
      }}
      {...props}
    />
  );
};

export default DataTable;
