import { Person } from '@mui/icons-material';
import {
  Alert,
  Avatar,
  Button,
  Card,
  CardActions,
  CardContent,
  CardHeader,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Link as MUILink,
  Snackbar,
  Typography,
} from '@mui/material';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { Link, useNavigate } from '@tanstack/react-router';
import { FC, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useApi } from '../../api/Api';
import { PostAuth, PostNonAuth } from '../../types/Post';
import convertDate from '../../utils/date';
import PostEditDialog from '../Dialogs/PostEdit/PostEditDialog';
import ErrorComponent from '../Error/ErrorComponent';

interface Props {
  page?: number;
  post: PostNonAuth | PostAuth;
  disableActions?: boolean;
}

const Post: FC<Props> = ({ page = 0, post, disableActions }) => {
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [editOpen, setEditOpen] = useState(false);
  //eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [error, setError] = useState<any>();

  const { t } = useTranslation();
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const Api = useApi();

  const deleteMutation = useMutation({
    mutationFn: (id: number) => Api.deletePost(id),
  });

  return (
    <Card>
      <CardHeader
        avatar={
          !disableActions && 'id' in post.user ? (
            post.user.id !== Api.authenticatedUser?.id ? (
              <MUILink component={Link} to="/profile/$id" params={{ id: post.user.id }}>
                <Avatar alt={post.user.username} src={`${post.user.image}`}>
                  <Person />
                </Avatar>
              </MUILink>
            ) : (
              <MUILink component={Link} to="/profile">
                <Avatar alt={post.user.username} src={`${post.user.image}`}>
                  <Person />
                </Avatar>
              </MUILink>
            )
          ) : (
            <Avatar alt={post.user.username} src={`${post.user.image}`}>
              <Person />
            </Avatar>
          )
        }
        title={
          !disableActions && 'id' in post.user ? (
            post.user.id !== Api.authenticatedUser?.id ? (
              <MUILink component={Link} to="/profile/$id" params={{ id: post.user.id }}>
                {post.user.username}
              </MUILink>
            ) : (
              <MUILink component={Link} to="/profile">
                {post.user.username}
              </MUILink>
            )
          ) : (
            post.user.username
          )
        }
        subheader={convertDate(post.postedAt)}
      />
      <CardContent>
        <Typography>
          <span dangerouslySetInnerHTML={{ __html: post.content }} />
        </Typography>
      </CardContent>

      <CardActions>
        {!disableActions &&
          (Api.authenticatedUser?.isAdmin || ('id' in post.user && post.user.id === Api.authenticatedUser?.id)) && (
            <>
              <Button size="small" onClick={() => setEditOpen(true)}>
                {t('Edit')}
              </Button>
              <PostEditDialog post={post as PostAuth} open={editOpen} onClose={() => setEditOpen(false)} />
            </>
          )}
        {!disableActions && Api.authenticatedUser?.isAdmin && (
          <>
            <Button size="small" color="error" onClick={() => setDeleteOpen(true)}>
              {t('Delete')}
            </Button>
            <Dialog open={deleteOpen} onClose={() => setDeleteOpen(false)}>
              <DialogTitle>{t('Confirm post delete title')}</DialogTitle>
              <DialogContent>
                <DialogContentText>{t('Confirm post delete body', { name: post.user.username })}</DialogContentText>
              </DialogContent>
              <DialogActions>
                <Button onClick={() => setDeleteOpen(false)} autoFocus variant="contained">
                  {t('No')}
                </Button>
                <Button
                  variant="outlined"
                  color="error"
                  onClick={() => {
                    deleteMutation.mutate(post.id, {
                      onSuccess: async (data) => {
                        await queryClient.invalidateQueries({
                          queryKey: ['posts'],
                        });
                        if (page >= data.pages) navigate({ to: '/', search: { page: data.pages - 1 } });
                      },
                      onError: setError,
                    });
                    setDeleteOpen(false);
                  }}
                >
                  {t('Yes')}
                </Button>
              </DialogActions>
            </Dialog>
          </>
        )}
      </CardActions>
      <Snackbar
        open={deleteMutation.isError}
        autoHideDuration={2000}
        onClose={() => {
          deleteMutation.reset();
        }}
        TransitionProps={{
          onExited: () => setError(undefined),
        }}
      >
        <Alert severity="error" variant="filled" sx={{ width: '100%' }}>
          {error && <ErrorComponent error={error} context="deletePost" color="white" />}
        </Alert>
      </Snackbar>
      <Snackbar open={deleteMutation.isPending} message={t('Deleting')} />
    </Card>
  );
};

export default Post;
