import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background, icons } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import Slider from "../../components/Slider";
import { Image, Pressable, View } from "react-native";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { Style } from "../../styles";
import { responsiveWidth } from "react-native-responsive-dimensions";
import { gutters, size } from "../../styles/Style";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import { Routes } from "../../navigation";
import ValidateModal from "../../components/modal/ValidateModal";

const SongReady = () => {
  const [showValidateModal, setShowValidateModal] = useState(false);

  return (
    <Page headerType="NONE" backgroundImg={background.studioBG2}>
      <MusicLandHeader onPressBack={goBack} progress={63} />
      <View style={{ flex: 1, marginTop: 16 }}>
        <CreateLyricsHeader
          title="Ta chanson est prête !"
          subTitle="Qu’en penses-tu ?"
        />
        <View
          style={{
            ...size({ size: responsiveWidth(80) }),
            alignSelf: "center",
            borderRadius: 1000,
            overflow: "hidden",
            marginTop: 16,
          }}
        >
          <BlurView
            intensity={40}
            tint="dark"
            style={{ ...Style.containerCenter, flex: 1 }}
          >
            <Image source={icons.disk} />
          </BlurView>
        </View>
        <View style={{ marginTop: 49 }}>
          <Slider value="0" maxValue="2:11" />
          <Pressable
            style={{
              alignSelf: "center",
              ...size({ size: 48 }),
              ...Style.containerCenter,
            }}
          >
            <Image source={icons.play} />
          </Pressable>
        </View>
      </View>
      <View
        style={{
          paddingBottom: gutters * 2,
          width: "80%",
          alignSelf: "center",
          gap: 12,
        }}
      >
        <BorderGradientButton
          title="Regénérer"
          icon={icons.stars}
          onPress={() =>
            navigate(Routes.Regenerate, {
              progress: 63,
            })
          }
        />
        <GradientButton
          title="Valider"
          onPress={() => setShowValidateModal(true)}
        />
      </View>
      <ValidateModal
        visible={showValidateModal}
        onClose={() => setShowValidateModal(false)}
        onPressValidate={() => navigate(Routes.PouchReady)}
      />
    </Page>
  );
};

export default SongReady;