/* eslint react-native/no-inline-styles: off */

import * as React from "react";
import { View, ViewStyle } from "react-native";
import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";

import { useFillInPercent } from "./hooks/useFillInPercent";

type Props = {
  style: ViewStyle;
  containerStyles: ViewStyle;
  hideUnwatched: boolean;
  item: ZappEntry;
};

const ProgressBar = ({
  style,
  containerStyles,
  hideUnwatched,
  item,
}: Props) => {
  const fillInPercent = useFillInPercent(item);
  const isRTL = useIsRTL();

  if (hideUnwatched && fillInPercent <= 0) {
    return null;
  }

  return (
    <View style={containerStyles}>
      <View
        style={{
          ...style,
          width: `${fillInPercent}%`,
          alignSelf: isRTL ? "flex-end" : "flex-start",
        }}
      />
    </View>
  );
};

export default ProgressBar;