import React, {memo, ComponentProps, useCallback} from 'react';
import {
  StyleSheet,
  StyleProp,
  ViewStyle,
  Button as RNButton,
  TextStyle,
  View,
  Pressable as RNPressable,
  Text as RNText,
  View as RNView,
  ActivityIndicator,
  Keyboard,
  ImageStyle,
} from 'react-native';
import {Colors, fontSz, hp, Images, ms} from '../../utils';
import {Text} from '../Text';
import {useSDKConfig} from '../../contexts/SDKConfigContext';
import {SmartImage} from '../Images/SmartImage';

export type TextProps = RNText['props'];
export type ViewProps = RNView['props'];

type PressableProps = {
  children: React.ReactNode;
  style?: ViewProps['style'];
  activeOpacity?: number;
  [key: string]: any; // Allow any additional props
};

export function CustomPressable({
  children,
  style,
  activeOpacity,
  ...otherProps
}: PressableProps) {
  const _style = useCallback(
    ({pressed}: {pressed: boolean}) => [
      {opacity: pressed ? activeOpacity : 1},
      style && style,
    ],
    [style],
  );

  return (
    <RNPressable style={_style} {...otherProps}>
      {children}
    </RNPressable>
  );
}

type ButtonProps = ComponentProps<typeof RNButton> & {
  title: string;
  isLoading?: boolean;
  loaderColor?: string;
  outlined?: boolean;
  style?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
  iconStyle?: StyleProp<ImageStyle>;
  fontSize?: number;
  prependComponent?: any;
  appendComponent?: any;
  fontWeight?:
    | 'normal'
    | 'bold'
    | '100'
    | '200'
    | '300'
    | '400'
    | '500'
    | '600'
    | '700'
    | '800'
    | '900';
  containerStyle?: StyleProp<ViewStyle>;
  disabled?: boolean;
  onPress: () => void;
};

export const Button = memo(
  ({
    title,
    loaderColor = Colors.white,
    isLoading = false,
    outlined,
    style,
    textStyle = {
      fontSize: fontSz(16),
      fontFamily: 'Gordita-Medium',
      fontWeight: '500',
      color: Colors.white,
    },
    fontWeight = '500',
    fontSize = fontSz(16),
    containerStyle,
    prependComponent,
    appendComponent,
    disabled = false,
    onPress,
    ...rest
  }: ButtonProps) => {
    const {primaryColor} = useSDKConfig();
    // Handle button click
    const _handleOnClick = () => {
      Keyboard.dismiss();
      onPress();
    };
    return (
      <CustomPressable
        activeOpacity={0.5}
        disabled={disabled || isLoading}
        onPress={disabled || isLoading ? () => null : _handleOnClick}
        style={[
          styles.btn,
          {
            backgroundColor: disabled ? Colors.disabledButton : primaryColor,
            opacity: disabled && outlined ? 0.5 : 1,
          },
          style,
        ]}
        {...rest}>
        {!isLoading ? (
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
            }}>
            {prependComponent}
            <Text
              text={title}
              fontSize={fontSize}
              color={Colors.white}
              fontWeight={fontWeight}
              style={textStyle}
            />
            {appendComponent}
          </View>
        ) : (
          <ActivityIndicator size={'small'} color={loaderColor} />
        )}
      </CustomPressable>
    );
  },
);
export const FloatButton = memo(
  ({
    title,
    loaderColor = Colors.white,
    isLoading = false,
    outlined,
    style,
    textStyle = {
      fontSize: fontSz(16),
      fontFamily: 'Gordita-Medium',
      fontWeight: '500',
      color: Colors.white,
    },
    iconStyle = {
      width: ms(24),
      height: ms(24),
      tintColor: Colors.white,
    },
    fontWeight = '500',
    fontSize = fontSz(16),
    containerStyle,
    prependComponent,
    appendComponent,
    disabled = false,
    onPress,
    ...rest
  }: ButtonProps) => {
    const {primaryColor} = useSDKConfig();
    // Handle button click
    const _handleOnClick = () => {
      Keyboard.dismiss();
      onPress();
    };
    return (
      <CustomPressable
        activeOpacity={0.5}
        disabled={disabled || isLoading}
        onPress={disabled || isLoading ? () => null : _handleOnClick}
        style={[
          styles.floatBtn,
          {
            backgroundColor: disabled ? Colors.disabledButton : primaryColor,
            opacity: disabled && outlined ? 0.5 : 1,
          },
          style,
        ]}
        {...rest}>
        {!isLoading ? (
          <View
            style={{
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            {prependComponent ?? (
              <SmartImage source={Images.add} style={iconStyle} />
            )}
            <Text
              text={title}
              fontSize={fontSize}
              color={Colors.white}
              fontWeight={fontWeight}
              style={textStyle}
            />
            {appendComponent}
          </View>
        ) : (
          <ActivityIndicator size={'small'} color={loaderColor} />
        )}
      </CustomPressable>
    );
  },
);

const styles = StyleSheet.create({
  btn: {
    borderRadius: ms(8),
    width: '100%',
    height: hp(55),
    marginTop: hp(10),
    alignItems: 'center',
    justifyContent: 'center',
  },
  floatBtn: {
    borderRadius: ms(80 / 2),
    width: hp(80),
    height: hp(80),
    marginTop: hp(10),
    alignItems: 'center',
    justifyContent: 'center',
  },
});