import { PlusCircleOutlined } from '@ant-design/icons';
import { IconButton, Stack, Typography, useTheme } from '@mui/material';
import React from 'react';

function AddTableRow(props: any): JSX.Element {
  const { label, disableAdd, onClick, inset } = props;
  const theme = useTheme();
  // @ts-ignore
  const tableBorderColor = theme.palette.mode === 'dark' ? theme.palette.grey.A400 : theme.palette.grey.A800;
  const iconColor = theme.palette.mode === 'light' ? '#000000' : '#FFFFFF';

  return (
    <Stack
      justifyContent={'space-between'}
      alignItems={'center'}
      flexDirection={'row'}
      sx={inset ? { p: 2.5 } : { pt: 2 }}
    >
      {label !== false && <Typography>{label}</Typography>}
      {!disableAdd &&
        (React.isValidElement(props?.customButton) ? (
          React.cloneElement(props?.customButton, {
            onClick: onClick
          })
        ) : (
          <IconButton color="secondary" sx={{ border: `1px solid ${tableBorderColor}` }} onClick={onClick}>
            <PlusCircleOutlined style={{ color: iconColor }} />
          </IconButton>
        ))}
    </Stack>
  );
}

export { AddTableRow };