import { useEffect, useState } from "react";

import { StyleSheet, View, Text, ActivityIndicator } from "react-native";

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 } from "@/components/ui/LayoutHelpers";

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

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

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

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

import { MoodSelector } from "@/components/ui/EmojiSelectors";

import {

  Typography,

  Spacing,

  Shadows,

  Colors,

  BorderRadius,

} from "@/constants/theme";

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

import { router } from "expo-router";

import { MoodDefinition, MOODS } from "@/constants/moods";

import { useThemeColor, useMoodEntries } from "@/hooks";

import MoodEntryLog from "@/components/ui/MoodEntryLog";

export default function New() {

  const { user } = useAuth();

  const [mood, setMood] = useState<string>("good");

  const { data, isLoading } = useMoodEntries({ limit: 5 });

  const recentEntries = data?.entries ?? [];

  console.log("entries: ", data, recentEntries);

  const initQuickRegister = () => {

    // TODO: Set down on camelCase vs kebab case

    router.navigate(`/new/entry?initialMood=${mood}`);

  };

  const onNotificationPress = () => {

    router.push('/notifications');

  }

  return (

    <ScreenLayout

      userName={user.firstName}

      userAvatar={user.avatarURL}

      onNotificationPress={onNotificationPress}

      showNotificationBadge={true}

    >

      <Section>

        <SectionHeader

          title="Como você está hoje?"

          subtitle="Sua jornada começa agora"

        ></SectionHeader>

        <Card style={{ minHeight: 200 }}>

          <Col gap={16}>

            <Between style={styles.quickRegisterHeader}>

              <ThemedText style={styles.quickRegisterTitle}>

                Registro rápido

              </ThemedText>

              <ThemedText style={styles.quickRegisterBadge}>HOJE</ThemedText>

            </Between>

            <MoodSelector

              style={{ paddingLeft: 8, paddingRight: 8, paddingTop: 16 }}

              items={MOODS}

              value={mood}

              onSelect={setMood}

            />

            <Button

              title="Salvar Humor"

              onPress={initQuickRegister}

              style={styles.quickRegisterButton}

            />

          </Col>

        </Card>

      </Section>

      {/* TODO: Check whether we gonna have to generate these on demand */}

      <Section>

        <Grid gap={4}>

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

            <View

              style={{

                flex: 1,

                flexDirection: "row",

                flexGrow: 0,

                paddingVertical: 10,

              }}

            >

              <Ionicons name="flash" size={20} color="#64748B" />

              <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>

                Energia

              </Text>

            </View>

            <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>

              Média Alta

            </Text>

            <View style={styles.lineTrack}>

              <View style={[styles.lineFill, { width: `35%` }]} />

            </View>

          </Card>

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

            <View

              style={{

                flex: 1,

                flexDirection: "row",

                flexGrow: 0,

                paddingVertical: 10,

              }}

            >

              <Ionicons name="moon-outline" size={20} color="#64748B" />

              <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>

                Sono

              </Text>

            </View>

            <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>

              7h 30m

            </Text>

            <Text style={styles.indicatorGreen}>+45min que ontem</Text>

          </Card>

        </Grid>

      </Section>

      <Section>

        <SectionHeader title="Registros recentes" />

        {isLoading ? (

          <ActivityIndicator />

        ) : (

          <Col gap={8}>

            {recentEntries.map((entry) => (

              <MoodEntryLog key={entry.id} entry={entry} />

            ))}

          </Col>

        )}

      </Section>

    </ScreenLayout>

  );

}

const styles = StyleSheet.create({

  quickRegisterHeader: {

    marginTop: 16,

    paddingLeft: 16,

    paddingRight: 16,

  },

  quickRegisterTitle: {

    ...Typography.bodyLg,

  },

  // TODO: Replace when we have badges

  quickRegisterBadge: {

    fontSize: 12,

    lineHeight: 16,

  },

  quickRegisterButton: {

    marginLeft: 16,

    marginRight: 16,

    marginBottom: 16,

    ...Shadows.lg,

  },

  lineTrack: {

    height: 6,

    backgroundColor: Colors.light.divider,

    borderRadius: BorderRadius.full,

    marginBottom: 4,

    overflow: "hidden",

  },

  lineFill: {

    height: "100%",

    backgroundColor: Colors.light.tint,

    borderRadius: BorderRadius.full,

  },

  indicatorGreen: {

    color: Colors.light.tint,

    fontSize: 11,

    fontWeight: 600,

    lineHeight: 16.5,

  },

});