import { useEffect, useState } from 'react';

import {

  StyleSheet,

  View,

  Text

} 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 } from '@/constants/theme';

import { useThemeColor } from '@/hooks/use-theme-color';

import { router } from 'expo-router';

import {

  MoodDefinition, MOODS

} from '@/constants/moods'

const MoodEntryLog = ({ mood: MoodDefinition, moment: Date }) => {

  const styles = StyleSheet.create({

    card: {

      flexDirection: "row",

      alignItems: "center",

      gap: 14,

      overflow: "hidden",

      padding: Spacing.cardGap

    },

    moodIcon: {

      width: 48,

      height: 48,

      alignItems: "center",

      justifyContent: "center",

      flexShrink: 0,

    },

    moodIconEmoji: {

      fontSize: 26,

    },

    // Text

    moodBlock: {

      flex: 1,

      minWidth: 0,

    },

    title: {

      fontSize: 15,

      fontWeight: "700",

      color: Colors.light.text,

      letterSpacing: -0.2,

      marginBottom: 3,

    },

    subtitle: {

      fontSize: 12.5,

      fontWeight: "500",

      color: Colors.light.textSecondary,

      letterSpacing: 0.1,

    },

  });

  return (

    <Card style={styles.card}>

      <View style={styles.moodIcon}>

        <Text style={styles.moodIconEmoji}>😀</Text>

      </View>

      <View style={styles.moodBlock}>

        <Text style={styles.title} numberOfLines={1}>

          Neutro

        </Text>

        <ThemedText style={styles.subtitle} numberOfLines={1}>

          Ontem às 10h

        </ThemedText>

      </View>

      <Badge label="Manhã" />

    </Card>

  );

}

export default function New() {

  const { user } = useAuth();

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

  const [isLoading, setIsLoading] = useState<boolean>(false);

  const initQuickRegister = () => {

    // TODO: Set down on camelCase vs kebab case

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

  };

  return (

    <ScreenLayout userName={user.firstName} userAvatar={user.avatarURL}

      onNotificationPress={() => console.log('Notifications')}

      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}

                loading={isLoading}

                style={styles.quickRegisterButton}

              />

            </Col>

          </Card>

        </Section>

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

        <Section>

          <Grid gap={4}>

            <Card style={{minHeight: 150, backgroundColor: 'powderblue'}}>

            </Card>

            <Card style={{minHeight: 150, backgroundColor: 'tomato'}}>

            </Card>

          </Grid>

        </Section>

        <Section>

          <SectionHeader title="Registros recentes" />

          <MoodEntryLog

            mood="sad"

            moment={new Date()}

          />

          <MoodEntryLog

            mood="good"

            moment={new Date()}

          />

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

  }

});