import { View, StyleSheet, Image } from "react-native";
import React, { useState } from "react";
import { ai, background } from "../../assets";
import Page from "../../layouts/Page";
import { goBack, navigate } from "../../navigation/NavigationService";
import MusicLandHeader from "../../components/MusicLandHeader";
import { Routes } from "../../navigation";
import GradientButton from "../../components/GradientButton";
import { gutters } from "../../styles";
import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";

const Compose = () => {
  const [showIntro, setShowIntro] = useState(true);
  return (
    <Page backgroundImg={background.studioBG2} headerType="NONE">
      <Image source={ai.theo} style={styles.img} resizeMode="contain" />
      <MusicLandHeader onPressBack={goBack} progress={9} />
      <View
        style={{ flex: 1, position: "relative", justifyContent: "flex-end" }}
      >
        <View
          style={{
            paddingBottom: gutters * 2,
            paddingHorizontal: gutters,
            gap: 12,
          }}
        >
          <GradientButton
            title="Composer ma chanson"
            onPress={() => navigate(Routes.ComposeSong)}
          />
        </View>
      </View>
      <FullscreenIntroVideo
        visible={showIntro}
        onClose={() => setShowIntro(false)}
      />
    </Page>
  );
};

export default Compose;

const styles = StyleSheet.create({
  img: {
    width: "100%",
    height: "70%",
    position: "absolute",
    bottom: -40,
    right: -30,
  },
});