import { useState } from 'react';
import { SectionList } from 'react-native';
import { Heading, Text, VStack } from '@gluestack-ui/themed';

import { HistoryCard } from '@components/HistoryCard';
import { ScreenHeader } from '@components/ScreenHeader';

const DATA = [
  {
    title: '22.08.2024',
    data: ['Puxada frontal', 'Puxada lateral'],
  },
  {
    title: '23.08.2024',
    data: ['Puxada frontal'],
  },
];

export function History() {
  const [exercises, setExercises] = useState(DATA);

  return (
    <VStack flex={1}>
      <ScreenHeader title="Histórico" />

      <SectionList
        sections={exercises}
        keyExtractor={(item) => item}
        renderItem={({ item }) => <HistoryCard />}
        renderSectionHeader={({ section }) => (
          <Heading color="$gray200" fontSize="$md" mt="$10" mb="$3">
            {section.title}
          </Heading>
        )}
        style={{ paddingHorizontal: 32 }}
        contentContainerStyle={exercises.length === 0 && { flex: 1, justifyContent: 'center' }}
        ListEmptyComponent={() => (
          <Text color="$gray100" textAlign="center">
            Não há exercícios registrados ainda.{'\n'}Vamos fazer exercícios hoje?
          </Text>
        )}
        showsVerticalScrollIndicator={false}
      />
    </VStack>
  );
}
