import PaginationControls from "../PaginationControls/PaginationControls";
import style from "./DataGrid.module.css";

export type DataGridRow = {
    id: string;
};

export type DataGridColumn<CustomDataGridRow extends DataGridRow = DataGridRow> = {
    title: string;
    field: string;
    width: number | null;
    render: (value: CustomDataGridRow) => React.ReactNode;
};

export interface DataGridProps<CustomDataGridRow extends DataGridRow = DataGridRow> {
    columns: DataGridColumn<CustomDataGridRow>[];
    data: CustomDataGridRow[];
    footer?: boolean;
    header?: boolean;
    headerHeight?: number;
    pagination?: boolean;
    pageSize?: number;
    pages?: number;
    page?: number;
    handleRefresh?: (page: number, pageSize: number) => void;
    handleRowClick?: (row: CustomDataGridRow) => void;
}

export default function DataGrid<CustomDataGridRow extends DataGridRow = DataGridRow>(
    props: DataGridProps<CustomDataGridRow>
) {
    const {
        columns,
        data,
        footer = true,
        header = true,
        pagination = false,
        pageSize = 10,
        pages = 1,
        page = 1,
        handleRefresh = () => {},
    } = props;
    const getColumnWidth = (column: DataGridColumn<CustomDataGridRow>): React.CSSProperties => {
        let returnStyle: React.CSSProperties = {};

        if (column.width) {
            returnStyle = {
                width: column.width + "px",
                minWidth: column.width + "px",
            };
        } else {
            returnStyle = {
                width: "100%",
            };
        }

        return returnStyle;
    };
    return (
        <div className={style.dataGrid}>
            {header && (
                <div className={style.dataGridHeader}>
                    {columns.map((column) => (
                        <div
                            key={column.field}
                            style={getColumnWidth(column)}
                            className={style.dataGridHeaderItem}
                        >
                            {column.title ? column.title : "\u00A0"}
                        </div>
                    ))}
                </div>
            )}
            <div className={style.dataGridContent}>
                {data.map((row, index) => (
                    <div
                        key={index}
                        className={style.dataGridRow}
                        onClick={() => {
                            if (!props.handleRowClick) {
                                return;
                            }
                            props.handleRowClick(row);
                        }}
                    >
                        {columns.map((column) => (
                            <span
                                key={column.field}
                                className={style.dataGridRowItem}
                                style={getColumnWidth(column)}
                            >
                                {column.render(row)}
                            </span>
                        ))}
                    </div>
                ))}
            </div>
            {footer && (
                <div className={style.dataGridFooter}>
                    {pagination && (
                        <PaginationControls
                            onChange={handleRefresh}
                            current={page}
                            size={pageSize}
                            max={pages}
                        />
                    )}
                </div>
            )}
        </div>
    );
}
