import { View, Image, StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";
import Page from "../../layouts/Page";
import { ai } from "../../assets";
import GradientButton from "../../components/GradientButton";
import { gutters } from "../../styles";
import BorderGradientButton from "../../components/BorderGradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
import { useUserData } from "../../providers/UserDataProvider";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";

const WritingLyrics = () => {
  const { createNewProject, selectedProject, updateProjectData } =
    useUserData();
  const { setIsLoading } = useMinuit();

  const [showIntro, setShowIntro] = useState(false);

  useEffect(() => {
    if (selectedProject === null) {
      setShowIntro(true);
    }
  }, [selectedProject]);

  async function createAndNavigate({ hasLyrics = false }) {
    try {
      await setIsLoading(true);
      if (selectedProject) {
        updateProjectData({ hasLyrics });
      } else {
        await createNewProject({ hasLyrics });
      }
      setTimeout(() => navigate(Routes.CreateLyricsWithAi), 500);
    } catch (e) {
      console.log(e);
    } finally {
      await setIsLoading(false);
    }
  }

  return (
    <Page headerType="NONE">
      <Image source={ai.nathalie} 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,
          }}
        >
          <BorderGradientButton
            onPress={() => createAndNavigate({ hasLyrics: true })}
          />
          <GradientButton
            title="Écrire des paroles avec une IA"
            onPress={() => createAndNavigate({ hasLyrics: false })}
          />
        </View>
      </View>
      <FullscreenIntroVideo
        visible={showIntro}
        onClose={() => setShowIntro(false)}
      />
    </Page>
  );
};

export default WritingLyrics;

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