import React from "react";
import { Text, View } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import AppActionSheet from "../AppActionSheet";
import BorderGradientButton from "../BorderGradientButton";
import GradientButton from "../GradientButton";

const DeleteModal = ({ payload }) => {
  const {
    title = "Supprimer ma playlist",
    message = "Es-tu sur de vouloir supprimer ta playlist?",
    onConfirm,
  } = payload || {};

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

  const handleConfirm = async () => {
    if (onConfirm) {
      await onConfirm();
    }
    onClose();
  };

  return (
    <AppActionSheet id="Delete">
      <View style={{ gap: 20 }}>
        <View style={{ gap: 2 }}>
          <Text
            style={{
              fontSize: 20,
              color: Palette.white,
              fontFamily: FONT_FAMILY.HelveticaNeueMedium,
              textAlign: "center",
            }}
          >
            {title}
          </Text>
          <Text
            style={{
              fontSize: 16,
              color: Palette.white,
              fontFamily: FONT_FAMILY.HelveticaNeueRegular,
              textAlign: "center",
            }}
          >
            {message}
          </Text>
        </View>
        <View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
          <BorderGradientButton
            title="Oui, supprimer"
            onPress={handleConfirm}
          />
          <GradientButton title="Non, annuler" onPress={onClose} />
        </View>
      </View>
    </AppActionSheet>
  );
};

export default DeleteModal;