import { View, StyleSheet } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { Palette } from "../../styles";
import { VOICE } from "../../data/data";
import ListSelection from "../../components/ListSelection/ListSelection";

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

  // Toggle select: only 1 per category (section.title)
  const onPressSelect = (category, item) => {
    if (!setSelected) return;
    const current = selected && typeof selected === "object" ? selected : {};
    // If tapping the same item, deselect; otherwise, set new one for the category
    const next = { ...current };
    if (current[category] === item) next[category] = null;
    else next[category] = item;
    setSelected(next);
  };

  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 }}>
            <ListSelection
              options={VOICE}
              variant="sectioned"
              selected={selected}
              setSelected={setSelected}
              contentContainerStyle={styles.contentContainer}
              itemContainerStyle={styles.itemContainer}
            />
          </View>
        </ItemContainer>
      </View>
    </View>
  );
};

export default CustomizeVoice;

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

    elevation: 5,
  },
  // itemText was used in legacy implementation; kept here for consistency if needed later
});