import {Skeleton, Text, useTheme} from 'native-base';
import {
  InterfaceTextProps,
  ITextProps,
} from 'native-base/lib/typescript/components/primitives/Text/types';
import {ColorSchemeType} from 'native-base/lib/typescript/components/types';
import {RefAttributes} from 'react';

export function TextSkeleton(
  props: {SkeletonProps: any} & JSX.IntrinsicAttributes &
    InterfaceTextProps<ITextProps> & {
      variant?: unknown;
      size?: unknown;
      colorScheme?: ColorSchemeType;
    } & RefAttributes<unknown>,
) {
  const defaultFontSize = 16;

  let fontSize = props.fontSize || defaultFontSize;
  const theme = useTheme();

  if ((theme.fontSizes as any)[fontSize as any] !== undefined) {
    fontSize = (theme.fontSizes as any)[fontSize as any];
  }
  if (typeof fontSize !== 'number') {
    fontSize = defaultFontSize;
  }

  if (props.children === undefined) {
    return (
      <Skeleton.Text
        marginY={fontSize / 2.5 + 'px'}
        {...props.SkeletonProps}
        startColor={props.color}
        opacity={0.4}></Skeleton.Text>
    );
  }

  return <Text fontSize={fontSize} {...props} />;
}
