/* eslint-disable @typescript-eslint/no-explicit-any */
import { FC, useCallback, useMemo } from "react";
import { ButtonWidgetProps, WrappedButtonProps } from "./interface";
import React from "react";
import { View, StyleSheet } from "react-native";
import { Button } from "react-native-paper";
import { getStyleMap } from "@/utils/getStyleMap";

export const WrappedButtonNative: FC<WrappedButtonProps> = (props) => {
  const {
    text,
    variant,
    disabled,
    loading,
    handleOnPress,
    iconName,
    position,
    trueClasses = [],
    falseClasses = [], 
    isClassTrue = true, 
    context
  } = props;

  const styles = useMemo(() => {
    return getStyleMap(trueClasses, falseClasses, isClassTrue, context);
  }, [trueClasses, falseClasses, isClassTrue, context]);
  
  const flattenedStyles = StyleSheet.flatten(styles) || {}

  return (
    <Button
      mode={variant}
      disabled={disabled || loading}
      loading={loading}
      onPress={handleOnPress}
      style={{ ...flattenedStyles, borderRadius: 7 }}
      icon={iconName}
      contentStyle={position === "end" && { flexDirection: 'row-reverse' }}
    >
      {text}
    </Button>
  );
};

// WrappedButtonNative.displayName = "WrappedButtonNative";
export const ButtonWidgetNative: FC<ButtonWidgetProps> = (props) => {
  const handleOnPress = useCallback(() => {
    if (props.triggerEventHandler) {
      props.triggerEventHandler("click");
    }
  }, [props]);

  return (
    <View
      key={props.displayName}
    >
      <WrappedButtonNative
        {...props}
        handleOnPress={handleOnPress}
      />
    </View>
  );
};

ButtonWidgetNative.displayName = "ButtonWidgetNative";