// resources\assets\ts\ContactsPage\components\AufgabenTab\AufgabenView.tsx
import React from 'react';
import Box from '@mui/material/Box';
import Comments from '../../../share/aufgaben-shared/components/Comments';
import Picture from '../../../share/aufgaben-shared/components/Picture';
// import { FixTableLayout } from '../../../share/aufgaben-shared/components/DataTable';
import { FixTableLayout } from '../../../share/aufgaben-shared/components/FixTableLayout';


interface CommentsState {
  ergs: Record<number, number[]>;
  entities: Record<number, any>;
}

interface PointsState {
  tables: Record<number, string>;
}

interface PicturesState {
  ergs: Record<number, number[]>;
  entities: Record<number, any>;
}

export function CommentView({
  ergID,
  comments,
  fetchComment,
  canDelete,
}: {
  ergID: number;
  comments: CommentsState;
  fetchComment: (id: number) => any;
  canDelete: boolean;
}) {
  if (comments.ergs[ergID] === undefined) return null;

  return (
    <Comments
      comments={comments.ergs[ergID].map((id) => comments.entities[id])}
      ergID={ergID}
      fetchComment={fetchComment}
      canDelete={canDelete}
    />
  );
}

export function PointTableView({ ergID, points }: { ergID: number; points: PointsState }) {
  if (points.tables[ergID] === undefined) return null;

  return (
    <Box component="div">
      <FixTableLayout>
        <div dangerouslySetInnerHTML={{ __html: points.tables[ergID] }} />
      </FixTableLayout>
    </Box>
  );
}

export function PicView({
  ergID,
  pictures,
  canDelete,
}: {
  ergID: number;
  pictures: PicturesState;
  canDelete: boolean;
}) {
  if (pictures.ergs[ergID] === undefined) return null;

  return (
    <>
      {pictures.ergs[ergID]
        .map((id) => pictures.entities[id])
        .map((p) => (
          <Picture
            key={p.pic_id}
            comment=""
            path={p.pic_name}
            id={p.pic_id}
            ergID={ergID}
            canDelete={canDelete}
          />
        ))}
    </>
  );
}