import React from "react";
import { View, Text, ViewStyle, TextStyle } from "react-native";
import { directionStyles } from "./helpers";

type Props = {
  config: {
    titleColor: string;
    summaryColor: string;
    backgroundColor: string;
    backgroundImage: string;
    isRTL: boolean;
    runTimeFontFamily: string;
    runTimeFontSize: number;
  };
  start_time?: string;
  end_time?: string;
};

const containerStyles = ({ isRTL }) => ({
  width: 600,
  height: 40,
  justifyContent: directionStyles(isRTL)
    .justifyContent as ViewStyle["justifyContent"],
});

const textStyles = ({
  summaryColor,
  runTimeFontFamily,
  runTimeFontSize,
  isRTL,
}) => ({
  color: summaryColor,
  opacity: 0.8,
  fontSize: runTimeFontSize ? Number(runTimeFontSize) : 20,
  fontFamily: runTimeFontFamily || null,
  ...directionStyles(isRTL),
});

export function Runtime({ start_time, end_time, config }: Props) {
  return (
    <View style={containerStyles({ isRTL: config.isRTL })}>
      {!!start_time && !!end_time && (
        <Text
          style={textStyles(config) as TextStyle}
        >{`${start_time} - ${end_time}`}</Text>
      )}
    </View>
  );
}