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

const EmotionConvey = ({
  selected: selectedProp,
  setSelected: setSelectedProp,
}) => {
  const [containerLayout, setContainerLayout] = useState(null);
  const [internalSelected, setInternalSelected] = useState(null);
  const selected = selectedProp ?? internalSelected;
  const setSelected = setSelectedProp ?? setInternalSelected;

  // Selection handled by ListSelection

  return (
    <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
      <CreateLyricsHeader
        title={`Quelle émotion veux-tu\ntransmettre ?`}
        subTitle="Sélectionne une seule intention émotionnelle."
      />

      <View
        style={{ flex: 1 }}
        onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
      >
        <ItemContainer height={containerLayout?.height}>
          <ListSelection
            disableHover
            options={EMOTION_CONVEY}
            variant="emotion"
            selected={selected}
            setSelected={setSelected}
            // Ensure selection remains an object {title, description}
            formatSelectedValue={(item) => ({
              title: item.title,
              description: item.description,
            })}
            // selected is object; compare via selected.title
            selectedValueExtractor={(s) => (s && s.title) || s}
            contentContainerStyle={{
              gap: 16,
              flexGrow: 1,
              zIndex: 2,
              paddingTop: 5,
            }}
            itemOuterStyle={{ paddingHorizontal: 5 }}
          />
        </ItemContainer>
      </View>
    </View>
  );
};

export default EmotionConvey;