update

src/screens/Studio/ComposeSong.js

@@ -1,10 +1,127 @@
-import { View, Text } from "react-native";
-import React from "react";
+import { View, Text, Image, StyleSheet, Dimensions } from "react-native";
+import React, { useRef, useState } from "react";
 import Page from "../../layouts/Page";
-import { background } from "../../assets";
+import { ai, background } from "../../assets";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import GradientButton from "../../components/GradientButton";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+import { gutters } from "../../styles";
+import SwiperFlatList from "react-native-swiper-flatlist";
+import ChooseGenre from "./ChooseGenre";
+import CustomizeVoice from "./CustomizeVoice";
+import ChooseInstruments from "./ChooseInstruments";
+import ChooseRhythm from "./ChooseRhythm";
+import CreatingSong from "./CreatingSong";
+
+const { width } = Dimensions.get("window");
 
 const ComposeSong = () => {
-  return <Page backgroundImg={background.studioBG2}></Page>;
+  const scrollRef = useRef(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [progress, setProgress] = useState(14.2);
+  const [containerLayout, setContainerLayout] = useState(null);
+  console.log("progress: ", progress);
+
+  const onPressNext = () => {
+    setSelectedIndex(selectedIndex + 1);
+    setProgress(progress + 7.1);
+    scrollRef.current.scrollToIndex({
+      index: selectedIndex + 1,
+      animated: true,
+    });
+  };
+
+  const onPressBack = () => {
+    if (selectedIndex > 0) {
+      setSelectedIndex(selectedIndex - 1);
+      setProgress(progress - 7.1);
+      scrollRef.current.scrollToIndex({
+        index: selectedIndex - 1,
+        animated: true,
+      });
+    } else {
+      goBack();
+    }
+  };
+
+  return (
+    <Page backgroundImg={background.studioBG2} headerType="NONE">
+      <Image source={ai.theo} style={styles.img} resizeMode="contain" />
+      <MusicLandHeader onPressBack={onPressBack} progress={progress} />
+      <View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
+        <View
+          style={{ flex: 1 }}
+          onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
+        >
+          <SwiperFlatList
+            style={{ width, left: -gutters }}
+            ref={scrollRef}
+            disableGesture
+          >
+            <View
+              style={{
+                width: width,
+                height: containerLayout?.height,
+                paddingHorizontal: gutters,
+              }}
+            >
+              <ChooseGenre />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: containerLayout?.height,
+                paddingHorizontal: gutters,
+              }}
+            >
+              <CustomizeVoice />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: containerLayout?.height,
+                paddingHorizontal: gutters,
+              }}
+            >
+              <ChooseInstruments />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: containerLayout?.height,
+                paddingHorizontal: gutters,
+              }}
+            >
+              <ChooseRhythm />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: containerLayout?.height,
+                paddingHorizontal: gutters,
+              }}
+            >
+              <CreatingSong active={selectedIndex === 4} />
+            </View>
+          </SwiperFlatList>
+        </View>
+        {selectedIndex !== 4 && (
+          <GradientButton title="Suivant" onPress={onPressNext} />
+        )}
+      </View>
+    </Page>
+  );
 };
 
 export default ComposeSong;
+
+const styles = StyleSheet.create({
+  img: {
+    width: "100%",
+    height: "70%",
+    position: "absolute",
+    bottom: -40,
+    right: -30,
+  },
+});