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

const Goals = ({ selected: selectedProp, setSelected: setSelectedProp, otherObjective, setOtherObjective }) => {
  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: 16, marginTop: 16 }}>
      <View style={{ gap: 10 }}>
        <CreateLyricsHeader title="Quels sont tes objectifs ?" />
        <ItemContainer>
          <FlatList
            data={GOALS}
            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,
                      ...Style.containerCenter,
                    }}
                  >
                    <Text style={styles.itemText}>{item}</Text>
                  </View>
                </CreateLyricsHeader>
              );
            }}
          />
        </ItemContainer>
      </View>
      <CustomInput
        label="Tu as un autre objectif?"
        placeholder="Décrire l’objectif"
        value={otherObjective}
        setValue={setOtherObjective}
      />
    </View>
  );
};

export default Goals;

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",
  },
});