import React, { useEffect, useState } from 'react';
import { FlatList, View, Text } from 'react-native';

import HorizontalSelect from '../Components/HorizontalSelect';

import { Header, PageWrapper } from '../../../../components';
import { getMastersByType, Master, TypeData } from '../../../../database/unMastersService';

const UNMastersScreen = () => {
  const [selectedType, setSelectedType] = useState<TypeData | null>(null);
  const [masters, setMasters] = useState<Master[] | null>([]);

  useEffect(() => {
    const data = getMastersByType(selectedType?.type || 1);

    setMasters(data);
  }, [selectedType]);

  return (
    <PageWrapper>
      <Header label={'UN Masters'} />
      <HorizontalSelect selectedType={(type) => setSelectedType(type)} />
      <FlatList
        maxToRenderPerBatch={20}
        data={masters}
        renderItem={({ item }) => (
          <View style={{ borderStyle: 'solid', borderWidth: 1, borderColor: 'red' }}>
            <Text>{item.age}</Text>
          </View>
        )}
      />
    </PageWrapper>
  );
};

export default UNMastersScreen;