import { Text, View } from "react-native";
import React from "react";
import { CameraView } from "expo-camera";
import { gutters, Palette } from "../../styles";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { FONT_FAMILY } from "../../styles/Fonts";
import GradientButton from "../../components/GradientButton";
import { Routes } from "../../navigation";

const RecordPlayback = () => {
  const { top } = useSafeAreaInsets();

  return (
    <View style={{ flex: 1 }}>
      <CameraView style={{ flex: 1 }} facing="front">
        <View
          style={{
            paddingHorizontal: gutters,
            paddingTop: top,
            flex: 1,
            paddingBottom: gutters * 2,
          }}
        >
          <MusicLandHeader progress={9} onPressBack={goBack} />
          <View style={{ flex: 1, marginTop: 11 }}>
            <CreateLyricsHeader>
              <Text
                style={{
                  fontSize: 16,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterMedium,
                }}
              >
                L'enregistrement de ta vidéo commencera lorsque tu lanceras ta
                musique, et s'arrêtera à la fin du morceau.
              </Text>
            </CreateLyricsHeader>
          </View>
          <GradientButton
            title="Lancer ma musique"
            containerStyle={{
              width: "80%",
              alignSelf: "center",
            }}
            onPress={() => navigate(Routes.RecordedPlayback)}
          />
        </View>
      </CameraView>
    </View>
  );
};

export default RecordPlayback;
