import React, { FC, useContext, useMemo } from 'react';
import { View } from 'react-native';
import { DownTail, UpTail } from './Shape';
import styles from './styles';
import { BadgeRibbonProps } from './types';
import { ApplicationContext, MiniAppContext } from '../Context';
import { Text } from '../Text';
import { Colors } from '../Consts';
import { Image } from '../Image';

const BadgeRibbon: FC<BadgeRibbonProps> = ({
  position = 'top_right',
  label = 'Label',
  isRound = false,
  style = {},
}) => {
  const { theme } = useContext(ApplicationContext);
  const context = useContext<any>(MiniAppContext);
  const isRight = position === 'top_right' || position === 'bottom_right';
  const isUpTail = position === 'bottom_left' || position === 'top_right';

  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

  const ribbonRotate = useMemo(() => (isRight ? '180deg' : '0deg'), [isRight]);
  const textRotate = ribbonRotate;
  const textMargin = useMemo(() => (isUpTail ? 4 : 0), [isUpTail]);
  const skewMargin = textMargin;

  const ribbonTransform = useMemo(
    () => [{ rotateZ: ribbonRotate }],
    [ribbonRotate],
  );
  const textTransform = useMemo(() => [{ rotateZ: textRotate }], [textRotate]);

  const ribbonTail = isUpTail ? <UpTail /> : <DownTail />;
  const renderRoundContent = () => (
    <View
      collapsable={false}
      style={[
        styles.ribbonContent,
        {
          backgroundColor: theme.colors.warning.primary,
          marginTop: textMargin,
        },
      ]}
    >
      <View
        collapsable={false}
        style={{ transform: textTransform, marginVertical: -2 }}
      >
        <Text
          style={styles.ribbonLabel}
          color={Colors.black_01}
          typography="label_xs_medium"
        >
          {label}
        </Text>
      </View>
    </View>
  );

  const renderSkewContent = () => (
    <View style={{ flexDirection: 'row', marginTop: skewMargin }}>
      <View
        collapsable={false}
        style={[
          styles.ribbonSkewContent,
          { backgroundColor: theme.colors.warning.primary },
        ]}
      >
        <View
          collapsable={false}
          style={{ transform: textTransform, marginVertical: -2 }}
        >
          <Text
            style={styles.ribbonLabel}
            color={Colors.black_01}
            typography="label_xs_medium"
          >
            {label}
          </Text>
        </View>
      </View>
      <Image
        source={{
          uri: 'https://static.momocdn.net/app/img/kits/utils/Tail_4x.png',
        }}
        style={styles.skew}
      />
    </View>
  );

  const content = isRound ? renderRoundContent() : renderSkewContent();

  return (
    <View
      collapsable={false}
      key={isRight ? 'right' : 'left'}
      style={[
        styles.ribbon,
        style,
        { transform: ribbonTransform },
        showBaseLineDebug && styles.debugBaseLine,
      ]}
    >
      {ribbonTail}
      {content}
    </View>
  );
};

export default BadgeRibbon;