import { View, Text, ScrollView } from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import { gutters, Palette } from "../../styles";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import { Routes } from "../../navigation";
import CustomInput from "./components/CustomInput";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";

const Lyrics = () => {
  const [containerLayout, setContainerLayout] = useState(null);

  return (
    <Page headerType="NONE">
      <MusicLandHeader onPressBack={goBack} progress={95} />
      <View
        style={{
          flex: 1,
          marginTop: 16,
          gap: 48,
        }}
        onLayout={(e) => setContainerLayout(e.nativeEvent.layout)}
      >
        <ItemContainer height={containerLayout?.height}>
          <ScrollView
            contentContainerStyle={{
              paddingHorizontal: 14,
              paddingVertical: 10,
              gap: 10,
              flexGrow: 1,
            }}
          >
            <CustomInput label="Titre" placeholder="Titre" height={45} />
            <View
              style={{
                height: 45,
                justifyContent: "center",
                backgroundColor: "#00000080",
                borderRadius: 14,
                paddingHorizontal: 12,
                marginTop: 20,
              }}
            >
              <Text
                style={{
                  fontSize: 16,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterRegular,
                }}
              >
                Introduction instrumentale longue
              </Text>
            </View>
            <CustomInput label="Couplet" placeholder="Couplet" height={225} />
            <CustomInput label="Refrain" placeholder="Refrain" height={170} />
          </ScrollView>
        </ItemContainer>
      </View>
      <View
        style={{
          paddingTop: gutters,
          paddingBottom: gutters * 2,
          paddingHorizontal: gutters,
          gap: 12,
        }}
      >
        <BorderGradientButton title="Générer des autres paroles" />
        <GradientButton
          title="Valider"
          onPress={() => navigate(Routes.FinishedWriting)}
        />
      </View>
    </Page>
  );
};

export default Lyrics;
