import {StyleSheet} from 'react-native';
import {Colors, Radius, Spacing} from '../Consts';
import {scaleSize} from '../Text';

const DOT_SIZE = 16;

const DOT_SMALL_SIZE = 10;

export default StyleSheet.create({
  badge: {
    paddingHorizontal: Spacing.XS,
    borderRadius: Radius.M,
    justifyContent: 'center',
    alignItems: 'center',
    height: scaleSize(16) - 2,
    minWidth: scaleSize(16) - 2,
    flexDirection: 'row',
    alignSelf: 'baseline',
  },
  badgeContainer: {
    borderRadius: Radius.M,
    justifyContent: 'center',
    alignItems: 'center',
    height: scaleSize(16),
    minWidth: scaleSize(16),
    flexDirection: 'row',
    borderWidth: 1,
    borderColor: Colors.black_01,
    backgroundColor: 'transparent',
    alignSelf: 'baseline',
  },
  dotAnimationContainer: {
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'center',
  },
  dot: {
    width: DOT_SIZE - 2,
    height: DOT_SIZE - 2,
    backgroundColor: Colors.red_03,
    borderRadius: DOT_SIZE / 2,
  },
  dotSmall: {
    width: DOT_SMALL_SIZE - 2,
    height: DOT_SMALL_SIZE - 2,
    backgroundColor: Colors.red_03,
    borderRadius: DOT_SMALL_SIZE / 2,
  },
  dotContainer: {
    width: DOT_SIZE,
    height: DOT_SIZE,
    borderWidth: 1,
    borderColor: Colors.black_01,
    borderRadius: DOT_SIZE / 2,
    backgroundColor: 'transparent',
  },
  dotSmallContainer: {
    width: DOT_SMALL_SIZE,
    height: DOT_SMALL_SIZE,
    borderWidth: 1,
    borderColor: Colors.black_01,
    borderRadius: DOT_SIZE / 2,
    backgroundColor: 'transparent',
  },
  dotAnimation: {
    width: DOT_SIZE,
    height: DOT_SIZE,
    borderColor: Colors.black_01,
    backgroundColor: Colors.red_03,
    borderRadius: DOT_SIZE / 2,
    borderWidth: 0,
  },
  dotAnimationSmall: {
    width: DOT_SMALL_SIZE,
    height: DOT_SMALL_SIZE,
    borderColor: Colors.black_01,
    backgroundColor: Colors.red_03,
    borderRadius: DOT_SMALL_SIZE / 2,
    borderWidth: 0,
  },
  wave: {
    width: DOT_SIZE,
    height: DOT_SIZE,
    borderColor: Colors.black_01,
    backgroundColor: Colors.red_03,
    borderRadius: DOT_SIZE / 2,
    opacity: 0,
    position: 'absolute',
    borderWidth: 0,
  },
  waveSmall: {
    width: DOT_SMALL_SIZE,
    height: DOT_SMALL_SIZE,
    borderColor: Colors.black_01,
    backgroundColor: Colors.red_03,
    borderRadius: DOT_SMALL_SIZE / 2,
    borderWidth: 0,
    position: 'absolute',
  },
  ribbon: {
    alignSelf: 'baseline',
    flexDirection: 'row',
    height: 20,
    overflow: 'hidden',
  },
  ribbonContent: {
    height: 16,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomRightRadius: 12,
    borderTopRightRadius: 12,
    paddingRight: 6,
  },
  ribbonSkewContent: {
    height: 16,
    justifyContent: 'center',
    alignItems: 'center',
  },
  ribbonLabel: {
    color: Colors.black_01,
  },
  skew: {width: 8, height: 16},
  tail: {width: 5, height: 20},
  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
});