import { CredentialState } from '@aries-framework/core';
import { useCredentialByState } from '@aries-framework/react-hooks';
import { useNavigation } from '@react-navigation/core';
import { useIsFocused } from '@react-navigation/native';
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { FlatList, View } from 'react-native';
import CredentialCard from '../components/misc/CredentialCard';
import { useConfiguration } from '../contexts/configuration';
import { DispatchAction } from '../contexts/reducers/store';
import { useStore } from '../contexts/store';
import { useTheme } from '../contexts/theme';
import { useTour } from '../contexts/tour/tour-context';
import { Screens } from '../types/navigators';
import { TourID } from '../types/tour';
const ListCredentials = () => {
  const {
    t
  } = useTranslation();
  const {
    credentialListOptions: CredentialListOptions,
    credentialEmptyList: CredentialEmptyList,
    enableTours: enableToursConfig
  } = useConfiguration();
  const credentials = [...useCredentialByState(CredentialState.CredentialReceived), ...useCredentialByState(CredentialState.Done)];
  const navigation = useNavigation();
  const {
    ColorPallet
  } = useTheme();
  const [store, dispatch] = useStore();
  const {
    start,
    stop
  } = useTour();
  const screenIsFocused = useIsFocused();
  useEffect(() => {
    const shouldShowTour = enableToursConfig && store.tours.enableTours && !store.tours.seenCredentialsTour;
    if (shouldShowTour && screenIsFocused) {
      start(TourID.CredentialsTour);
      dispatch({
        type: DispatchAction.UPDATE_SEEN_CREDENTIALS_TOUR,
        payload: [true]
      });
    }
    return stop;
  }, [screenIsFocused]);
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(FlatList, {
    style: {
      backgroundColor: ColorPallet.brand.primaryBackground
    },
    data: credentials.sort((a, b) => new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf()),
    keyExtractor: credential => credential.id,
    renderItem: _ref => {
      let {
        item: credential,
        index
      } = _ref;
      return /*#__PURE__*/React.createElement(View, {
        style: {
          marginHorizontal: 15,
          marginTop: 15,
          marginBottom: index === credentials.length - 1 ? 45 : 0
        }
      }, /*#__PURE__*/React.createElement(CredentialCard, {
        credential: credential,
        onPress: () => navigation.navigate(Screens.CredentialDetails, {
          credential
        })
      }));
    },
    ListEmptyComponent: () => /*#__PURE__*/React.createElement(CredentialEmptyList, {
      message: t('Credentials.EmptyList')
    })
  }), /*#__PURE__*/React.createElement(CredentialListOptions, null));
};
export default ListCredentials;
//# sourceMappingURL=ListCredentials.js.map