import { type FC } from 'react';

import Box from '@material-hu/mui/Box';

import PostPreviewLink from 'src/pages/dashboard/feed/components/PostPreviewLink';
import Poll from 'src/pages/dashboard/feed/components/poll/Poll';
import { type Attachment } from 'src/types/attachments';
import { ApprovalStatus } from 'src/types/groups';
import { type Poll as PollType, type Post } from 'src/types/posts';
import { type LinkPreviewResponse } from 'src/types/previewLink';
import { getAudioDurationMs } from 'src/utils/attachments';

import {
  AttachmentsFileList,
  MediaCarousel,
  PostAudio,
} from 'src/components/attachment';
import Gif from 'src/components/attachment/Gif';

type PostCardFeaturesProps = {
  id: Post['id'];
  poll: PollType | null;
  gif?: Attachment;
  mediaList: Attachment[];
  fileList: Attachment[];
  audioList?: Attachment[];
  linkPreviews: Record<string, LinkPreviewResponse> | null;
  grantVideoDownload?: boolean;
  isDetail?: boolean;
  approvalStatus?: ApprovalStatus;
  /** Whether the user can vote on polls (for group member check). Defaults to true. */
  userCanVote?: boolean;
  parentElementId?: string;
  mediaMaxHeight?: number;
};

export const PostCardFeatures: FC<PostCardFeaturesProps> = ({
  id,
  parentElementId,
  poll,
  gif,
  mediaList,
  fileList,
  audioList = [],
  linkPreviews,
  grantVideoDownload,
  isDetail,
  approvalStatus,
  userCanVote = true,
  mediaMaxHeight,
}) => {
  return (
    <>
      {!!linkPreviews && <PostPreviewLink linkPreviews={linkPreviews} />}
      {poll && (
        <Poll
          id={id}
          poll={poll}
          isDetail={isDetail}
          viewOnly={approvalStatus === ApprovalStatus.PENDING}
          userCanVote={userCanVote}
        />
      )}
      {gif && (
        <Box sx={{ px: 2 }}>
          <Gif media={gif} />
        </Box>
      )}
      {mediaList?.length > 0 && (
        <Box sx={{ position: 'relative', height: '100%' }}>
          <MediaCarousel
            mediaList={mediaList}
            parentContainerId={parentElementId ?? `post-card-${id}`}
            grantVideoDownload={grantVideoDownload}
            isPost
            mediaMaxHeight={mediaMaxHeight}
          />
        </Box>
      )}
      {audioList.length > 0 && (
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: 1,
            px: 2,
            pt: 1,
          }}
        >
          {audioList.map(audio => (
            <PostAudio
              key={audio.url}
              src={audio.url!}
              name={audio.name ?? undefined}
              duration={getAudioDurationMs(audio)}
            />
          ))}
        </Box>
      )}
      {fileList?.length > 0 && (
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'flex-start',
            px: 2,
          }}
        >
          <AttachmentsFileList
            files={fileList}
            enableOpenFile
          />
        </Box>
      )}
    </>
  );
};