import { View, Text, Image, Platform } from "react-native";
import React, { useEffect, useState } from "react";
import Page from "../../layouts/Page";
import { ai, background } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import { Palette, Style } from "../../styles";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../../styles/Fonts";
import ProgressBar from "../../components/ProgressBar";
import { Routes } from "../../navigation";
import GradientButton from "../../components/GradientButton";

const CreatingDecor = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prevProgress) => {
        if (prevProgress >= 100) {
          clearInterval(interval);

          return 100;
        }
        return prevProgress + 1;
      });
    }, 100);

    return () => clearInterval(interval);
  }, []);

  return (
    <Page backgroundImg={background.playbackBG2} headerType="NONE">
      <MusicLandHeader progress={20} onPressBack={goBack} />
      <View
        style={{
          flex: 1,
          paddingTop: 16,
          ...Style.containerCenter,
        }}
      >
        <View
          style={{
            width: "100%",
            height: "50%",
          }}
        >
          <View
            style={{
              zIndex: 1,
              position: "absolute",
              top: -150,
              width: "50%",
              height: "80%",
              alignSelf: "center",
            }}
          >
            <Image
              source={ai.john}
              style={{ width: "100%", height: "100%", right: -10 }}
              resizeMode="contain"
            />
          </View>
          <View
            style={{
              flex: 1,
              borderRadius: 20,
              overflow: "hidden",
              backgroundColor: "#0F0C1933",
            }}
          >
            <BlurView
              intensity={40}
              tint="dark"
              style={{ flex: 1, padding: 10, paddingBottom: 20 }}
              experimentalBlurMethod={
                Platform.OS !== "ios" ? "dimezisBlurView" : "none"
              }
            >
              <View style={{ flex: 1, justifyContent: "flex-end", gap: 20 }}>
                <View>
                  <Text
                    style={{
                      fontSize: 22,
                      color: Palette.white,
                      fontFamily: FONT_FAMILY.InterSemiBold,
                      textAlign: "center",
                    }}
                  >
                    Ton décor est en cours de{"\n"}création
                  </Text>
                  <Text
                    style={{
                      fontSize: 14,
                      color: Palette.gray,
                      fontFamily: FONT_FAMILY.InterRegular,
                      textAlign: "center",
                    }}
                  >
                    Veuillez patienter
                  </Text>
                </View>
                <View style={{ alignItems: "center", gap: 16 }}>
                  <ProgressBar gradient progress={progress} />
                  <Text
                    style={{
                      fontSize: 14,
                      color: Palette.white,
                      fontFamily: FONT_FAMILY.InterRegular,
                    }}
                  >
                    {progress}%
                  </Text>
                </View>
                <GradientButton
                  title="Découvrir mon Playback"
                  containerStyle={{
                    width: "80%",
                    alignSelf: "center",
                  }}
                  onPress={() => navigate(Routes.VideoFinalize)}
                />
              </View>
            </BlurView>
          </View>
        </View>
      </View>
    </Page>
  );
};

export default CreatingDecor;
