import { View, StyleSheet } from "react-native";
import React, { useMemo, useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { OTHER_STYLE_OPTION, SONG_STYLE } from "../../data/data";
import { Palette } from "../../styles";
import CustomInput from "./components/CustomInput";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import ListSelection from "../../components/ListSelection/ListSelection";

const SongStyle = ({
  selected: selectedProp,
  setSelected: setSelectedProp,
  otherStyle,
  setOtherStyle,
}) => {
  const [internalSelected, setInternalSelected] = useState(null);
  const selected = selectedProp ?? internalSelected;
  const setSelected = setSelectedProp ?? setInternalSelected;

  const songStyleOptions = useMemo(() => SONG_STYLE ?? [], []);

  const handleOtherStyleChange = (value) => {
    setOtherStyle?.(value);
    const trimmed = value?.trim() ?? "";
    if (trimmed.length) {
      if (selected !== OTHER_STYLE_OPTION) {
        setSelected(OTHER_STYLE_OPTION);
      }
    } else if (selected === OTHER_STYLE_OPTION) {
      setSelected(null);
    }
  };

  // Selection handled by ListSelection

  return (
    <View style={{ flex: 1, gap: 16, marginTop: 16 }}>
      <View style={{ gap: 10 }}>
        <CreateLyricsHeader
          title={`Quel est le style de ta chanson ?`}
          subTitle="Choisis l'ambiance émotions que tu veux faire passer."
        />
        <ItemContainer>
          <ListSelection
            options={songStyleOptions}
            variant="titleDescription"
            selected={selected}
            setSelected={setSelected}
            contentContainerStyle={styles.contentContainer}
            itemContainerStyle={styles.itemContainer}
          />
        </ItemContainer>
      </View>
      <CustomInput
        label="Tu as un autre style de chanson ?"
        placeholder="Décrire le style"
        value={otherStyle}
        setValue={handleOtherStyleChange}
      />
    </View>
  );
};

export default SongStyle;

const styles = StyleSheet.create({
  contentContainer: {
    flexGrow: 1,
    padding: 8,
    gap: 10,
    backgroundColor: "#FFFFFF00",
    paddingBottom: 50,
  },
  itemContainer: {
    borderRadius: 14,
    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,
    textAlign: "center",
  },
});