import Loader from '@/components/common/Loader';
import { Scrollbar } from '@/components/common/Scrollbar';
import BaseButton from '@/components/ui-kit/BaseButton';
import BaseIconButton from '@/components/ui-kit/BaseIconButton';
import { FilterList, Search } from '@mui/icons-material';
import {
    Box,
    IconButton,
    Stack,
    SxProps,
    Table,
    TableBody,
    TableHead,
    TableRow,
    Theme,
    Tooltip,
    Typography,
    styled,
    TableCell,
} from '@mui/material';
import React from 'react';

export interface ColumnData<Data, DataKey = keyof Data> {
    dataKey?: DataKey;
    label: string;
    width: string | number;
    numeric?: boolean;
    getSxStyles?: (data: Data) => SxProps<Theme>;
    renderCell?: (data: Data, rowIndex: number) => React.ReactNode;
    renderHeaderCell?: (rowIndex: number) => React.ReactNode;
}

const StyledTable = styled(Table)`
    td,
    th {
        height: auto;
        padding: 12px 24px;
        border-color: #ebeff6;
        flex-shrink: 0;
    }

    tr {
        &:last-child {
            td {
                border-color: transparent;
            }
        }
    }

    thead {
        th {
            font-size: 16px;
            font-weight: 500;
            line-height: 20px;
            color: #8c959e;
        }
    }

    tbody {
        td {
            font-size: 15px;
            font-weight: 600;
            line-height: 20px;
            color: #000;
        }
    }
`;
const StyledTableRow = styled(TableRow)``;
const StyledTableCell = styled(TableCell)`
    flex-shrink: 0;
`;

type Props<Data> = {
    columns: ColumnData<Data & { id: number | string }>[];
    data: Data[];
    loading: boolean;
    onClickRow?: (data: Data) => void;
};

const MyTable = <Data extends { id: number | string }>(props: Props<Data>) => {
    const { columns, data, loading, onClickRow } = props;

    const isEmpty = !data?.length && !loading;

    return (
        <Box>
            <Scrollbar>
                <StyledTable>
                    <TableHead>
                        <StyledTableRow>
                            {columns.map((column, index) => (
                                <StyledTableCell
                                    // @ts-expect-error
                                    key={column.dataKey + index}
                                    variant='head'
                                    align={column.numeric || false ? 'right' : 'left'}
                                    sx={{
                                        backgroundColor: 'background.paper',
                                        width: column.width,
                                        whiteSpace: 'nowrap',
                                    }}
                                >
                                    {column.renderHeaderCell ? column.renderHeaderCell(index) : column.label}
                                </StyledTableCell>
                            ))}
                        </StyledTableRow>
                    </TableHead>
                    <TableBody>
                        {isEmpty ? (
                            'Empty'
                        ) : loading ? (
                            <StyledTableCell colSpan={columns.length}>
                                <Loader p={4} size={96} />
                            </StyledTableCell>
                        ) : (
                            data.map((row, rowIndex) => {
                                return (
                                    <StyledTableRow
                                        key={row.id}
                                        sx={{
                                            ...(onClickRow
                                                ? {
                                                      cursor: 'pointer',
                                                      '&:hover': {
                                                          backgroundColor: '#f1f1f1',
                                                      },
                                                  }
                                                : {}),
                                        }}
                                        onClick={() => {
                                            onClickRow?.(row);
                                        }}
                                    >
                                        {columns.map((column, index) => (
                                            <StyledTableCell
                                                // @ts-expect-error
                                                key={column.dataKey + index}
                                                align={column.numeric || false ? 'right' : 'left'}
                                                sx={{
                                                    ...column.getSxStyles?.(row),
                                                    width: column.width,
                                                }}
                                            >
                                                {/* @ts-expect-error */}
                                                {column.renderCell ? column.renderCell(row, rowIndex) : row[column.dataKey]}
                                            </StyledTableCell>
                                        ))}
                                    </StyledTableRow>
                                );
                            })
                        )}
                    </TableBody>
                </StyledTable>
            </Scrollbar>
        </Box>
    );
};

export default MyTable;
