import { View, Text, StyleSheet, FlatList } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { SONG_STRUCTURE } from "../../data/data";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";

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

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

  return (
    <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
      <CreateLyricsHeader
        title="Comment veux-tu structurer ta chanson ?"
        subTitle="Sélectionne une structure."
      />
      <ItemContainer>
        <FlatList
          data={SONG_STRUCTURE}
          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={{
                    height: 40,
                    paddingHorizontal: 14,
                    justifyContent: "center",
                  }}
                >
                  <Text style={styles.itemText}>{item}</Text>
                </View>
              </CreateLyricsHeader>
            );
          }}
        />
      </ItemContainer>
    </View>
  );
};

export default SongStructure;

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