import React, { ReactElement } from 'react';
import { FlatList, TouchableOpacity, View } from 'react-native';
import { useNavigation, useIsFocused } from '@react-navigation/native';
import styled from 'styled-components/native';
import { subject } from '@casl/ability';

import { theme } from '~/ui/styled/theme';
import { Routes } from '~/ui/helpers/routes';
import { useBackendEffect } from '~/ui/hooks/index';
import { LoadingScreen } from '~/ui/components/LoadingScreen';
import { ErrorScreen } from '~/ui/components/ErrorScreen';
import { useAuth } from '~/ui/contexts/AuthContext';
import { Separator } from '~/ui/components/Separator/index';
import { TranslatedText } from '~/ui/components/Translations/TranslatedText';
import { TranslatedReferenceData } from '~/ui/components/Translations/TranslatedReferenceData';

const StyledFlatList = styled(FlatList)`
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: white;
  padding: 10px;
`;

const Row = styled.View`
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 38px;
`;

const NoRegistriesRow = styled(Row)`
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  background-color: white;
`;

const StatusDot = styled.View<{ $registrationStatus: string }>`
  border-radius: 100px;
  height: 7px;
  width: 7px;
  background-color: ${(props) =>
    props.$registrationStatus === 'active' ? theme.colors.SAFE : theme.colors.DISABLED_GREY};
`;

const RowTextContainer = styled.View`
  flex-direction: row;
  justify-content: space-between;
`;

const RowText = styled.Text`
  flex: 1;
  font-size: 14px;
`;

const LeftRowText = styled(RowText)`
  max-width: 60%;
  text-align: left;
`;

const RightRowText = styled(RowText)`
  max-width: 30%;
  text-align: right;
`;

export const PatientProgramRegistrationList = ({ selectedPatient }): ReactElement => {
  const navigation = useNavigation();
  const isFocused = useIsFocused();
  const { ability } = useAuth();
  const canReadRegistrations = ability.can('read', 'PatientProgramRegistration');
  const [registrations, registrationError, isRegistrationLoading] = useBackendEffect(
    async ({ models }) =>
      await models.PatientProgramRegistration.getMostRecentRegistrationsForPatient(
        selectedPatient.id,
      ),
    [isFocused, selectedPatient.id],
  );
  if (isRegistrationLoading) return <LoadingScreen />;

  if (registrationError) return <ErrorScreen error={registrationError} />;

  const accessibleRegistries = registrations.filter((registration) =>
    ability.can('read', subject('ProgramRegistry', { id: registration.programRegistryId })),
  );
  if (accessibleRegistries.length === 0) {
    return (
      <NoRegistriesRow>
        <RowText>
          <TranslatedText
            stringId="patientprogramRegistry.list.noData"
            fallback="No program registries to display"
          />
        </RowText>
      </NoRegistriesRow>
    );
  }

  const onNavigateToPatientProgramRegistrationDetails = (item: any) => {
    navigation.navigate(Routes.HomeStack.PatientProgramRegistrationDetailsStack.Index, {
      patientProgramRegistrationId: item.id,
    });
  };

  const ItemWrapper = canReadRegistrations ? TouchableOpacity : View;
  return (
    <StyledFlatList
      ItemSeparatorComponent={Separator}
      data={accessibleRegistries}
      renderItem={({ item }) => (
        <ItemWrapper onPress={() => onNavigateToPatientProgramRegistrationDetails(item)}>
          <Row>
            <StatusDot $registrationStatus={item.registrationStatus} />
            <RowTextContainer>
              <LeftRowText numberOfLines={1}>
                <TranslatedReferenceData
                  fallback={item.programRegistry.name}
                  value={item.programRegistry.id}
                  category="programRegistry"
                />
              </LeftRowText>
              <RightRowText numberOfLines={1}>
                <TranslatedReferenceData
                  fallback={item.clinicalStatus?.name}
                  value={item.clinicalStatus?.id}
                  category="programRegistryClinicalStatus"
                />
              </RightRowText>
            </RowTextContainer>
          </Row>
        </ItemWrapper>
      )}
    ></StyledFlatList>
  );
};
