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

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

  // Selection handled by ListSelection

  return (
    <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
      <CreateLyricsHeader
        title="Choisis un genre"
        subTitle="Tu peux choisir jusqu’à 2 genres différents"
      />
      <View
        style={{ flex: 1 }}
        onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
      >
        <ItemContainer height={containerLayout?.height}>
          <ListSelection
            options={CHOOSE_GENRE}
            variant="titleDescription"
            selected={selected}
            setSelected={setSelected}
            multiple
            maxSelection={2}
            getItemValue={(item) => item?.title}
            contentContainerStyle={{
              gap: 16,
              flexGrow: 1,
              zIndex: 2,
              paddingTop: 5,
            }}
            itemOuterStyle={{ paddingHorizontal: 5 }}
          />
        </ItemContainer>
      </View>
    </View>
  );
};

export default ChooseGenre;
