import { forwardRef, useCallback, useMemo } from 'react';
import { IconArrowRight, useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { useChatContext, GroupStore } from 'tuikit-atomicx-react/chat';
import { View } from 'tuikit-atomicx-react/chat';
import { GroupPermission, hasGroupPermission } from '../../../../utils/chatGroupPermission';
import { Divider } from '../../Divider';
import classes from './GroupManagementEntry.module.scss';

interface GroupManagementEntryProps {
  className?: string;
  onClick?: () => void;
}

const GroupManagementEntry = forwardRef<HTMLDivElement, GroupManagementEntryProps>((props, ref) => {
  const { className, onClick } = props;
  const { t } = useUIKit();
  const { activeConversationID } = useChatContext();
  const { joinedGroupList } = GroupStore();

  const currentGroupID = activeConversationID?.startsWith('GROUP') ? activeConversationID.slice(5) : undefined;
  const groupInfo = useMemo(() => joinedGroupList.find(g => g.groupID === currentGroupID), [joinedGroupList, currentGroupID]);

  const shouldShowGroupManagement =
    hasGroupPermission(GroupPermission.SET_MEMBER_ROLE, groupInfo?.selfRole, groupInfo?.groupType)
    || hasGroupPermission(GroupPermission.MUTE_MEMBER, groupInfo?.selfRole, groupInfo?.groupType)
    || hasGroupPermission(GroupPermission.MUTE_ALL_MEMBERS, groupInfo?.selfRole, groupInfo?.groupType);

  const handleClick = useCallback(() => {
    onClick?.();
  }, [onClick]);

  if (!shouldShowGroupManagement) {
    return null;
  }

  return (
    <>
      <Divider variant="line" />
      <View
        ref={ref}
        className={cs(classes['group-management-entry'], className)}
        onClick={handleClick}
      >
        <View className={classes['group-management-entry__content']} flexDir="row">
          <span className={classes['group-management-entry__title']}>{t('ChatSetting.group_management')}</span>
          <IconArrowRight className={cs(classes['group-management-entry__arrow'], 'unique-icon-btn--h5')} size={'24'} />
        </View>
      </View>
    </>
  );
});

GroupManagementEntry.displayName = 'GroupManagementEntry';

export { GroupManagementEntry };