import { View, StyleSheet, Text } from "react-native";
import { LIGHT_THEME } from "../../common/const/theme";
import { ScrollView } from "react-native-gesture-handler";
import { useState } from "react";
import {
  MultipleOptionPicker,
} from "../components/multiple_option_pickeer";
import { DateTextInput } from "../../common/components/form/date_text_input";
import { TouchableOpacity } from "@gorhom/bottom-sheet";
import { SlideControl } from "../../common/components/slide_control";
import { InterestSlide } from "../components/interest_slide";
import { BirthdateSlide } from "../components/birthdate_slide";
import { useSetUpProfile } from "../hooks/useSetUpProfile";
import { useSlideControl } from "../hooks/useSlideControl";
import { router } from "expo-router";

export const FirstTimeComfigScreen = () => {
  const { onSubmit, toogleInterest, interests } = useSetUpProfile();
  const onFinishCallback = () => {
    onSubmit();
  };
  const { onFinish, onNext, onPrevious, currentSlide } = useSlideControl(onFinishCallback);
  const slides = [
    <InterestSlide options={interests} onToogleOption={toogleInterest} />,
  ];

  return (
    <View style={styles.mainContainer}>
      {slides[currentSlide]}
      <SlideControl onFinish={onFinish} onNext={onNext} onPrevious={onPrevious} isFirst={currentSlide==0} isLast={currentSlide==slides.length - 1}/>
    </View>
  );
};


const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    alignItems: "center",
    padding: 20,
  },
  container: {
    flex: 1,
  },
  controlsContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
});
