From 5fd72ba2c0ecc0f4a84da57909384d0eddc72157 Mon Sep 17 00:00:00 2001
From: Philip Cesar Garay <philipgaray2@gmail.com>
Date: Mon, 18 Aug 2025 15:34:56 +0800
Subject: [PATCH] update

---
 src/components/AppCheckbox.js         |  48 ++++++++
 src/components/modal/PlaylistModal.js | 163 ++++++++++++++++++++++++++
 src/screens/Library/MusicDetails.js   |   2 +-
 src/screens/Profile/Language.js       |  40 +------
 src/utils/Sheet.js                    |   2 +
 5 files changed, 219 insertions(+), 36 deletions(-)
 create mode 100644 src/components/AppCheckbox.js
 create mode 100644 src/components/modal/PlaylistModal.js

diff --git a/src/components/AppCheckbox.js b/src/components/AppCheckbox.js
new file mode 100644
index 0000000..856aadd
--- /dev/null
+++ b/src/components/AppCheckbox.js
@@ -0,0 +1,48 @@
+import { View, Text, Pressable } from "react-native";
+import React from "react";
+import { Palette, Style } from "../styles";
+import { size } from "../styles/Style";
+import { FONT_FAMILY } from "../styles/Fonts";
+
+const AppCheckbox = ({ onPress, selected, label }) => {
+  return (
+    <Pressable
+      style={{
+        ...Style.containerRow,
+        gap: 6,
+      }}
+      onPress={onPress}
+    >
+      <View
+        style={{
+          ...size({ size: 17 }),
+          ...Style.containerCenter,
+          borderWidth: 1,
+          borderRadius: 100,
+          borderColor: Palette.white,
+        }}
+      >
+        {selected && (
+          <View
+            style={{
+              ...size({ size: 9 }),
+              borderRadius: 100,
+              backgroundColor: Palette.white,
+            }}
+          />
+        )}
+      </View>
+      <Text
+        style={{
+          fontSize: 16,
+          color: Palette.white,
+          fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+        }}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+};
+
+export default AppCheckbox;
diff --git a/src/components/modal/PlaylistModal.js b/src/components/modal/PlaylistModal.js
new file mode 100644
index 0000000..b3f18e5
--- /dev/null
+++ b/src/components/modal/PlaylistModal.js
@@ -0,0 +1,163 @@
+import {
+  View,
+  Text,
+  FlatList,
+  Pressable,
+  Image,
+  Dimensions,
+  TextInput,
+} from "react-native";
+import React, { useRef, useState } from "react";
+import AppActionSheet from "../AppActionSheet";
+import AppCheckbox from "../AppCheckbox";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { icons } from "../../assets";
+import Style, { size } from "../../styles/Style";
+import SwiperFlatList from "react-native-swiper-flatlist";
+import GradientButton from "../GradientButton";
+import { SheetManager } from "react-native-actions-sheet";
+
+const PLAYLIST = ["Ménage", "Voiture", "Roadtrip"];
+
+const { width } = Dimensions.get("window");
+
+const PlaylistModal = () => {
+  const scrollRef = useRef(null);
+  const [selected, setSelected] = useState("");
+  const [playlist, setPlaylist] = useState("");
+
+  return (
+    <AppActionSheet id="Playlist">
+      <SwiperFlatList
+        style={{ width, left: -14 }}
+        ref={scrollRef}
+        disableGesture
+      >
+        <View style={{ width, paddingHorizontal: 14 }}>
+          <View style={{ gap: 20 }}>
+            <Text
+              style={{
+                fontSize: 22,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterSemiBold,
+                textAlign: "center",
+              }}
+            >
+              Ajouter ce titre à une playlist
+            </Text>
+            <FlatList
+              data={PLAYLIST}
+              contentContainerStyle={{ gap: 20 }}
+              ListHeaderComponent={
+                <Pressable
+                  style={{
+                    ...Style.containerRow,
+                    gap: 10,
+                  }}
+                  onPress={() =>
+                    scrollRef.current.scrollToIndex({
+                      index: 1,
+                      animated: true,
+                    })
+                  }
+                >
+                  <Image source={icons.add} style={size({ size: 15 })} />
+                  <Text
+                    style={{
+                      fontSize: 16,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+                    }}
+                  >
+                    Créer une nouvelle playlist
+                  </Text>
+                </Pressable>
+              }
+              renderItem={({ item }) => (
+                <AppCheckbox
+                  label={item}
+                  onPress={() => setSelected(item)}
+                  selected={selected === item}
+                />
+              )}
+            />
+            <GradientButton
+              title="Valider"
+              containerStyle={{
+                width: "80%",
+                alignSelf: "center",
+              }}
+              onPress={() => SheetManager.hide("Playlist")}
+            />
+          </View>
+        </View>
+        <View style={{ width, paddingHorizontal: 14 }}>
+          <View style={{ gap: 20 }}>
+            <Pressable
+              onPress={() => {
+                scrollRef.current.scrollToIndex({
+                  index: 0,
+                  animated: true,
+                });
+                setPlaylist("");
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 12,
+                  color: Palette.gray,
+                  fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+                }}
+              >
+                Annuler
+              </Text>
+            </Pressable>
+            <View style={{ ...Style.containerCenter, gap: 14 }}>
+              <Text
+                style={{
+                  fontSize: 20,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+                }}
+              >
+                Nommer la playlist
+              </Text>
+              <TextInput
+                style={{
+                  paddingVertical: 6,
+                  borderBottomWidth: 1,
+                  borderColor: Palette.white,
+                  fontSize: 20,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+                  minWidth: "30%",
+                  maxWidth: "80%",
+                }}
+                value={playlist}
+                onChangeText={setPlaylist}
+                textAlign="center"
+              />
+            </View>
+            <GradientButton
+              title="Créer la playlist"
+              containerStyle={{
+                width: "80%",
+                alignSelf: "center",
+              }}
+              onPress={() => {
+                scrollRef.current.scrollToIndex({
+                  index: 0,
+                  animated: true,
+                });
+                setPlaylist("");
+              }}
+            />
+          </View>
+        </View>
+      </SwiperFlatList>
+    </AppActionSheet>
+  );
+};
+
+export default PlaylistModal;
diff --git a/src/screens/Library/MusicDetails.js b/src/screens/Library/MusicDetails.js
index 90ca6cf..05bbbb3 100644
--- a/src/screens/Library/MusicDetails.js
+++ b/src/screens/Library/MusicDetails.js
@@ -62,7 +62,7 @@ const MusicDetails = () => {
                   resizeMode="contain"
                 />
               </Pressable>
-              <Pressable>
+              <Pressable onPress={() => SheetManager.show("Playlist")}>
                 <Image
                   source={icons.check}
                   style={{ ...size({ size: 24 }) }}
diff --git a/src/screens/Profile/Language.js b/src/screens/Profile/Language.js
index 7c8111a..6082261 100644
--- a/src/screens/Profile/Language.js
+++ b/src/screens/Profile/Language.js
@@ -7,6 +7,7 @@ import { responsiveHeight } from "react-native-responsive-dimensions";
 import { BlurView } from "expo-blur";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import Style, { size } from "../../styles/Style";
+import AppCheckbox from "../../components/AppCheckbox";
 
 const LANGUAGE = ["Anglais", "Français", "Chinois", "Japonais", "Coreen"];
 
@@ -48,43 +49,12 @@ const Language = () => {
           </Text>
           <View style={{ gap: 12 }}>
             {LANGUAGE.map((item, index) => (
-              <Pressable
+              <AppCheckbox
                 key={index}
-                style={{
-                  ...Style.containerRow,
-                  gap: 6,
-                }}
+                label={item}
                 onPress={() => setSelected(item)}
-              >
-                <View
-                  style={{
-                    ...size({ size: 17 }),
-                    ...Style.containerCenter,
-                    borderWidth: 1,
-                    borderRadius: 100,
-                    borderColor: Palette.white,
-                  }}
-                >
-                  {selected === item && (
-                    <View
-                      style={{
-                        ...size({ size: 9 }),
-                        borderRadius: 100,
-                        backgroundColor: Palette.white,
-                      }}
-                    />
-                  )}
-                </View>
-                <Text
-                  style={{
-                    fontSize: 16,
-                    color: Palette.white,
-                    fontFamily: FONT_FAMILY.HelveticaNeueRegular,
-                  }}
-                >
-                  {item}
-                </Text>
-              </Pressable>
+                selected={selected === item}
+              />
             ))}
           </View>
         </BlurView>
diff --git a/src/utils/Sheet.js b/src/utils/Sheet.js
index 3eb8c30..1ac8bf8 100644
--- a/src/utils/Sheet.js
+++ b/src/utils/Sheet.js
@@ -4,11 +4,13 @@ import ProfileSettingsModal from "../components/modal/ProfileSettingsModal";
 import DeleteAccountModal from "../components/modal/DeleteAccountModal";
 import DeletePlaybackModal from "../components/modal/DeletePlaybackModal";
 import DeleteAudioModal from "../components/modal/DeleteAudioModal";
+import PlaylistModal from "../components/modal/PlaylistModal";
 
 registerSheet("Delete", DeleteModal);
 registerSheet("ProfileSettings", ProfileSettingsModal);
 registerSheet("DeleteAccount", DeleteAccountModal);
 registerSheet("DeletePlayback", DeletePlaybackModal);
 registerSheet("DeleteAudio", DeleteAudioModal);
+registerSheet("Playlist", PlaylistModal);
 
 export {};