import { type FC } from 'react';
import { StyleSheet } from 'react-native';
import { moderateScale } from 'react-native-size-matters';
import { defaultScale } from '../../utils/Common';
import AImage from '../TImage/TImage';
import TTypography from '../TTypography/TTypography';
import {
  TextAlignment,
  TypographyVariant,
} from '../TTypography/TTypographyEnum';
import { withTheme, useTheme } from '../../core/theming';
import type { Theme } from '../../utils/types';

interface Prop {
  source?: object;
  sourceUri?: string;
  size?: number;
  backgroundColor?: string;
  textColor?: string;
  resizeMode?: any;
  marginTop?: number;
  marginRight?: number;
  marginBottom?: number;
  marginLeft?: number;
  cache?: any;
  label?: string;
  textVariant?: TypographyVariant;
  fontSize?: number;
  borderRadius?: number;
  theme: Theme;
}

const defaultSize = 64;
const defaultMargin = 0;

const TAvatar: FC<Prop> = ({
  source,
  sourceUri,
  size,
  backgroundColor,
  textColor,
  resizeMode,
  marginTop,
  marginRight,
  marginBottom,
  marginLeft,
  cache,
  label,
  textVariant,
  fontSize,
  borderRadius,
}): any => {
  const radiusValue =
    borderRadius !== undefined ? borderRadius : defaultSize / 2;

  const { colors } = useTheme();
  const bgColor = backgroundColor ? backgroundColor : colors.primary;
  const txtColor = textColor ? textColor : colors.textColor;

  return (
    <>
      {label && (
        <TTypography
          children={label}
          textAlign={TextAlignment.Center}
          variant={textVariant}
          fontSize={fontSize}
          color={txtColor}
          style={{
            ...styles.labelStyle,
            lineHeight: size || defaultSize,
            width: size || defaultSize,
            height: size || defaultSize,
            borderRadius: radiusValue,
            backgroundColor: bgColor || colors.lightgrey,
            marginTop: moderateScale(marginTop || defaultMargin, defaultScale),
            marginRight: moderateScale(
              marginRight || defaultMargin,
              defaultScale
            ),
            marginBottom: moderateScale(
              marginBottom || defaultMargin,
              defaultScale
            ),
            marginLeft: moderateScale(
              marginLeft || defaultMargin,
              defaultScale
            ),
          }}
        />
      )}
      {sourceUri && (
        <AImage
          sourceUri={sourceUri}
          width={size || defaultSize}
          height={size || defaultSize}
          backgroundColor={backgroundColor}
          resizeMode={resizeMode}
          marginTop={marginTop}
          marginRight={marginRight}
          marginBottom={marginBottom}
          marginLeft={marginLeft}
          cache={cache}
          borderRadius={radiusValue}
        />
      )}
      {source && (
        <AImage
          source={source}
          width={size || defaultSize}
          height={size || defaultSize}
          backgroundColor={backgroundColor}
          resizeMode={resizeMode}
          marginTop={marginTop}
          marginRight={marginRight}
          marginBottom={marginBottom}
          marginLeft={marginLeft}
          borderRadius={radiusValue}
        />
      )}
    </>
  );
};

const styles = StyleSheet.create({
  labelStyle: {
    overflow: 'hidden',
  },
});

export default withTheme(TAvatar);