import React from 'react';
import { View, StyleSheet, ViewStyle, TextStyle } from 'react-native';
import { useStyles } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { LLText } from '../LLText';

export type LLCheerMeterWidgetCheerCountStyles = {
  cheerCountContainer: ViewStyle;
  cheerCountText: TextStyle;
};

export type LLCheerMeterWidgetCheerCountProps =
  ComponentStyleProp<LLCheerMeterWidgetCheerCountStyles> & {
    totalCheerCount: number;
  };

export function LLCheerMeterWidgetCheerCount({
  totalCheerCount,
  styles: stylesProp,
}: LLCheerMeterWidgetCheerCountProps) {
  const styles = useStyles({
    componentStylesFn: getCheerMeterWidgetTotalCountStyles,
    stylesProp,
  });

  return (
    <View style={styles.cheerCountContainer}>
      <LLText style={styles.cheerCountText}>{totalCheerCount}</LLText>
    </View>
  );
}

const getCheerMeterWidgetTotalCountStyles: LLComponentStyleFn<
  LLCheerMeterWidgetCheerCountStyles
> = ({ theme }) =>
  StyleSheet.create({
    cheerCountContainer: {
      position: 'absolute',
      left: '45%',
      height: '100%',
      justifyContent: 'center',
      alignItems: 'center',
    },
    cheerCountText: {
      fontSize: 18,
      color: theme.text,
    },
  });