import { ActionsMenu } from '@/components/ActionsMenu';
import { DateAgoField } from '@/components/ra-fields';
import { MarkAsReadedButton, MarkAsUnreadedButton } from '@/components/ra-lists/NotificationList/buttons';
import { NotificationField } from '@/components/ra-lists/NotificationList/fields';
import { darken, lighten, useTheme } from '@mui/material';
import { useMemo } from 'react';
import { Datagrid } from 'react-admin';

function NotificationList({ ...props }): JSX.Element {
  const theme = useTheme();
  const { mode, colorize, density } = useMemo(
    () => ({
      mode: theme.palette.mode,
      colorize: theme.palette.mode === 'dark' ? darken : lighten,
      density: theme.palette.mode === 'dark' ? 0.5 : 0.9
    }),
    [theme.palette.mode]
  );
  function rowSx(record: any): any {
    return {
      backgroundColor: !record?.readed
        ? colorize(theme.palette.primary[mode], density)
        : colorize(theme.palette.secondary[mode], density)
    };
  }

  return (
    <Datagrid {...props} rowSx={rowSx}>
      <NotificationField source="notification" sortable={false} />
      <DateAgoField source="created" />
      <ActionsMenu>
        <MarkAsReadedButton />
        <MarkAsUnreadedButton />
      </ActionsMenu>
    </Datagrid>
  );
}

export { NotificationList };