import { useEffect, useState } from 'react';

import { 

  StyleSheet

} 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 { Button } from '@/components/ui/Button';

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

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

import { Typography, Spacing, Shadows } from '@/constants/theme';

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

export default function New() {

  const { user } = useAuth();

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

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

  const moodOptions = [

    { id: 'sad', icon: '😢', label: 'Triste' },

    { id: 'neutral', icon: '😐', label: 'Neutro' },

    { id: 'good', icon: '😊', label: 'Bem' },

    { id: 'great', icon: '🤩', label: 'Ótimo' },

    { id: 'angry', icon: '😠', label: 'Irritado' },

  ];

  const initQuickRegister = () => {

    console.log("Register: ", mood);

  };

  return (

    <ScreenLayout userName={user.firstName}

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

      showNotificationBadge={true}>

      <ThemedView>

        <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={moodOptions}

                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>

      </ThemedView>

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

  }

});