import React, { useMemo } from "react";
import { Linking, Pressable, Text, View } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { shareLink } from "../../helpers";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import AppActionSheet from "../AppActionSheet";

const ShareModal = ({ payload }) => {
  const {
    title = "Partager",
    message = "Choisis une application pour partager",
    text = "Découvre ce playback sur MusicLand",
    url = "",
  } = payload || {};

  const onClose = () => {
    SheetManager.hide("Share");
  };

  const shareText = useMemo(() => {
    return [text, url].filter(Boolean).join(" ");
  }, [text, url]);

  const openScheme = async () => {
    try {
      const supported = await Linking.canOpenURL(url);
      if (supported) {
        await Linking.openURL(url);
      } else {
        // fallback vers partage natif
        shareLink({ url, title: "Partager", message: shareText });
      }
    } catch (e) {
      shareLink({ url, title: "Partager", message: shareText });
    } finally {
      onClose();
    }
  };

  return (
    <AppActionSheet id="Share">
      <View style={{ gap: 24 }}>
        <View style={{ gap: 6 }}>
          <Text
            style={{
              fontSize: 20,
              color: Palette.white,
              fontFamily: FONT_FAMILY.HelveticaNeueMedium,
              textAlign: "center",
            }}
          >
            {title}
          </Text>
          <Text
            style={{
              fontSize: 14,
              color: Palette.white,
              opacity: 0.8,
              fontFamily: FONT_FAMILY.HelveticaNeueRegular,
              textAlign: "center",
            }}
          >
            {message}
          </Text>
        </View>

        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "center",
            gap: 16,
            paddingHorizontal: 12,
          }}
        >
          <Pressable
            onPress={() => {
              openScheme();
            }}
            style={{ alignItems: "center", gap: 8, flex: 1 }}
          >
            <View
              style={{
                width: 56,
                height: 56,
                borderRadius: 28,
                borderWidth: 1,
                borderColor: "#FFFFFF60",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Text
                style={{
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterMedium,
                  fontSize: 12,
                }}
              >
                partager
              </Text>
            </View>
            <Text
              style={{
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterMedium,
                fontSize: 12,
              }}
            >
              partager
            </Text>
          </Pressable>
        </View>
      </View>
    </AppActionSheet>
  );
};

export default ShareModal;
