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;
