import { View, Text } from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import GradientButton from "../../components/GradientButton";
import { CHOOSE_DECOR } from "../../data/data";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { Routes } from "../../navigation";

const ChooseDecor = () => {
  const [selected, setSelected] = useState("");

  return (
    <Page headerType="NONE" backgroundImg={background.playbackBG2}>
      <MusicLandHeader progress={20} onPressBack={goBack} />
      <View style={{ flex: 1, marginTop: 12, gap: 34 }}>
        <View style={{ gap: 10 }}>
          <CreateLyricsHeader
            title="Choisis ton décor"
            subTitle="Il sera généré derrière toi lors de ton Playback."
          />
          <ItemContainer height={402}>
            <View style={{ gap: 10, marginTop: 5, paddingHorizontal: 5 }}>
              {CHOOSE_DECOR.map((item, index) => {
                const selectedItem = selected === item;

                return (
                  <CreateLyricsHeader
                    key={index}
                    gradientProps={{
                      locations: [0, 1],
                    }}
                    containerStyle={{
                      borderRadius: 14,
                    }}
                    onPress={() => setSelected(item)}
                    colors={
                      selectedItem
                        ? ["#99999900", "#FFFFFF"]
                        : [Palette.tran, Palette.tran]
                    }
                    tint={selectedItem ? "default" : "dark"}
                  >
                    <View style={{ paddingVertical: 6 }}>
                      <Text
                        style={{
                          fontSize: 16,
                          color: Palette.white,
                          fontFamily: FONT_FAMILY.InterRegular,
                        }}
                      >
                        {item}
                      </Text>
                    </View>
                  </CreateLyricsHeader>
                );
              })}
            </View>
          </ItemContainer>
        </View>
        <GradientButton
          title="Suivant"
          onPress={() => navigate(Routes.CreatingDecor)}
        />
      </View>
    </Page>
  );
};

export default ChooseDecor;