import { PortalProvider } from "@gorhom/portal";
import React, { useState } from "react";
import { Alert, Platform, Text } from "react-native";

import { BlurView } from "expo-blur";
import { View } from "react-native";
import { Fonts, gutters } from "../styles";
import GradientButton from "./GradientButton";
import Overlay from "./Overlay";
const WebAlertModal = ({ title, description, options }) => {
  const [visible, setVisible] = useState(true);

  const confirmOption = options?.find(({ style }) => style !== "cancel");
  const cancelOption = options?.find(({ style }) => style === "cancel");

  const onConfirm = () => {
    setVisible(false);
    confirmOption?.onPress();
  };

  const onCancel = () => {
    setVisible(false);
    cancelOption?.onPress();
  };

  return (
    <PortalProvider>
      <Overlay isVisible={visible}>
        <BlurView
          intensity={100}
          tint="dark"
          style={{
            width: "60%",
            maxWidth: 450,
            minWidth: 300,
            padding: "2.5%",
            borderRadius: 12,
            // ...Style.containerModal,
          }}
        >
          <Text
            style={{
              ...Fonts({
                type: "default",
                style: {
                  textAlign: "center",
                  marginBottom: gutters / 2,
                },
                fontSize: 3,
              }),
            }}
          >
            {title}
          </Text>
          <Text
            style={{
              ...Fonts({
                type: "default",
                style: {
                  textAlign: "center",
                  marginBottom: gutters / 2,
                },
              }),
            }}
          >
            {description}
          </Text>

          <View style={{ flexDirection: "row", gap: 10 }}>
            <GradientButton
              title={confirmOption?.text || "OK"}
              onPress={onConfirm}
              containerStyle={{ flex: 1 }}
            />
            {cancelOption && (
              <GradientButton
                title={cancelOption.text}
                onPress={onCancel}
                colors={["#666666", "#333333"]}
                containerStyle={{ flex: 1 }}
              />
            )}
          </View>
        </BlurView>
      </Overlay>
    </PortalProvider>
  );
};

const alertPolyfill = (title, description, options, extra) => {
  const rootDiv = document.createElement("div");
  document.body.appendChild(rootDiv);

  const closeModal = () => {
    document.body.removeChild(rootDiv);
  };

  const WebAlertComponent = () => (
    <WebAlertModal
      title={title}
      description={description}
      options={options}
      onDismiss={closeModal}
    />
  );

  // Render the React component into the div
  require("react-dom").render(<WebAlertComponent />, rootDiv);
};

const customAlert = (title, description, options, extra) => {
  // Utilisation de la propriété userInterfaceStyle pour le mettre en mode sombre
  Alert.alert(title, description, options, {
    ...extra,
    userInterfaceStyle: "dark",
  });
};

const alert = Platform.OS === "web" ? alertPolyfill : customAlert;

export default alert;