import { ExerciceAPIService } from "@/api/services/exercice/exercice.service.api";
import ActivitiesComponent from "@/components/ActivitiesComponent";
import CalendarComponent from "@/components/CalendarComponent";
import WelcomeComponent from "@/components/WelcomeComponent";
import WorkoutCardComponent from "@/components/WorkoutCardComponent";
import Screen from "@/components/ui/Screen";
import { Workout } from "@/model/Workout";
import React, { useEffect, useState } from "react";
import { ScrollView, Text, View } from "react-native";

const service = new ExerciceAPIService();

export default function HomeScreen() {
  const [exercices, setExercices] = useState<Workout[]>([]);

  const getRandomNumber = (min: number, max: number) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };
  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await service.getExercices();
        setExercices(data);
      } catch (err: any) {}
    };

    fetchData();
  }, []);

  return (
    <ScrollView className="h-full ">
      <Screen>
        <View className="h-1/6 justify-center">
          <WelcomeComponent />
        </View>

        <View className="h-1/6 mt-2">
          <View className="flex-row justify-between items-center mb-4">
            <Text className="text-lg font-bold text-black">
              Fitness Metrics
            </Text>
            <Text className="text-orange-500 font-semibold">See All</Text>
          </View>
          <CalendarComponent />
        </View>

        <View className="h-1/5 mt-8">
          <View className="flex-row justify-between items-center mb-4">
            <Text className="text-lg font-bold text-black">Workout</Text>
            <Text className="text-orange-500 font-semibold">See All</Text>
          </View>
          <WorkoutCardComponent
            exercise={exercices[getRandomNumber(0, 3)]}
            background="bg-black"
          />
        </View>

        <View className="h-1/5 mt-8">
          <View className="flex-row justify-between items-center mb-4 mt-6 ">
            <Text className="text-lg font-bold text-black">Activities</Text>
            <Text className="text-orange-500 font-semibold">See All</Text>
          </View>
          <ActivitiesComponent />
        </View>
      </Screen>
    </ScrollView>
  );
}