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 { useUpdateInterests } from "../hooks/useUpdateInterests";
import { ApiRequestStatus } from "../../common/const/api_request_states";
import { InterestSlide } from "../components/interest_slide";
import { SlideControl } from "../../common/components/slide_control";

export const ChangeInterestsScreen = () => {
  const { toogleInterest: onToogleOption, interests: options, requestStatus, onSubmit } = useUpdateInterests();

  if (requestStatus === ApiRequestStatus.LOADING) {
    return <Text>Loading...</Text>;
  }

  if (requestStatus === ApiRequestStatus.ERROR) {
    return <Text>Error</Text>;
  }

  const onFinish = () => {
    onSubmit();
  }

  return (
    <View style={styles.container}>
      <InterestSlide options={options} onToogleOption={onToogleOption} />
      <SlideControl onFinish={onFinish} onNext={() => {}} onPrevious={() => {}} isFirst isLast  />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    padding: 20,
    backgroundColor: LIGHT_THEME.color.background,
  },
});
