import { useFocusEffect, useNavigation } from '@react-navigation/native';
import React, { ReactElement, useCallback } from 'react';
import { ScrollView, View } from 'react-native';
import { compose } from 'redux';
import { Patient } from '~/models/Patient';
import { withPatient } from '~/ui/containers/Patient';
import { useRecentlyViewedPatients } from '~/ui/hooks/localConfig';
import { PatientCard } from '/components/PatientCard';
import { Routes } from '/helpers/routes';
import { Orientation, screenPercentageToDP } from '/helpers/screen';
import { StyledText, StyledView } from '/styled/common';
import { theme } from '/styled/theme';
import { PatientFromRoute } from '~/ui/helpers/constants';
import { TranslatedText } from '/components/Translations/TranslatedText';

const PatientCardContainer = compose<React.FC<{ displayedPatient: Patient }>>(withPatient)(
  ({ displayedPatient, setSelectedPatient }: any): ReactElement => {
    const navigation = useNavigation();

    return (
      <StyledView marginRight={10}>
        <PatientCard
          onPress={(): void => {
            setSelectedPatient(displayedPatient);
            navigation.navigate(Routes.HomeStack.SearchPatientStack.Index, {
              screen: Routes.HomeStack.SearchPatientStack.Index,
              from: PatientFromRoute.HOME,
            });
          }}
          patient={displayedPatient}
        />
      </StyledView>
    );
  },
);

const NoPatientsCard = (): ReactElement => <StyledText>No recent patients</StyledText>;

export const RecentlyViewedPatientTiles = (): ReactElement | null => {
  const [recentlyViewedPatients, , , refetchRecentlyViewedPatients] = useRecentlyViewedPatients();

  // The home screen stays mounted, so refetch on focus to reflect patients
  // viewed since the last visit (the mount-time fetch would otherwise be stale).
  useFocusEffect(
    useCallback(() => {
      refetchRecentlyViewedPatients();
    }, [refetchRecentlyViewedPatients]),
  );

  if (!recentlyViewedPatients)
    return <StyledView flex={1} background={theme.colors.BACKGROUND_GREY} />;

  const recentPatients =
    recentlyViewedPatients.length > 0 ? (
      recentlyViewedPatients.map(patient => (
        <PatientCardContainer key={patient.id} displayedPatient={patient} />
      ))
    ) : (
      <NoPatientsCard />
    );

  return (
    <StyledView
      flex={1}
      background={theme.colors.BACKGROUND_GREY}
      paddingLeft={screenPercentageToDP(4.86, Orientation.Width)}
    >
      <StyledText
        fontSize={screenPercentageToDP(1.45, Orientation.Height)}
        color={theme.colors.TEXT_DARK}
        marginBottom={screenPercentageToDP(1.21, Orientation.Height)}
      >
        <TranslatedText
          stringId="patient.recentlyViewed.title"
          fallback="RECENTLY VIEWED PATIENTS"
          casing="upper"
        />
      </StyledText>
      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
        <View style={{ flexDirection: 'row' }}>{recentPatients}</View>
      </ScrollView>
    </StyledView>
  );
};
