import { View, Dimensions } from "react-native";
import React, { useRef, useState } from "react";
import Page from "../../layouts/Page";
import MusicLandHeader from "../../components/MusicLandHeader";
import GradientButton from "../../components/GradientButton";
import { gutters } from "../../styles";
import { SwiperFlatList } from "react-native-swiper-flatlist";
import Goals from "./Goals";
import { goBack } from "../../navigation/NavigationService";
import SpecificityContext from "./SpecificityContext";
import EmotionConvey from "./EmotionConvey";
import SongStyle from "./SongStyle";
import SongTo from "./SongTo";
import SongStructure from "./SongStructure";
import CustomizeSongStructure from "./CustomizeSongStructure";
import Rhymes from "./Rhymes";
import CreatingLyrics from "./CreatingLyrics";
import { responsiveHeight } from "react-native-responsive-dimensions";

const { width } = Dimensions.get("window");

const CreateLyricsWithAi = () => {
  const scrollRef = useRef(null);
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [progress, setProgress] = useState(16);
  const [parentLayout, setparentLayout] = useState(null);

  const onPressNext = () => {
    setSelectedIndex(selectedIndex + 1);
    setProgress(progress + 9);
    scrollRef.current.scrollToIndex({
      index: selectedIndex + 1,
      animated: true,
    });
  };

  const onPressBack = () => {
    if (selectedIndex > 0) {
      setSelectedIndex(selectedIndex - 1);
      setProgress(progress - 9);
      scrollRef.current.scrollToIndex({
        index: selectedIndex - 1,
        animated: true,
      });
    } else {
      goBack();
    }
  };

  return (
    <Page headerType="NONE">
      <MusicLandHeader
        onPressBack={onPressBack}
        progress={progress}
        showSkip={selectedIndex === 4}
      />
      <View
        style={{
          flex: 1,
          paddingBottom: gutters,
          gap: responsiveHeight(5),
        }}
      >
        <View
          style={{ flex: 1 }}
          onLayout={(e) => setparentLayout(e.nativeEvent.layout)}
        >
          <SwiperFlatList
            style={{ width, left: -gutters }}
            ref={scrollRef}
            disableGesture
          >
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <Goals />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <SpecificityContext />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <EmotionConvey />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <SongStyle />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <SongTo />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <SongStructure />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <CustomizeSongStructure />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <Rhymes />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <CreatingLyrics active={selectedIndex === 8} />
            </View>
          </SwiperFlatList>
        </View>
        {selectedIndex !== 8 && (
          <GradientButton title="Suivant" onPress={onPressNext} />
        )}
      </View>
    </Page>
  );
};

export default CreateLyricsWithAi;
