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

const CreatingSong = ({ active }) => {
  const [progress, setProgress] = useState(0);

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

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

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

  return (
    <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.theo}
            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 }}
          >
            <Pressable
              style={{
                ...size({ size: 24 }),
                ...Style.containerCenter,
                position: "absolute",
                top: 10,
                left: 10,
                zIndex: 3,
              }}
              onPress={goBack}
            >
              <Image source={icons.close} style={size({ size: 11 })} />
            </Pressable>
            <View style={{ flex: 1, justifyContent: "flex-end", gap: 20 }}>
              <Text
                style={{
                  fontSize: 22,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterSemiBold,
                  textAlign: "center",
                }}
              >
                Ton texte est{"\n"}en cours de création
              </Text>
              <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 texte"
                containerStyle={{
                  width: "80%",
                  alignSelf: "center",
                }}
                onPress={() => navigate(Routes.SongReady)}
              />
            </View>
          </BlurView>
        </View>
      </View>
    </View>
  );
};

export default CreatingSong;