// resources\assets\ts\share\Comments.tsx
import Box from '@mui/material/Box';
import { Datetime } from '@Format';
import { Trans } from '@lingui/macro';
import DeleteIcon from '@mui/icons-material/Delete';
import React from 'react';
import styled from 'styled-components';
import moment from 'moment';

export interface Comment {
  id: number;
  sign: string;
  timestamp: string;
  content: string;
  link?: string;
  type: 'file' | 'pdf' | 'img' | 'string' | 'url' | 'html';
}

const StyledTable = styled.table`
  width: 100%;

  th {
    border-bottom: 2px solid #dee2e6;
  }

  tbody tr:nth-of-type(2n + 1) {
    background-color: rgba(0, 0, 0, 0.05);
  }
`;

const Content = ({ comment }: { comment: Comment }) => {
  switch (comment.type) {
    case 'url':
      return (
        <a target='_blank' rel='noopener noreferrer' href={comment.content}>
          {comment.content}
        </a>
      );

    case 'file':
      return (
        <a href={`/file/${comment.content}`} target='_blank' rel='noreferrer'>
          <img
            src={`/fileicons/${
              comment.content?.split('.')?.pop()?.toLowerCase() ?? 'invalid-sak'
            }`}
            width='40'
          />
          {comment.content?.split(/[\\/]/)?.pop() ?? 'invalid sak'}
        </a>
      );

    case 'img':
      return (
        <div>
          <a href={comment.link} target='_blank' rel='noreferrer'>
            <img src={comment.link} width='50' />
            <span>{comment.content}</span>
          </a>
        </div>
      );

    case 'pdf':
      return (
        <div>
          <a href={comment.link} target='_blank' rel='noreferrer'>
            <img src={'/imgtasko/pdf.png'} width='50' />
            <span>{comment.content}</span>
          </a>
        </div>
      );

    case 'string':
    default:
      return (
        <span dangerouslySetInnerHTML={{ __html: comment.content }}></span>
      );
  }
};

interface CommentTableProps {
  comments: Comment[];
  handleDelete?: (arg) => void;
  canDelete: boolean;
}
export default function CommentTable({
  comments,
  handleDelete,
  canDelete,
}: CommentTableProps) {
  const isShowDelete = handleDelete !== undefined && canDelete ? true : false;
  return (
    <StyledTable>
      <thead>
        <tr>
          <th>
            <Trans>Sign</Trans>
          </th>
          <th>
            <Trans>Date</Trans>
          </th>
          <th>
            <Trans>Comment</Trans>
          </th>
          {isShowDelete && <th></th>}
        </tr>
      </thead>
      <tbody>
        {comments.map((c) => {
          let isCommentAuthor = c.sign === (window as any)?.userAuth?.kurzel;
          // the difference between the timestamp and now should not be more than 20 mins
          let isStillEditable =
            moment().diff(moment(c.timestamp), 'minutes') <= 20;
          return (
            <tr key={c.id}>
              <td>{c.sign}</td>
              <td>
                <Datetime datetime={c.timestamp} />
              </td>
              <td>
                <Content comment={c} />
              </td>
              {isShowDelete || (isCommentAuthor && isStillEditable) ? (
                <td>
                  <Box
                    style={{ cursor: 'pointer' }}
                    onClick={() => handleDelete(c.id)}
                  >
                    <DeleteIcon />
                  </Box>
                </td>
              ) : null}
            </tr>
          );
        })}
      </tbody>
    </StyledTable>
  );
}