import {

  View,

  StyleSheet,

  KeyboardAvoidingView,

  ScrollView,

} from "react-native";

import { Text } from "@/components/ui/Text";

import { useState } from "react";

import { router } from "expo-router";

import { Card } from "@/components/ui/Cards";

import { Input } from "@/components/ui/Input";

import { Button } from "@/components/ui/Button";

import { Section, SectionHeader } from "@/components/ui/Sections";

import { CategoryChips, CategoryOption } from "@/components/ui/CategoryChips";

import { Spacing, Typography, Colors, Shadows } from "@/constants/theme";

import { Ionicons } from "@expo/vector-icons";

import { useCreateCareAction } from "@/hooks";

import { ActivityType } from "@/lib/api";

const ACTIVITY_TYPES: CategoryOption<ActivityType>[] = [

  { label: 'Caminhada', value: 'WALK', icon: <Ionicons name="walk-outline" size={16} color={Colors.light.tint} /> },

  { label: 'Yoga', value: 'YOGA', icon: <Ionicons name="body-outline" size={16} color={Colors.light.tint} /> },

  { label: 'Academia', value: 'GYM', icon: <Ionicons name="barbell-outline" size={16} color={Colors.light.tint} /> },

  { label: 'Meditação', value: 'MEDITATION', icon: <Ionicons name="leaf-outline" size={16} color={Colors.light.tint} /> },

  { label: 'Social', value: 'SOCIAL', icon: <Ionicons name="people-outline" size={16} color={Colors.light.tint} /> },

  { label: 'Criativo', value: 'CREATIVE', icon: <Ionicons name="color-palette-outline" size={16} color={Colors.light.tint} /> },

  { label: 'Outro', value: 'OTHER', icon: <Ionicons name="help-outline" size={16} color={Colors.light.tint} /> },

];

export default function ActivityCareAction() {

  const [activityType, setActivityType] = useState<ActivityType>('WALK');

  const [activityDuration, setActivityDuration] = useState('');

  const createCareAction = useCreateCareAction();

  const handleSave = async () => {

    await createCareAction.mutateAsync({

      type: 'ACTIVITY',

      moment: new Date(),

      activity: {

        type: activityType,

        duration: activityDuration ? Number(activityDuration) : undefined,

      },

    });

    router.replace('/(tabs)/actions');

  };

  return (

    <KeyboardAvoidingView behavior="height" style={styles.keyboardView}>

      <ScrollView scrollEventThrottle={16}>

        <View style={styles.container}>

          <View style={styles.header}>

            <Text style={styles.headerTitle}>Registrar atividade</Text>

            <Text style={styles.headerSubtitle}>

              Qual atividade você realizou?

            </Text>

          </View>

          <Section>

            <SectionHeader title="Tipo de atividade" />

            <CategoryChips

              options={ACTIVITY_TYPES}

              active={activityType}

              onChange={setActivityType}

            />

          </Section>

          <Section>

            <SectionHeader title="Duração (min, opcional)" />

            <Card style={{ padding: Spacing.cardGap }}>

              <Input

                label="Duração em minutos"

                value={activityDuration}

                onChangeText={setActivityDuration}

                placeholder="Ex: 30"

                keyboardType="numeric"

                variant="darkGhost"

              />

            </Card>

          </Section>

          <Button

            title="Salvar"

            onPress={handleSave}

            loading={createCareAction.isPending}

            style={{ ...Shadows.lg }}

          />

        </View>

      </ScrollView>

    </KeyboardAvoidingView>

  );

}

const styles = StyleSheet.create({

  keyboardView: {

    flex: 1,

  },

  container: {

    gap: 24,

    paddingHorizontal: Spacing.containerPadding,

    paddingVertical: Spacing.sectionGap,

    marginBottom: 50,

  },

  header: {

    gap: 8,

  },

  headerTitle: {

    ...Typography.headlineMd,

  },

  headerSubtitle: {

    ...Typography.bodyMd,

    color: Colors.light.textSecondary,

  },

});