import * as React from 'react';
import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
import { Box } from '@mui/system';
import { useTheme } from '@mui/material/styles';
import { Tooltip } from '@nymproject/react/tooltip/Tooltip';
import { EconomicsRowsType, EconomicsInfoRowWithIndex } from './types';
import { UniversalTableProps } from '../../DetailTable';
import { textColour } from '../../../utils';

const formatCellValues = (value: EconomicsRowsType, field: string) => (
  <Box sx={{ display: 'flex', alignItems: 'center' }} id="field">
    <Typography sx={{ mr: 1, fontWeight: '600', fontSize: '12px' }} id={field}>
      {value.value}
    </Typography>
  </Box>
);

export const DelegatorsInfoTable: FCWithChildren<UniversalTableProps<EconomicsInfoRowWithIndex>> = ({
  tableName,
  columnsData,
  rows,
}) => {
  const theme = useTheme();

  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label={tableName}>
        <TableHead>
          <TableRow>
            {columnsData?.map(({ field, title, tooltipInfo, width }) => (
              <TableCell key={field} sx={{ fontSize: 14, fontWeight: 600, width }}>
                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                  {tooltipInfo && (
                    <Tooltip
                      title={tooltipInfo}
                      id={field}
                      placement="top-start"
                      textColor={theme.palette.nym.networkExplorer.tooltip.color}
                      bgColor={theme.palette.nym.networkExplorer.tooltip.background}
                      maxWidth={230}
                      arrow
                    />
                  )}
                  {title}
                </Box>
              </TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {rows?.map((eachRow) => (
            <TableRow key={eachRow.id} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
              {columnsData?.map((_, index: number) => {
                const { field } = columnsData[index];
                const value: EconomicsRowsType = (eachRow as any)[field];
                return (
                  <TableCell
                    key={_.title}
                    sx={{
                      color: textColour(value, field, theme),
                    }}
                    data-testid={`${_.title.replace(/ /g, '-')}-value`}
                  >
                    {formatCellValues(value, columnsData[index].field)}
                  </TableCell>
                );
              })}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};
