import React, { useCallback, useState } from "react";
import { Image, StyleSheet, View } from "react-native";
import { ai, background } from "../../assets";
import BorderGradientButton from "../../components/BorderGradientButton";
import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
import GradientButton from "../../components/GradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
import Page from "../../layouts/Page";
import { isWeb } from "../../hooks/useLayoutType";
import { Routes } from "../../navigation";
import { navigate } from "../../navigation/NavigationService";
import { useUser } from "../../providers/UserDataProvider";
import { gutters } from "../../styles";

const Playback = ({ route, navigation }) => {
  const { project } = route.params || {};
  const { videos } = useUser();
  const benhaiUrl = isWeb ? videos?.benhaiWeb || null : videos?.benhai;
  const [showIntro, setShowIntro] = useState(benhaiUrl);

  const handleCloseIntro = () => {
    if (showIntro === benhaiUrl) {
      setShowIntro(isWeb ? videos?.theoWeb : videos?.theo);
    } else {
      setShowIntro(null);
    }
  };

  const onPressRecord = useCallback(() => {
    navigate(Routes.RecordPlayback, { project });
  }, [project]);

  return (
    <Page headerType="NONE" backgroundImg={isWeb ? background.playbackWeb : background.playbackMobile}>
      <Image source={ai.theo} style={styles.img} resizeMode="contain" />
      <MusicLandHeader
        onPressBack={() => navigation.navigate(Routes.Home)}
        progress={25}
      />
      <View
        style={{
          flex: 1,
          paddingBottom: gutters * 2,
          justifyContent: "flex-end",
        }}
      >
        <View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
          <GradientButton
            title="Enregistrer mon Playback"
            onPress={onPressRecord}
          />
          <BorderGradientButton
            title="Guide du Playbacker"
            onPress={() => navigate(Routes.PlaybackGuide)}
          />
          {/* <BorderGradientButton title="Importer une vidéo" /> */}
        </View>
      </View>
      <FullscreenIntroVideo
        url={showIntro}
        visible={showIntro}
        onClose={handleCloseIntro}
      />
    </Page>
  );
};

export default Playback;

const styles = StyleSheet.create({
  img: {
    width: "100%",
    height: "70%",
    position: "absolute",
    bottom: -40,
  },
});