import {

  View,

  Text,

  StyleSheet,

  KeyboardAvoidingView,

  ScrollView,

} from "react-native";

import { useState } from "react";

import { router } from "expo-router";

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

import { TextArea } from "@/components/ui/Input";

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

import { Spacing, Typography, Colors, BorderRadius } from "@/constants/theme";

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

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

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

import { useCreateSleepRecord } from "@/hooks";

export default function NewSleepRecord() {

  const [date, setDate] = useState(new Date());

  const [annotations, setAnnotations] = useState("");

  const [average, setAverage] = useState(7.5);

  const createSleepRecord = useCreateSleepRecord();

  const formatValue = (value: number): string => {

    return String(value).replaceAll(".", ",");

  };

  const save = async () => {

    const data = {

      date,

      annotations,

      average,

    };

    console.log("Sleep record:", 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: "#EFF6FF" }]}>

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

              </View>

              <View style={styles.headerTitleSubtitle}>

                <Text style={styles.headerTitle}>Bom descanso</Text>

                <Text style={styles.headerSubtitle}>

                  Registre sua noite de sono

                </Text>

              </View>

            </View>

            <Text style={styles.description}>

              Acompanhar seu sono ajuda a entender como seu corpo se recupera e

              melhora sua performance diária.

            </Text>

          </View>

          <Card style={styles.mainCard}>

            <DatePickerField

              label="Data do Registro"

              initialDate={date}

              maximumDate={new Date()}

              onChange={setDate}

            />

            <View style={{ marginVertical: 15 }}>

              <ScaleSlider

                label="Duração"

                value={average}

                onValueChange={setAverage}

                onValueFormat={formatValue}

                step={0.5}

                min={0.0}

                max={15.0}

                minLabel="0h"

                maxLabel="15h"

              />

            </View>

            <TextArea

              label="Notas sobre a qualidade"

              variant="darkGhost"

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

              value={annotations}

              minRows={5}

              maxRows={10}

              placeholder="Como você se sentiu ao acordar? Teve sonhos marcantes?"

            />

          </Card>

          <Button title="Salvar Registro" onPress={save} />

        </View>

      </ScrollView>

    </KeyboardAvoidingView>

  );

}

const styles = StyleSheet.create({

  container: {

    gap: 24,

    paddingHorizontal: Spacing.containerPadding,

    paddingVertical: Spacing.sectionGap,

  },

  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,

  },

});