import React from 'react';
import { StyleSheet, View } from 'react-native';
import Modal from 'react-native-modal';
import { moderateScale } from 'react-native-size-matters';
import { defaultScale } from '../../utils/Common';
import { TypographyVariant } from '../TTypography/TTypographyEnum';
import { withTheme, useTheme } from '../../core/theming';
import type { Theme } from '../../utils/types';
import TCard from '../TCard/TCard';
import TTypography from '../TTypography/TTypography';
import TButton, { type BtnStyles } from '../TButton/TButton';
interface Props {
  visible: boolean;
  title: string;
  titleTextColor?: string;
  description?: string;
  descriptionTitleColor?: string;
  onPressPrimaryButton: () => void;
  onPressSecondaryButton: () => void;
  onDismiss: () => void;
  primaryButtonVariant: keyof BtnStyles;
  secondaryButtonVariant: keyof BtnStyles;
  primaryButtonTitle: string;
  secondaryButtonTitle: string;
  primaryButtonColor?: string;
  secondaryButtonColor?: string;
  backgroundColor?: string;
  theme: Theme;
  showSecondaryButton?: boolean;
}

const TAlert: React.FC<Props> = ({
  visible,
  title,
  titleTextColor,
  description,
  descriptionTitleColor,
  onPressPrimaryButton,
  onPressSecondaryButton,
  onDismiss,
  primaryButtonVariant,
  secondaryButtonVariant,
  primaryButtonTitle,
  primaryButtonColor,
  secondaryButtonColor,
  secondaryButtonTitle,
  showSecondaryButton,
  backgroundColor,
}: Props): any => {
  const { colors } = useTheme();

  const stylesWithProp = styles({
    showSecondaryButton,
    colors,
    backgroundColor,
    secondaryButtonTitle,
  });
  return (
    <Modal
      isVisible={visible}
      animationIn={'fadeIn'}
      animationOut={'fadeOut'}
      onBackdropPress={() => {
        onDismiss();
      }}
    >
      <TCard style={stylesWithProp.cardContainer}>
        <TTypography
          variant={TypographyVariant.PRIMARY_BOLD}
          style={stylesWithProp.title}
          color={titleTextColor ?? colors.textColor}
        >
          {title}
        </TTypography>

        {description && (
          <TTypography
            variant={TypographyVariant.PRIMARY}
            style={stylesWithProp.secondaryTitle}
            color={descriptionTitleColor ?? colors.textColorLight}
          >
            {description}
          </TTypography>
        )}

        <View style={stylesWithProp.btnContainer}>
          {primaryButtonTitle && !showSecondaryButton ? (
            <View
              style={
                primaryButtonVariant === 'secondary'
                  ? stylesWithProp.primaryBtnContainerFullWidth
                  : stylesWithProp.primaryBtnContainer
              }
            >
              <TButton
                title={primaryButtonTitle}
                variant={primaryButtonVariant}
                style={stylesWithProp.primaryBtn}
                backgroundColor={primaryButtonColor ?? colors.white}
                textColor={colors.textColor}
                onPress={() => onPressPrimaryButton()}
              />
            </View>
          ) : (
            <></>
          )}
          <View style={stylesWithProp.secondaryBtnContainer}>
            <TButton
              title={secondaryButtonTitle}
              variant={secondaryButtonVariant}
              backgroundColor={secondaryButtonColor ?? colors.textColor}
              textColor={colors.white}
              onPress={() => onPressSecondaryButton()}
            />
          </View>
        </View>
      </TCard>
    </Modal>
  );
};
const styles = (props: {
  showSecondaryButton?: boolean;
  colors: any;
  backgroundColor: string | undefined;
  secondaryButtonTitle: string;
}) =>
  StyleSheet.create({
    cardContainer: {
      paddingHorizontal: moderateScale(16, defaultScale),
      paddingVertical: moderateScale(24, defaultScale),
      borderRadius: moderateScale(8, defaultScale),
      backgroundColor: props.backgroundColor ?? props.colors.background,
    },
    title: {
      fontSize: moderateScale(18, defaultScale),
      marginBottom: moderateScale(24, defaultScale),
    },
    secondaryTitle: {
      fontSize: moderateScale(14, defaultScale),
      marginBottom: moderateScale(24, defaultScale),
    },
    btnContainer: {
      flexDirection: 'row',
    },
    primaryBtnContainer: {
      justifyContent: 'center',
      alignItems: 'center',
      flex: 0.5,
      marginRight: moderateScale(6, defaultScale),
    },
    primaryBtnContainerFullWidth: {
      justifyContent: 'center',
      flex: 0.5,
      marginRight: moderateScale(6, defaultScale),
    },
    primaryBtn: {
      justifyContent: 'center',
      alignItems: 'center',
      paddingVertical: 2,
    },
    secondaryBtnContainer: {
      flex: !props?.showSecondaryButton ? 0.5 : 1,
      marginLeft: !props?.showSecondaryButton ? 6 : 0,
    },
  });
export default withTheme(TAlert);