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

interface Prop {
  label: string;
  selected: boolean;
  disable?: boolean;
  selectedRadio?: (props: { size: number }) => React.ReactNode;
  unselectedRadio?: (props: { size: number }) => React.ReactNode;
  boxStyle?: StyleProp<ViewStyle>;
  selectedIconColor?: string;
  unselectedIconColor?: string;
  theme: Theme;
  textvariant?: TypographyVariant;
}
const BOX_SIZE = moderateScale(20, defaultScale);
const TRadioButton: FC<Prop> = ({
  selected,
  label,
  disable,
  selectedRadio,
  unselectedRadio,
  boxStyle,
  selectedIconColor,
  unselectedIconColor,
  textvariant = TypographyVariant.PRIMARY,
}): any => {
  const stylesWithProp = styles();
  return (
    <View
      style={
        disable ? stylesWithProp.containerDisabled : stylesWithProp.container
      }
    >
      {selected ? (
        selectedRadio ? (
          <View style={[stylesWithProp.box, boxStyle]}>
            {selectedRadio({
              size: BOX_SIZE,
            })}
          </View>
        ) : (
          <IconSVG height={20} name="selectedradio" fill={selectedIconColor} />
        )
      ) : unselectedRadio ? (
        <View style={[stylesWithProp.box, boxStyle]}>
          {unselectedRadio({
            size: BOX_SIZE,
          })}
        </View>
      ) : (
        <IconSVG
          height={20}
          name="unselectedradio"
          fill={unselectedIconColor}
        />
      )}
      <TTypography
        children={label}
        variant={textvariant}
        style={stylesWithProp.radioButtonLabel}
      />
    </View>
  );
};

const styles = () =>
  StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      margin: moderateScale(5, defaultScale),
    },
    containerDisabled: {
      flexDirection: 'row',
      alignItems: 'center',
      margin: moderateScale(5, defaultScale),
      opacity: 0.5,
    },
    radioButtonLabel: {
      fontSize: moderateScale(16, defaultScale),
      marginHorizontal: moderateScale(8, defaultScale),
    },
    box: {
      justifyContent: 'center',
      marginHorizontal: moderateScale(8, defaultScale),
      height: BOX_SIZE,
      width: BOX_SIZE,
    },
  });

export default withTheme(TRadioButton);