import {

  View,

  Text,

  StyleSheet,

  KeyboardAvoidingView,

  ScrollView,

} from "react-native";

import { useEffect, useState } from "react";

import { router } from "expo-router";

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

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

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

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

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

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

import { useCreateTrigger } from "@/hooks";

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

import { TriggerCategory } from "@/constants/triggers";

const TRIGGER_CATEGORIES: CategoryOption<TriggerCategory>[] = [

  {

    label: "Trabalho",

    value: "WORK",

    icon: <Ionicons size={16} color="#60A5FA" name="briefcase" />,

  },

  {

    label: "Social",

    value: "SOCIAL",

    icon: <MaterialIcons size={16} color="#AF52DE" name="diversity-1" />,

  },

  {

    label: "Saúde",

    value: "HEALTH",

    icon: <MaterialIcons size={16} color="#34C759" name="healing" />,

  },

  {

    label: "Família",

    value: "FAMILY",

    icon: <MaterialIcons size={16} color="#FF9500" name="family-restroom" />,

  },

  {

    label: "Outros",

    value: "OTHER",

    icon: <Ionicons size={16} color="#8E8E93" name="ellipsis-horizontal" />,

  },

];

export default function NewTrigger() {

  const [moment, setMoment] = useState(new Date());

  const [comment, setComment] = useState("");

  const [category, setCategory] = useState("WORK");

  const createTrigger = useCreateTrigger();

  const save = async () => {

    const data = {

      moment,

      comment,

      category,

    };

    await createTrigger.mutateAsync(data);

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

  };

  return (

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

      <ScrollView scrollEventThrottle={16}>

        <View style={styles.container}>

          <View style={styles.header}>

            <View style={styles.innerHeaderWrapper}>

              <View style={[styles.headerIcon, { backgroundColor: "#FFF7ED" }]}>

                <Ionicons name="flash-outline" size={20} color="#EA580C" />

              </View>

              <View style={styles.headerTitleSubtitle}>

                <Text style={styles.headerTitle}>Aconteceu algo?</Text>

                <Text style={styles.headerSubtitle}>

                  Registre acontecimentos fora do padrão

                </Text>

              </View>

            </View>

            <Text style={styles.description}>

              Identificar gatilhos ajuda a entender melhor seus padrões

              emocionais

            </Text>

          </View>

          <Section>

            <SectionHeader title="Selecionar uma categoria" />

            <CategoryChips

              options={TRIGGER_CATEGORIES}

              active={category}

              onChange={setCategory}

            />

          </Section>

          <Section>

            <SectionHeader title="Adicione detalhes" />

            <Card style={styles.mainCard}>

              <TextArea

                label="Comentários sobre"

                variant="darkGhost"

                onChangeText={(val) => setComment(val)}

                value={comment}

                minRows={5}

                maxRows={10}

                placeholder="Descreva o que gerou esse sentimento"

              />

            </Card>

          </Section>

          <Button title="Salvar Registro" onPress={save} />

        </View>

      </ScrollView>

    </KeyboardAvoidingView>

  );

}

const styles = StyleSheet.create({

  container: {

    gap: 24,

    paddingHorizontal: Spacing.containerPadding,

    paddingVertical: Spacing.sectionGap,

    marginBottom: 50,

  },

  mainCard: {

    padding: Spacing.cardGap,

  },

  // Header

  header: {},

  headerIcon: {

    paddingVertical: 15,

    paddingHorizontal: 14,

    width: 48,

    borderRadius: BorderRadius.md,

  },

  innerHeaderWrapper: {

    flex: 1,

    flexDirection: "row",

    alignItems: "center",

  },

  headerTitleSubtitle: {

    marginLeft: 10,

  },

  headerTitle: {

    ...Typography.headlineMd,

  },

  headerSubtitle: {

    ...Typography.bodyMd,

    color: Colors.light.textSecondary,

  },

  description: {

    ...Typography.bodyMd,

    color: Colors.light.textSecondary,

    marginTop: 20,

  },

  keyboardView: {

    flex: 1,

  },

});