import React from 'react';
import { UseQueryResult } from '@tanstack/react-query';
import { List as AntdList, Button, Badge, Typography } from 'antd';
import { ILog, ILogData } from '@refinedev/core';
import dayjs from 'dayjs';

const { Text } = Typography;

interface EventListProps {
  logQueryResult?: UseQueryResult<ILogData>;
  showModal: () => void;
  setSelectedLog: React.Dispatch<React.SetStateAction<ILog | undefined>>;
  selectedLog: ILog | undefined;
}

export const EventList: React.FC<EventListProps> = ({
  logQueryResult,
  showModal,
  setSelectedLog,
  selectedLog,
}) => {
  return (
    <AntdList
      dataSource={logQueryResult?.data}
      renderItem={(log: any) => {
        const { creator, action, timestamp } = log;

        return (
          <AntdList.Item
            style={{
              alignItems: 'flex-start',
              padding: '8px 0px 8px 8px',
            }}
          >
            <Button
              type="text"
              style={{
                display: 'flex',
                flexDirection: 'column',
                height: '100%',
              }}
              onClick={() => {
                showModal();
                setSelectedLog(log);
              }}
            >
              <Badge
                color={selectedLog?.id === log.id ? 'blue' : 'gray'}
                text={`${action} by ${creator}`}
              />
              <Text>Date: {dayjs(timestamp).format('MM/DD/YYYY, hh:mm')}</Text>
            </Button>
          </AntdList.Item>
        );
      }}
    />
  );
};
