import React from 'react';
import {
  View,
  StyleSheet,
  type ViewStyle,
  type StyleProp,
  TouchableHighlight,
} from 'react-native';
import { moderateScale } from 'react-native-size-matters';
import TTypography from '../TTypography/TTypography';
import { TypographyVariant } from '../TTypography/TTypographyEnum';
import { useTheme, withTheme } from '../../core/theming';
import { defaultScale } from '../../utils/Common';
import type { Theme } from '../../utils/types';

interface Props {
  title?: string;
  variant: keyof BtnStyles;
  backgroundColor?: string;
  onPress: () => void;
  textColor?: string;
  activeOpacity?: number;
  style?: StyleProp<ViewStyle>;
  leftIconName?: React.ReactNode;
  rightIconName?: React.ReactNode;
  disabled?: boolean;
  tertiaryBtnHeight?: number;
  tertiaryBottomBorderColor?: string;
  theme: Theme;
  fontSize?: number;
  borderRadius?: number;
  testID?: string;
  accessibilityLabel?: string;
  textvariant?: TypographyVariant;
}

const TButton: React.FC<Props> = ({
  title,
  variant = 'primary',
  backgroundColor,
  onPress,
  activeOpacity = 0.5,
  style,
  textColor,
  leftIconName,
  rightIconName,
  disabled = false,
  tertiaryBtnHeight = moderateScale(24, defaultScale),
  tertiaryBottomBorderColor,
  fontSize = 16,
  borderRadius = 4,
  testID,
  accessibilityLabel,
  textvariant = TypographyVariant.PRIMARY_BOLD,
}): any => {
  const { colors } = useTheme();
  const stylesWithProp = btnStyles({
    colors,
    backgroundColor,
    disabled,
    tertiaryBtnHeight,
    tertiaryBottomBorderColor,
    borderRadius,
  });
  const renderLeftIcon = () => {
    return leftIconName;
  };
  const renderRightIcon = () => {
    return rightIconName;
  };
  return (
    <TouchableHighlight
      activeOpacity={variant === 'primary' ? 1 : activeOpacity}
      underlayColor={variant === 'primary' ? colors.textColorLight : ''}
      style={[stylesWithProp[variant], style]}
      onPress={onPress}
      disabled={disabled}
      testID={testID}
      accessible={true}
      accessibilityLabel={accessibilityLabel}
    >
      <View style={stylesWithProp.btnContent}>
        <>
          {leftIconName && (
            <View style={stylesWithProp.leftIconPadding}>
              {renderLeftIcon()}
            </View>
          )}
          <View>
            <TTypography
              fontSize={fontSize}
              style={stylesWithProp.text}
              color={textColor ?? colors.textColor}
              variant={textvariant}
            >
              {title}
            </TTypography>
          </View>
          {rightIconName && (
            <View style={stylesWithProp.rightIconPadding}>
              {renderRightIcon()}
            </View>
          )}
        </>
      </View>
    </TouchableHighlight>
  );
};

export interface BtnStyles {
  primary?: StyleProp<ViewStyle>;
  secondary?: StyleProp<ViewStyle>;
  tertiary?: StyleProp<ViewStyle>;
}

export const btnStyles = (props: {
  colors: any;
  backgroundColor: string | undefined;
  disabled: boolean;
  tertiaryBtnHeight: number;
  tertiaryBottomBorderColor: string | undefined;
  borderRadius: number;
}) =>
  StyleSheet.create({
    primary: {
      backgroundColor: props.backgroundColor ?? props.colors.primaryButtonColor,
      height: moderateScale(56, defaultScale),
      borderRadius: moderateScale(props.borderRadius, defaultScale),
      justifyContent: 'center',
      alignItems: 'center',
    },
    secondary: {
      backgroundColor:
        props.backgroundColor ?? props.colors.secondaryButtonColor,
      borderWidth: moderateScale(1, defaultScale),
      borderColor: props.disabled
        ? props.colors.textColorLight
        : props.colors.textColor,
      height: moderateScale(56, defaultScale),
      borderRadius: moderateScale(props.borderRadius, defaultScale),
      justifyContent: 'center',
      alignItems: 'center',
    },
    tertiary: {
      borderColor: props.disabled
        ? props.colors.textColorLight
        : props.colors.textColor,
      justifyContent: 'center',
      alignItems: 'center',
      height: moderateScale(props.tertiaryBtnHeight, defaultScale),
      borderBottomWidth: moderateScale(1, defaultScale),
      borderBottomColor:
        props.tertiaryBottomBorderColor ?? props.colors.primaryButtonColor,
    },
    borderBottomWidth: {
      height: 1,
      backgroundColor:
        props.tertiaryBottomBorderColor ?? props.colors.primaryButtonColor,
    },
    btnContent: {
      flexDirection: 'row',
      height: moderateScale(40, defaultScale),
      justifyContent: 'center',
      alignItems: 'center',
    },
    text: {
      lineHeight: moderateScale(24, defaultScale),
    },
    leftIconPadding: {
      paddingRight: moderateScale(8, 0.3),
    },
    rightIconPadding: {
      paddingLeft: moderateScale(8, 0.3),
    },
  });

export default withTheme(TButton);