import { Pressable, ScrollView, StyleSheet, View } from 'react-native';

import Ionicons from '@expo/vector-icons/Ionicons';
import { useFocusEffect } from 'expo-router';
import { navigate } from 'expo-router/build/global-state/routing';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CategoryItem } from '../../components/categoryItem';
import { ThemedText } from '../../components/ThemedText';
import { ThemedView } from '../../components/ThemedView';
import { Category, CategoryQuery } from '../../models/category';
import { Task, TaskQuery } from '../../models/task';
import { CategoryRepository } from '../../repositories/CategoryRepository';
import { TaskRepository } from '../../repositories/TaskRepository';
import { SQLiteDataService } from '../../services/data/sqliteDataService';

const categoryRepository = new CategoryRepository(new SQLiteDataService<Category>(CategoryQuery));
const taskRepository = new TaskRepository(new SQLiteDataService<Task>(TaskQuery));

export default function CategoryScreen() {
  const { t } = useTranslation();

  const [categories, setCategories] = useState<Category[]>([]);

  const RefreshCategories = async () => {
    try {
      const fetchedCategories = await categoryRepository.findAll();
      setCategories(fetchedCategories);
    } catch (error) {
      console.error("Error refreshing categories:", error);
    }
  }

  //On layout focus to refresh tasks
  useFocusEffect(React.useCallback(() => {
    console.log("focus");
    (async () => {
      await RefreshCategories();
    })();
  }, []));

  return (
    <ThemedView style={styles.mainContainer}>
      <ThemedView style={styles.headerContainer}>
        <ThemedText type="title" style={{
          color: '#fff',
        }}>
          {t('app_name')}
        </ThemedText>
        <Pressable onPress={() => {
          navigate('../categoryForm', {})
        }}>
          <Ionicons name='add-circle-sharp' size={32} color="#fff" />
        </Pressable>
      </ThemedView>
      <ThemedText style={{ padding: 24 }} type="subtitle">
        {t('your_categories')}
      </ThemedText>
      <ScrollView style={styles.scrollView}>
        {categories.map((cat, index) => (
          <CategoryItem categories={categories} key={index} category={cat} onUpdate={() => {
            RefreshCategories();
          }} />
        ))}
        <View style={{ height: 50 }} />
      </ScrollView>
    </ThemedView >
  );
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
  },
  headerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 8,
    paddingHorizontal: 24,
    paddingTop: 50,
    paddingBottom: 18,
    backgroundColor: '#6a254fff',
  },
  scrollView: {
    paddingHorizontal: 24,
    flex: 1,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  reactLogo: {
    height: 178,
    width: 290,
    bottom: 0,
    left: 0,
    position: 'absolute',
  },
  addButton: {
    backgroundColor: '#b91f7eff',
    height: 50,
    color: '#fff',
    borderRadius: 8,
    padding: 10,
    lineHeight: 30,
    alignItems: 'center',
    justifyContent: 'center',
  }
});