import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import { background } from "../../assets";
import GradientButton from "../../components/GradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
import { strings } from "../../constants/strings";
import { isWeb } from "../../hooks/useLayoutType";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { goBack, navigate } from "../../navigation/NavigationService";
import { useUserData } from "../../providers/UserDataProvider";
import { Palette, gutters } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";

const CTA_BUTTON_HEIGHT = 58;
const CTA_BUTTON_MAX_WIDTH = 520;

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

  const [videoUrl, setVideoUrl] = useState(null);

  useEffect(() => {
    setVideoUrl(isWeb ? videos.celineWeb : videos?.celine);
  }, []);

  const startWriting = React.useCallback(async () => {
    try {
      await setIsLoading(true);
      if (selectedProjectId) {
        await updateProjectData({ hasLyrics: false });
        setTimeout(() => navigate(Routes.CreateLyricsWithAi), 500);
        return;
      }
      const newProjectId = await createNewProject({ hasLyrics: false });
      if (!newProjectId) {
        return;
      }
      setTimeout(() => navigate(Routes.CreateLyricsWithAi), 500);
    } catch (e) {
      console.log(e);
    } finally {
      await setIsLoading(false);
    }
  }, [
    createNewProject,
    navigate,
    selectedProjectId,
    setIsLoading,
    updateProjectData,
  ]);

  return (
    <Page
      backgroundImg={isWeb ? background.libraryBgWeb : background.writingBG}
      headerType="NONE"
    >
      <MusicLandHeader onPressBack={goBack} />
      <View style={styles.contentWrapper}>
        <View style={styles.heroContainer}></View>
        <View style={styles.ctaGroup}>
          <GradientButton
            size="large"
            height={CTA_BUTTON_HEIGHT}
            maxWidth={CTA_BUTTON_MAX_WIDTH}
            containerStyle={styles.ctaButton}
            title={strings.writing.onboarding.primaryCta}
            onPress={startWriting}
            textStyle={styles.ctaButtonText}
          />
          <Text style={styles.secondaryNote}>
            {strings.writing.onboarding.secondaryNote}
          </Text>
        </View>
      </View>
      <FullscreenIntroVideo
        url={videoUrl}
        visible={!!videoUrl}
        onClose={() => setVideoUrl(null)}
      />
    </Page>
  );
};

export default WritingLyrics;

const styles = StyleSheet.create({
  img: {
    width: "100%",
    height: "70%",
    position: "absolute",
    bottom: -40,
    right: -30,
  },
  contentWrapper: {
    flex: 1,
    justifyContent: "space-between",
    paddingTop: gutters * 6,
    paddingBottom: gutters * 2,
    paddingHorizontal: gutters,
    gap: 32,
  },
  heroContainer: {
    gap: 12,
    maxWidth: 560,
  },
  heroTitle: {
    fontSize: 28,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterSemiBold,
  },
  heroSubtitle: {
    fontSize: 16,
    lineHeight: 24,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
    opacity: 0.88,
  },
  ctaGroup: {
    gap: 12,
  },
  ctaButton: {
    alignSelf: "center",
    width: "100%",
    maxWidth: CTA_BUTTON_MAX_WIDTH,
  },
  ctaButtonText: {
    fontFamily: FONT_FAMILY.InterSemiBold,
  },
  secondaryNote: {
    textAlign: "center",
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
    fontSize: 14,
    opacity: 0.85,
    fontStyle: "italic",
  },
});