import React, { useCallback, useMemo } from "react";
import { View, StyleSheet } from "react-native";
import { LabelProps } from "./interface";
import { Text } from "react-native-paper"
import { getStyleMap } from "@/utils/getStyleMap";

export const LabelNative = (props: LabelProps) => {
  const {
    label,
    size,
    align,
    colorScheme,
    triggerEventHandler,
    trueClasses = [],
    falseClasses = [], 
    isClassTrue = true, 
    context
  } = props

  const handleOnPress = useCallback(() => {
    triggerEventHandler("click");
  }, [triggerEventHandler]);

  const styles = useMemo(() => {
    return getStyleMap(trueClasses, falseClasses, true, context);
  }, [trueClasses, falseClasses, isClassTrue, context]);
  
  console.log("Label Native >>" , label);
  const flattenedStyles = StyleSheet.flatten(styles) || {}
  return (
    <View>
      <Text onPress={handleOnPress} variant={size} style={{ ...flattenedStyles, color: colorScheme, textAlign: align }}>
        {label}
      </Text>
    </View>
  );
};
LabelNative.displayName = "LabelNative";
