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 { useCreateSleepRecord } 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 save = async () => {

    const data = {

      moment,

      comment,

    };

    console.log("Trigger data: ", data)

    //await createSleepRecord.mutateAsync(data)

    router.replace("/")

  };

  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"

                type="text"

                variant="darkGhost"

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

                value={comment}

                minRows={5}

                maxRows={10}

                placeholder="Descreva o que gerou esse sentimento"

                style={styles.notes}

              />

            </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,

  },

})