import CardContainer from '@design-system/CardContainer';
import StateCard from '@design-system/StateCard';
import Table from '@design-system/Table';
import TableBody from '@design-system/Table/components/TableBody';
import TableCell from '@design-system/Table/components/TableCell';
import TableContainer from '@design-system/Table/components/TableContainer';
import TableRow from '@design-system/Table/components/TableRow';
import Title from '@design-system/Title';
import { Stack } from '@mui/material';
import { times } from 'lodash';

import TableRowSkeleton from './components/TableRowSkeleton';
import { type SatisfactionDrawerCommentListProps } from './types';

const SatisfactionDrawerCommentList = ({
  headerTitle = 'Comments',
  tableHeaderDecorator,
  comments = [],
  loading = false,
  loadingMore = false,
  emptyStateTitle = 'No comments available',
  emptyStateDescription = 'There are no comments to display for the selected criteria',
}: SatisfactionDrawerCommentListProps) => {
  return (
    <Stack sx={{ gap: 1 }}>
      <CardContainer
        color="grey"
        fullWidth
      >
        <Title
          title={headerTitle}
          variant="L"
        />
      </CardContainer>
      {tableHeaderDecorator}
      {!loading && comments.length === 0 && (
        <StateCard
          title={emptyStateTitle}
          description={emptyStateDescription}
          variant="primary"
        />
      )}
      {(loading || comments.length > 0) && (
        <TableContainer>
          <Table>
            <TableBody>
              {loading && times(5, index => <TableRowSkeleton key={index} />)}
              {comments.map(comment => (
                <TableRow key={comment.id}>
                  <TableCell>
                    <Title
                      copetin={comment.copetin}
                      title={comment.comment}
                      variant="S"
                      fontWeight="fontWeightRegular"
                    />
                  </TableCell>
                </TableRow>
              ))}
              {loadingMore &&
                times(3, index => <TableRowSkeleton key={index} />)}
            </TableBody>
          </Table>
        </TableContainer>
      )}
    </Stack>
  );
};

export default SatisfactionDrawerCommentList;