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

export type LLWidgetOptionResultBarStyles = {
  resultBarContainer: ViewStyle;
  resultBarView: ViewStyle;
};

export type LLWidgetOptionResultBarProps =
  ComponentStyleProp<LLWidgetOptionResultBarStyles> & {
    valueInPercent: number;
  };

export function LLWidgetOptionResultBar({
  valueInPercent,
  styles: stylesProp,
}: LLWidgetOptionResultBarProps) {
  const styles = useStyles({
    componentStylesFn: getWidgetOptionResultBarStyles,
    stylesProp,
  });
  return (
    <View style={styles.resultBarContainer}>
      <View
        style={[{ width: `${valueInPercent}%` }, styles.resultBarView]}
      ></View>
    </View>
  );
}

const getWidgetOptionResultBarStyles: LLComponentStyleFn<LLWidgetOptionResultBarStyles> =
  ({ theme }) =>
    StyleSheet.create({
      resultBarContainer: {
        display: 'flex',
        width: '100%',
        height: 3,
        marginTop: 7,
      },
      resultBarView: {
        height: '100%',
        backgroundColor: theme.text,
      },
    });