import { View, Text, FlatList, StyleSheet, SectionList } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { BlurView } from "expo-blur";
import { VOICE } from "../../data/data";

const CustomizeVoice = () => {
  const [containerLayout, setContainerLayout] = useState(null);
  const [selected, setSelected] = useState(null);

  const onPressSelect = (item) => {
    if (selected === item) {
      setSelected(null);
    } else {
      setSelected(item);
    }
  };

  return (
    <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
      <CreateLyricsHeader
        title="Personnalise la voix que tu veux pour ta chanson"
        subTitle="Choisis maximum 1 option par catégorie."
      />
      <View
        style={{ flex: 1 }}
        onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
      >
        <ItemContainer height={containerLayout?.height}>
          <View style={{ flex: 1, gap: 10 }}>
            <SectionList
              sections={VOICE}
              showsVerticalScrollIndicator={false}
              contentContainerStyle={styles.contentContainer}
              renderItem={({ item }) => {
                const selectedItem = selected === item;

                return (
                  <CreateLyricsHeader
                    onPress={() => onPressSelect(item)}
                    tint={selectedItem ? "default" : "dark"}
                    colors={
                      selectedItem
                        ? ["#FFFFFF00", "#FFFFFF"]
                        : [Palette.tran, Palette.tran]
                    }
                    containerStyle={{
                      ...styles.itemContainer,
                    }}
                  >
                    <View
                      style={{
                        paddingVertical: 6,
                      }}
                    >
                      <Text style={styles.itemText}>{item}</Text>
                    </View>
                  </CreateLyricsHeader>
                );
              }}
              renderSectionHeader={({ section: { title } }) => (
                <Text
                  style={{
                    fontSize: 16,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterBold,
                    left: 10,
                  }}
                >
                  {title}
                </Text>
              )}
            />
          </View>
        </ItemContainer>
      </View>
    </View>
  );
};

export default CustomizeVoice;

const styles = StyleSheet.create({
  contentContainer: {
    flexGrow: 1,
    padding: 8,
    gap: 10,
    backgroundColor: "#FFFFFF00",
    paddingBottom: 50,
  },
  itemContainer: {
    backgroundColor: Palette.glass,
    borderRadius: 14,
    overflow: "hidden",
    shadowColor: "#00000040",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,

    elevation: 5,
  },
  itemText: {
    fontSize: 16,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
});