import { useState, useEffect } from 'react';
import {
  Link, router, useLocalSearchParams
} from 'expo-router';

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

import { SafeAreaView } from 'react-native-safe-area-context';
import { ThemedText } from '@/components/misc/themed-text';
import { ThemedView } from '@/components/misc/themed-view';
import { ScreenLayout } from '@/components/ui/ScreenLayout';
import { useAuth } from '@/context/AuthContext';
import { Grid, Col, Row, Between, Center } from '@/components/ui/LayoutHelpers';
import { Card } from '@/components/ui/Cards';
import { Button } from '@/components/ui/Button';
import { Input, TextArea } from '@/components/ui/Input';
import { Section, SectionHeader } from '@/components/ui/Sections';
import { Spacing, Typography, Colors } from '@/constants/theme';
import { ScaleSlider } from '@/components/ui/ScaleSlider';
import { Ionicons } from '@expo/vector-icons';
import { useThemeColor } from '@/hooks/use-theme-color';

export default function NewMoodEntry() {
  const { user } = useAuth();
  const tintColor = useThemeColor({}, 'tint');

  // TODO: transform this into a specific mood component
  const { initialMood } = useLocalSearchParams();
  const [stress, setStress] = useState(0);
  const [anxiety, setAnxiety] = useState(0);
  const [energy, setEnergy] = useState(0);

  const editComponents = () => {
    console.log("Wants to open the components");
  }

  return (
    <View>
      <ScrollView
        scrollEventThrottle={16}>
        <View style={styles.container}>
          <Center>
            <ThemedText style={styles.statusPrefix}>
              Como você está se sentindo agora?
            </ThemedText>

            <ThemedText style={styles.statusText}>
              Muito Bem
            </ThemedText>
          </Center>

          <Card style={styles.resumeCard}>
            <Col gap={24}>
              <ScaleSlider
                variant="rich"
                label="Energia"
                value={energy}
                onValueChange={setEnergy}
                icon={<Ionicons name="flower-outline" size={20} color={tintColor} />}
                minLabel="Baixa"
                maxLabel="Alta"
              />

              <ScaleSlider
                variant="rich"
                label="Ansiedade"
                value={anxiety}
                onValueChange={setAnxiety}
                icon={<Ionicons name="sad-outline" size={20} color="#FB923C" />}
                minLabel="Calmo"
                maxLabel="Ansioso"
              />

              <ScaleSlider
                variant="rich"
                label="Estresse"
                value={stress}
                onValueChange={setStress}
                icon={<Ionicons name="flame" size={20} color="#f87171" />}
                minLabel="Relaxado"
                maxLabel="Estressado"
              />
            </Col>
          </Card>

          <Card style={styles.annotationsCard}>
            <TextArea
              label="Notas sobre o dia"
              type="text"
              variant="darkGhost"
              onChangeText={(val) => console.log(val)}
              minRows={4}
              maxRows={6}
              placeholder="Escreva uma nota rápida sobre o seu dia até o momento..."
            />
          </Card>

          <Section>
            <SectionHeader title="Componentes do Humor" info="Editar" />
            <Grid gap={4}>
              <Card style={{height: 38}} />
              <Card style={{height: 38}} />
            </Grid>

            <Button title="Adicionar Componentes"
                    onPress={editComponents}
                    textStyle={{ fontWeight: 500 }}
                    variant="dashed"
                    />
          </Section>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    gap: 24,
    paddingHorizontal: Spacing.containerPadding,
    paddingVertical: Spacing.sectionGap,
  },
  statusText: {
    ...Typography.headlineXg,
  },
  statusPrefix: {
    ...Typography.bodyMd
  },
  annotationsCard: {
    padding: Spacing.cardGap
  },
  resumeCard: {
    padding: Spacing.cardGap,
  }
});