import styled from 'styled-components';
import React from 'react';
import { Skeleton } from 'antd';
import { formatUtcToLocal } from '@bjsdistribution/dms-component-library';
import { useAuditLogLoadingState, usegetNotes } from '../store';
import { NotesTableData } from '../notes/logs/fakeData';

const GenericAuditLogsTable = () => {
  const tableHeadData = NotesTableData[0].tableHead; // Assuming NotesTableData contains table header information
  const [getNotes] = usegetNotes();
  const [auditLogLoadingStatus] = useAuditLogLoadingState();

  return (
    <ScrollableTableWrapper>
      <AuditTableWrapper>
        <table>
          <thead>
            <tr>
              {tableHeadData?.map(column => (
                <th key={column.key}>{column.label}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {auditLogLoadingStatus ? (
              <tr>
                <td className="noBoder" colSpan={tableHeadData?.length}>
                  <Skeleton />
                </td>
              </tr>
            ) : getNotes && getNotes?.length > 0 ? (
              getNotes?.map((note: any) => (
                <tr key={note?.id}>
                  <td>
                    <div className="bold" title={note?.created_by}>
                      {note?.created_by}
                    </div>
                    <div>{`${formatUtcToLocal(note?.created_at).date} @ ${
                      formatUtcToLocal(note?.created_at).time
                    }`}</div>
                  </td>
                  <td
                    dangerouslySetInnerHTML={{ __html: note?.description }}
                  ></td>
                </tr>
              ))
            ) : (
              <tr>
                <td colSpan={tableHeadData?.length}>No data found</td>
              </tr>
            )}
          </tbody>
        </table>
      </AuditTableWrapper>
    </ScrollableTableWrapper>
  );
};

export const AuditTableWrapper = styled.div`
  height: 250px;
  min-height: 200px;
  /* overflow: auto; */

  table {
    border-spacing: 0;
    width: 100%;
    text-align: left;

    thead {
      th {
        border-bottom: 1px solid rgba(58, 54, 48, 0.25);
        background: #faf9f9;
        padding: 14px 12px;
        color: #3a3630;
        font-size: 14px;
        font-weight: 600;
        line-height: 24px;
      }
    }
    tbody {
      td {
        color: #667085;
        font-family: Lato;
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        padding: 10px;
        .bold {
          font-weight: 500;
          font-size: 14px;
        }
      }
    }
  }
`;

const ScrollableTableWrapper = styled.div`
  height: 550px;
  overflow: auto;
`;

export default GenericAuditLogsTable;
