import { ENGAGEMENT_TYPES } from 'components/Engagements/constants';

type Emoji = {
  native: string;
  unified: string;
};
type MenuItems = {
  label: string;
  onClick: () => void;
  key: string;
  isVisible?: boolean;
  hasSubItems?: boolean;
  dropdownProps?: DropdownProps;
  menuItems?: MenuItems[];
};
type UserData = {
  name: string;
  profileImageUrl?: string;
};
type CommentData = {
  id: string;
  createdAt?: string;
  commenter?: UserData;
  [key: string]: any;
};
type ActivityData = {
  id: string;
  creator?: UserData;
  [key: string]: any;
};
type EngagementType = typeof ENGAGEMENT_TYPES[number];
/**
 *
 * The Engagements component renders the general layout for comments and
 *
 * activities to show user engagement timeline.
 *
 * The main container component for the Engagements components that wraps the
 *
 * items.
 *
 * A wrapper component to be used within the Engagements to render individual
 *
 * comment.
 *
 * A wrapper component to be used within the Engagements to render individual
 *
 * activity.
 *
 * @example 
 *
 * import { useState } from "react";
 * import { User } from "neetoicons";
 * import { Typography } from "neetoui";
 * 
 * import Engagements from "neetomolecules/Engagements";
 * 
 * const Timeline = () => {
 *   const [data] = useState([
 *     {
 *       id: "comment-1",
 *       content: "Hi world!",
 *       commenter: { name: "Oliver Smith" },
 *       createdAt: Date().toString(),
 *     },
 *     {
 *       id: "comment-2",
 *       content: "Hi Oliver!",
 *       commenter: { name: "Lily James" },
 *       createdAt: Date().toString(),
 *     },
 *     {
 *       id: "activity-1",
 *       type: "USER_EXIT",
 *       creator: { name: "Oliver Smith" },
 *       createdAt: Date().toString(),
 *     },
 *   ]);
 * 
 *   return (
 *     <Engagements
 *       {...{ data }}
 *       isActivitiesEnabled
 *       renderActivity={engagement => (
 *         <Engagements.Activity icon={<User />} user={engagement.creator}>
 *           <Typography style="body2">
 *             {engagement.type === "USER_EXIT" &&
 *               `${engagement.creator.name} left this conversation`}
 *           </Typography>
 *         </Engagements.Activity>
 *       )}
 *       renderComment={engagement => (
 *         <Engagements.Comment
 *           comment={engagement}
 *           info="messaged"
 *           user={engagement.commenter}
 *         >
 *           <Typography style="body2">{engagement.content}</Typography>
 *         </Engagements.Comment>
 *       )}
 *     />
 *   );
 * };
 * @endexample
*/
declare const Engagements: React.FC<{
  data: Array<CommentData | ActivityData>;
  isActivitiesEnabled?: boolean;
  matchType?: (engagement: CommentData | ActivityData) => EngagementType;
  renderComment: (engagement: CommentData, index: number) => React.ReactNode;
  renderActivity: (engagement: ActivityData, index: number) => React.ReactNode;
}> & {
  Comment: React.FC<{
    user: UserData;
    comment: CommentData;
    reactions?: boolean | Emoji[];
    info?: string;
    actions?: MenuItems[];
    className?: string;
    onAddReaction: (emoji: Emoji) => void;
    onRemoveReaction: (emoji: Emoji) => void;
  }>;
  Activity: React.FC<{
    user: UserData;
    icon: React.ReactNode;
    unread?: boolean;
    className?: string;
  }>;
};

export { Engagements as default };