import { View, Text, Image } from "react-native";
import React, { useState } from "react";
import MusicLandHeader from "../../components/MusicLandHeader";
import { background, icons, img } from "../../assets";
import Page from "../../layouts/Page";
import { goBack, navigate } from "../../navigation/NavigationService";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { gutters, Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import { launchImageLibraryAsync } from "expo-image-picker";
import { Routes } from "../../navigation";

const AddPhotoCover = () => {
  const [image, setImage] = useState(null);

  const onPressAddImage = async () => {
    const result = await launchImageLibraryAsync({
      mediaTypes: ["images"],
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.canceled) {
      setImage(result.assets[0]?.uri);
    }
  };

  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: image }}
                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="Ajouter une autre photo"
          onPress={onPressAddImage}
        />
        <GradientButton
          title="Valider"
          onPress={() => navigate(Routes.FinishCompose)}
        />
      </View>
    </Page>
  );
};

export default AddPhotoCover;