import { View, Image } from "react-native";
import React from "react";
import MusicLandHeader from "../../components/MusicLandHeader";
import { background, img } from "../../assets";
import Page from "../../layouts/Page";
import { goBack, navigate } from "../../navigation/NavigationService";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { gutters, Style } from "../../styles";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import { Routes } from "../../navigation";
import { useUserData } from "../../providers/UserDataProvider";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";

const ValidateCover = () => {
  const { selectedProject, updateProjectData } = useUserData();

  const { setIsLoading } = useMinuit();

  async function onStartAgain() {
    try {
      await setIsLoading(true);
      await updateProjectData({
        cover: null,
        coverUrl: null,
      });
      navigate(Routes.ChooseCoverType);
    } catch (e) {
      console.log(e);
    } finally {
      await setIsLoading(false);
    }
  }
  async function onValidatePicture() {
    try {
      await setIsLoading(true);
      await updateProjectData({
        coverUrl: selectedProject?.cover?.result,
      });
      navigate(Routes.FlowSelection);
    } catch (e) {
      console.log(e);
    } finally {
      await setIsLoading(false);
    }
  }
  return (
    <Page backgroundImg={background.studioBG2} headerType="NONE">
      <MusicLandHeader onPressBack={goBack} progress={90} />
      <View style={{ flex: 1, marginTop: 16 }}>
        <CreateLyricsHeader
          title="Ta pochette est prête!"
          subTitle="Qu’en penses-tu ?"
        />
        <View style={{ flex: 1, ...Style.containerCenter }}>
          <View style={{ width: "80%", position: "relative" }}>
            <Image
              source={img.placeholder}
              style={{
                width: "100%",
                height: 300,
                borderRadius: 20,
                transform: [{ rotateY: "180deg" }],
              }}
            />
            <View
              style={{ position: "absolute", width: "100%", height: "100%" }}
            >
              <Image
                source={{ uri: selectedProject?.cover?.result }}
                style={{ width: "100%", height: "100%", borderRadius: 20 }}
              />
            </View>
            {/*<View*/}
            {/*  style={{*/}
            {/*    position: "absolute",*/}
            {/*    alignSelf: "center",*/}
            {/*    alignItems: "center",*/}
            {/*    top: 10,*/}
            {/*  }}*/}
            {/*>*/}
            {/*  <Text*/}
            {/*    style={{*/}
            {/*      fontSize: 22,*/}
            {/*      color: Palette.white,*/}
            {/*      fontFamily: FONT_FAMILY.InterSemiBold,*/}
            {/*    }}*/}
            {/*  >*/}
            {/*    Lust for Life*/}
            {/*  </Text>*/}
            {/*  <Text*/}
            {/*    style={{*/}
            {/*      fontSize: 14,*/}
            {/*      color: Palette.gray,*/}
            {/*      fontFamily: FONT_FAMILY.InterRegular,*/}
            {/*    }}*/}
            {/*  >*/}
            {/*    Lana del Rey*/}
            {/*  </Text>*/}
            {/*</View>*/}
            {/*<View*/}
            {/*  style={{*/}
            {/*    position: "absolute",*/}
            {/*    alignItems: "center",*/}
            {/*    bottom: 10,*/}
            {/*    width: "100%",*/}
            {/*  }}*/}
            {/*>*/}
            {/*  <Image*/}
            {/*    source={icons.musicLandLogo}*/}
            {/*    style={{ width: "100%", height: 30 }}*/}
            {/*    resizeMode="contain"*/}
            {/*  />*/}
            {/*</View>*/}
          </View>
        </View>
      </View>
      <View
        style={{
          paddingBottom: gutters * 2,
          width: "80%",
          alignSelf: "center",
          gap: 12,
        }}
      >
        <BorderGradientButton
          title="Recommencer la création"
          onPress={onStartAgain}
        />
        <GradientButton
          title="Valider la pochette"
          onPress={onValidatePicture}
        />
      </View>
    </Page>
  );
};

export default ValidateCover;
