import { FC, useMemo } from 'react';

import { GenericPostMenu } from 'src/pages/dashboard/feed/components/GenericPostMenu';
import { EventPostType } from 'src/types/events';

import EventPostCommentEnableOrDisable from './EventPostCommentEnableOrDisable';
import EventPostDelete from './EventPostDelete';
import EventPostEdit from './EventPostEdit';

export type EventPostMenuProps = {
  post: EventPostType;
  eventId: number;
  showEdit: boolean;
  showDelete: boolean;
  showEnableDisableComments: boolean;
  onEdit: () => void;
  onDelete: () => void;
};

export const EventPostMenu: FC<EventPostMenuProps> = props => {
  const {
    post,
    eventId,
    showEdit,
    showDelete,
    showEnableDisableComments,
    onEdit,
    onDelete,
  } = props;

  const menuOptions = useMemo(
    () => [
      {
        id: 'edit-post',
        enabled: showEdit,
        option: <EventPostEdit onEdit={onEdit} />,
      },
      {
        id: 'enable-disable-comments',
        enabled: showEnableDisableComments,
        closeOnSelect: true,
        option: (
          <EventPostCommentEnableOrDisable
            post={post}
            eventId={eventId}
          />
        ),
      },
      {
        id: 'delete-post',
        enabled: showDelete,
        option: <EventPostDelete onDelete={onDelete} />,
      },
    ],
    [
      showEdit,
      showDelete,
      showEnableDisableComments,
      post,
      eventId,
      onEdit,
      onDelete,
    ],
  );

  return (
    <GenericPostMenu
      id={post.id}
      menuOptions={menuOptions}
    />
  );
};

export default EventPostMenu;