import { type FC } from 'react';
import { matchPath } from 'react-router-dom';

import { IconExternalLink, IconPinned } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import { KeyUpdatePostMenu } from 'src/pages/dashboard/feed/components/KeyUpdatePostMenu';
import PostMenu from 'src/pages/dashboard/feed/components/PostMenu';
import { feedRoutes } from 'src/pages/dashboard/feed/routes';
import { type Links } from 'src/types/actionLinks';
import GroupPostMenu from 'src/pages/dashboard/groups/components/GroupPostMenu';
import { type GroupPost } from 'src/types/groups';
import { type Poll, type Post } from 'src/types/posts';

type BasePostActionProps = {
  id: number;
  user: Post['user'];
  isKeyUpdate?: boolean;
  isPendingApproval?: boolean;
  isSegmented?: boolean;
  commentsEnabled?: boolean;
  poll?: Poll | null;
  isPinned?: boolean;
  externalLinkUrl?: string;
  hidePinIcon?: boolean;
  actionLinks?: Links;
  isLive?: boolean;
  /** Full original post object — used to enable the "Share post" menu item. */
  originalPost?: Post | GroupPost;
};

type FeedPostActionProps = BasePostActionProps & {
  variant: 'feed';
  canEdit?: boolean;
  isGroupPost: {
    value: boolean;
    groupId: number;
  };
};

type GroupPostActionProps = BasePostActionProps & {
  variant: 'group';
  groupId: number;
};

export type PostActionProps = FeedPostActionProps | GroupPostActionProps;

const PinIcon: FC = () => {
  const theme = useTheme();
  return <IconPinned style={{ color: theme.palette.ilustrations?.erIlus }} />;
};

const ExternalLinkButton: FC<{ externalLinkUrl?: string }> = ({
  externalLinkUrl,
}) => (
  <IconButton
    component="a"
    href={externalLinkUrl || ''}
    target="_blank"
    rel="noopener noreferrer"
  >
    <IconExternalLink />
  </IconButton>
);

export const PostAction: FC<PostActionProps> = props => {
  const {
    id,
    variant,
    user,
    isKeyUpdate = false,
    isPendingApproval = false,
    isSegmented = false,
    commentsEnabled,
    poll,
    isPinned = false,
    externalLinkUrl,
    hidePinIcon = false,
    actionLinks,
    isLive = false,
    originalPost,
  } = props;

  const isKeyUpdatePage = !!matchPath(
    { path: feedRoutes.keyUpdates(), end: true },
    window.location.pathname,
  );

  // Handle KeyUpdatePostMenu for feed variant
  if (isKeyUpdatePage && variant === 'feed') {
    const { isGroupPost } = props as FeedPostActionProps;
    return (
      <KeyUpdatePostMenu
        id={id}
        isGroupPost={isGroupPost}
        isPendingApproval={isPendingApproval}
        isSegmented={isSegmented}
      />
    );
  }

  const renderMenu = () => {
    if (variant === 'feed') {
      const { canEdit, isGroupPost } = props as FeedPostActionProps;
      return (
        <PostMenu
          id={id}
          user={user}
          canEdit={canEdit}
          commentsEnabled={commentsEnabled}
          isGroupPost={isGroupPost}
          isPendingApproval={isPendingApproval}
          isKeyUpdate={isKeyUpdate}
          isSegmented={isSegmented}
          poll={poll}
          isLive={isLive}
          originalPost={originalPost}
        />
      );
    }

    // Group variant
    return (
      <GroupPostMenu
        key={`${id}-${poll?.totalAnswerCount}`}
        id={id}
        user={user}
        isPinned={isPinned}
        isKeyUpdate={isKeyUpdate}
        isPendingApproval={isPendingApproval}
        isSegmented={isSegmented}
        commentsEnabled={commentsEnabled}
        poll={poll}
        actionLinks={actionLinks}
        isLive={isLive}
        originalPost={originalPost}
      />
    );
  };

  return (
    <Stack sx={{ flexDirection: 'row', alignItems: 'center' }}>
      {isPinned && !hidePinIcon && (
        <Stack sx={{ p: 1 }}>
          <PinIcon />
        </Stack>
      )}
      {externalLinkUrl && (
        <ExternalLinkButton externalLinkUrl={externalLinkUrl} />
      )}
      {renderMenu()}
    </Stack>
  );
};