import { type FC } from 'react';

import Box from '@material-hu/mui/Box';
import Card from '@material-hu/mui/Card';
import CardHeader from '@material-hu/mui/CardHeader';
import Stack from '@material-hu/mui/Stack';

import HuPills from '@material-hu/components/design-system/Pills';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { usePostAttachments } from 'src/hooks/usePostAttachments';
import PostPreviewLink from 'src/pages/dashboard/feed/components/PostPreviewLink';
import Poll from 'src/pages/dashboard/feed/components/poll/Poll';
import { type DraftRequest } from 'src/types/posts';
import { getAudioDurationMs } from 'src/utils/attachments';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import {
  AttachmentsFileList,
  MediaCarousel,
  PostAudio,
} from 'src/components/attachment';
import Gif from 'src/components/attachment/Gif';
import ReadOnly from 'src/components/RichTextEditor/ReadOnly';
import { UserNameLink } from 'src/components/UserNameLink';
import ProfilePicture from 'src/components/user/ProfilePicture';

const MAX_CHARACTERS_LIMIT = 250;
const MAX_NEW_LINES_LIMIT = 4;

type PostDraftCardProps = {
  draftRequest: DraftRequest;
};

const PostDraftCard: FC<PostDraftCardProps> = props => {
  const { draftRequest } = props;
  const { post, draftPermission } = draftRequest;
  const { id, bodyHtml, poll, attachments, linkPreviews, group } = post;

  const HugoThemeProvider = useHuGoTheme();
  const { t } = useTranslation('communication');

  const {
    mediaList,
    fileList,
    audioList,
    gif: gifAttachment,
  } = usePostAttachments(attachments);

  const { userTo } = draftPermission;

  return (
    <HugoThemeProvider>
      <Stack>
        <Card
          variant="outlined"
          id="post-draft-card"
          sx={theme => ({ pb: 1, borderRadius: theme.shape.borderRadiusL })}
        >
          <CardHeader
            sx={{
              '& .MuiCardHeader-avatar': {
                mr: 1,
              },
            }}
            avatar={
              <ProfilePicture
                id={userTo.id}
                user={userTo}
                sx={{ width: '40px', height: '40px' }}
                withLink
              />
            }
            disableTypography
            subheader={
              <HuPills
                label={group?.title || t('post:feed')}
                size="small"
                type="info"
                hasIcon={false}
                sx={{ width: 'fit-content' }}
              />
            }
            title={<UserNameLink user={userTo} />}
          />
          <Box
            sx={{
              pb: 2,
              px: 0,
            }}
          >
            <Box sx={{ px: 2 }}>
              <ReadOnly
                content={bodyHtml ?? ''}
                maxCharacters={MAX_CHARACTERS_LIMIT}
                maxNewLines={MAX_NEW_LINES_LIMIT}
              />
            </Box>
            <>
              {!!linkPreviews && (
                <PostPreviewLink linkPreviews={linkPreviews} />
              )}
              {poll && (
                <Poll
                  id={id}
                  poll={poll}
                  isDraft
                />
              )}
              {gifAttachment && (
                <Box sx={{ mt: 2, px: 2 }}>
                  <Gif media={gifAttachment} />
                </Box>
              )}
              {mediaList?.length > 0 && (
                <Box sx={{ mt: 2, position: 'relative', height: '100%' }}>
                  <MediaCarousel mediaList={mediaList} />
                </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={{
                    my: 2,
                    display: 'flex',
                    justifyContent: 'flex-start',
                    px: 2,
                  }}
                >
                  <AttachmentsFileList
                    files={fileList}
                    enableOpenFile
                  />
                </Box>
              )}
            </>
          </Box>
        </Card>
      </Stack>
    </HugoThemeProvider>
  );
};

export default PostDraftCard;
