// @flow

import { useNavigation, useRoute } from "@react-navigation/native";
import ActivityHeaderContainer
  from "components/ObsDetailsSharedComponents/ActivityTab/ActivityHeaderContainer";
import DisagreementText from "components/ObsDetailsSharedComponents/ActivityTab/DisagreementText";
import {
  Body2,
  Body4,
  Divider,
  INatIcon,
  INatIconButton,
  UserText,
} from "components/SharedComponents";
import DisplayTaxon from "components/SharedComponents/DisplayTaxon";
import {
  View,
} from "components/styledComponents";
import { t } from "i18next";
import isEmpty from "lodash/isEmpty";
import type { Node } from "react";
import React from "react";

type Props = {
  currentUserId?: number,
  isFirstDisplay: boolean,
  isConnected: boolean,
  item: Object,
  openAgreeWithIdSheet: Function,
  refetchRemoteObservation: Function,
  userAgreedId?: string,
  geoprivacy: string,
  taxonGeoprivacy: string,
  belongsToCurrentUser: boolean,
  showExplainerText?: boolean,
  showStatus?: boolean,
}

const ActivityItem = ( {
  currentUserId,
  isFirstDisplay,
  isConnected,
  item,
  openAgreeWithIdSheet,
  refetchRemoteObservation,
  userAgreedId,
  geoprivacy,
  taxonGeoprivacy,
  belongsToCurrentUser,
  showExplainerText = false,
  showStatus,
}: Props ): Node => {
  const navigation = useNavigation( );
  const route = useRoute( );
  const { taxon, user, disagreement } = item;
  const isCurrent = item.current !== undefined
    ? item.current
    : undefined;

  const isHidden = item.hidden;

  const idWithdrawn = isCurrent !== undefined && !isCurrent;
  const showAgreeButton = user?.id !== currentUserId
    && userAgreedId !== taxon?.id
    && taxon?.is_active
    && isFirstDisplay
    && currentUserId;

  const navToTaxonDetails = ( ) => (
    navigation.navigate( {
      // Ensure button mashing doesn't open multiple TaxonDetails instances
      key: `${route.key}-ActivityItem-TaxonDetails-${taxon?.id}`,
      name: "TaxonDetails",
      params: { id: taxon?.id },
    } )
  );

  if ( isHidden ) {
    return (
      <View className="flex-column" testID="ObsDetails.ActivityItem.Hidden">
        <View className="p-4">
          <View className="flex-row">
            <INatIcon name="private" size={18} />
            <Body2 className="ml-2">{t( "Content-Hidden" )}</Body2>
          </View>
          <Body4 className="py-2 italic">
            { item.category
              ? t( "This-identification-was-hidden-for-violating-community-guidelines-or-terms" )
              : t( "This-comment-was-hidden-for-violating-community-guidelines-or-terms" )}
          </Body4>
        </View>
        <Divider />
      </View>
    );
  }

  return (
    <View className="flex-column" testID="ObsDetails.ActivityItem">
      <View className="mx-[15px] pb-[7px]">
        <ActivityHeaderContainer
          item={item}
          refetchRemoteObservation={refetchRemoteObservation}
          idWithdrawn={idWithdrawn}
          isConnected={isConnected}
          geoprivacy={geoprivacy}
          taxonGeoprivacy={taxonGeoprivacy}
          belongsToCurrentUser={belongsToCurrentUser}
          showStatus={showStatus}
        />
        {taxon && (
          <View className="flex-row items-center justify-between mb-4 mt-1">
            <DisplayTaxon
              taxon={taxon}
              handlePress={navToTaxonDetails}
              accessibilityHint={t( "Navigates-to-taxon-details" )}
              withdrawn={idWithdrawn}
            />
            { showAgreeButton && (
              <INatIconButton
                testID={`ActivityItem.AgreeIdButton.${item.taxon.id}`}
                onPress={( ) => openAgreeWithIdSheet( item.taxon )}
                icon="id-agree"
                size={33}
                accessibilityLabel={t( "Agree" )}
              />
            )}
          </View>
        )}
        { !isEmpty( item?.body ) && (
          <View className="flex-row">
            <UserText text={item.body} />
          </View>
        )}
        { disagreement && (
          <DisagreementText
            taxon={item.previous_observation_taxon}
            username={user.login}
            withdrawn={idWithdrawn}
          />
        )}
        {/*
          Only show explainer text if we are on the user's obs, if it is an ID of this user
          and the user has in total less than 10 obs (handled in HOC)
        */}
        { showExplainerText
          && belongsToCurrentUser
          && taxon
          && user?.id === currentUserId
          && (
            <Body4 className="py-2 font-Lato-Italic">
              {t(
                "This-is-your-identification-other-people-may-help-confirm-it",
              )}
            </Body4>
          )}
      </View>
      <Divider />
    </View>
  );
};

export default ActivityItem;
