import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import {
  responsiveFontSize,
  responsiveHeight,
  responsiveWidth,
} from 'react-native-responsive-dimensions';

import { Connector } from 'pluggy-js/dist/types';
import { InstitutionTabType, InstitutionTabTypes } from '../../types';
import Searchbar from '../Searchbar';
import InstitutionsTabs from './InstitutionsTabs';
import InstitutionItem from '../ImageItem';
import InstitutionsSummary from './InstitutionsSummary';
import SortAndView from './SortAndView';
import { getActiveList, toSummary } from './_utils';

type InstitutionsProps = {
  institutions: Array<Connector>;
  onSelect: (id: string) => void;
};

const Institutions = React.memo((props: InstitutionsProps) => {
  const { institutions, onSelect } = props;
  const [activeTab, setActiveTab] = useState<InstitutionTabTypes>(InstitutionTabType.PERSONAL);
  const [filterText, setFilterText] = useState<string>('');
  const [showSummary, setShowSummary] = useState<Boolean>(true);
  const activeList = getActiveList(institutions, activeTab);

  const showList = filterText
    ? activeList.filter(c => c.name?.toLowerCase().includes(filterText.toLowerCase()))
    : activeList;

  const summary = showList.map(toSummary);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{'Choose an institution'}</Text>
      <InstitutionsTabs activeTab={activeTab} onChangeActiveTab={setActiveTab} />
      <Searchbar onChangeText={setFilterText} text={filterText} placeholder="Search..." />
      <SortAndView onChangeShowSummary={setShowSummary} showSummary={showSummary} />
      {showSummary ? (
        <InstitutionsSummary institutions={summary} onSelect={onSelect} />
      ) : (
        <FlatList
          data={showList}
          keyExtractor={item => `${item.id}`}
          style={{ marginBottom: responsiveHeight(2), marginLeft: responsiveWidth(1) }}
          renderItem={({ item }) => <InstitutionItem onPress={onSelect} item={item} />}
        />
      )}
    </View>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '87%',
    alignSelf: 'center',
  },

  title: {
    alignSelf: 'flex-start',
    marginVertical: responsiveHeight(3),
    fontSize: responsiveFontSize(2.8),
    fontFamily: 'Merriweather-Regular',
  },
});

export default Institutions;