import { type FC } from 'react';
import { useTranslation } from 'react-i18next';

import { Stack } from '@mui/material';
import { IconDots, IconEdit, IconTrash } from '@tabler/icons-react';

import { insertIf } from '../../../utils/array';
import { getDistanceToNow } from '../../../utils/time';
import { getInitials } from '../../../utils/user';
import MenuList from '../../composed-components/MenuList';
import SeeMoreText from '../../composed-components/SeeMoreText';
import CardContainer from '../../design-system/CardContainer';
import ListItem from '../../design-system/List/components/ListItem';

import FilesCarrousel from './FilesCarrousel';
import MediaCarrousel from './MediaCarrousel';
import { type PostProps } from './types';

export const Post: FC<PostProps> = ({
  profilePicture,
  fullName,
  body,
  publicationDatetime,
  sx,
  actions,
  media,
  files,
}) => {
  const { t } = useTranslation('material_hu_only');

  const actionsList = [
    ...insertIf(!!actions?.onEdit, {
      title: t('posts.edit'),
      Icon: IconEdit,
      onClick: actions?.onEdit!,
    }),
    ...insertIf(!!actions?.onDelete, {
      title: t('posts.delete'),
      Icon: IconTrash,
      onClick: actions?.onDelete!,
    }),
  ];

  return (
    <CardContainer
      fullWidth
      padding={24}
      sx={sx}
    >
      <Stack sx={{ gap: 2 }}>
        <ListItem
          avatar={{ src: profilePicture, text: getInitials(fullName) }}
          text={{
            title: fullName,
            description: t('posts.time_distance', {
              distance: getDistanceToNow(publicationDatetime),
            }),
          }}
          actionMenuList={
            actionsList.length ? (
              <MenuList
                Icon={IconDots}
                options={actionsList}
              />
            ) : undefined
          }
          sx={{ '.MuiListItem-root': { p: 0 } }}
        />
        <SeeMoreText
          text={body}
          lines={6}
        />
        <MediaCarrousel media={media} />
        <FilesCarrousel files={files} />
      </Stack>
    </CardContainer>
  );
};

export default Post;