// Progress component
// props:
//   - value: number
//   - style: object
//   - barStyle: object
//   - disabled: boolean
//   - disabledStyle: object
//   - disabledBarStyle: object

import React from 'react'
import { View, StyleSheet } from 'react-native'
import { colors } from '../theme'
import Text from './Text'

const Progress = ({
  value = 0,
  min = 0,
  max = 100,
  style,
  barStyle,
  disabled,
  disabledStyle,
  disabledBarStyle,
  label,
}) => {
  const styles = StyleSheet.create({
    progress: {
      width: '100%',
      height: 12,
      backgroundColor: '#f0f0f0',
      borderRadius: 10,
    },
    bar: {
      height: '100%',
      backgroundColor: '#000',
      borderRadius: 10,
      width: `${value}%`,
    },
    disabled: {
      opacity: 0.5,
    },
  })

  // return when value reaches max
  if (value >= max) return null
  return (
    <>
      <View style={[styles.progress, style]}>
        <View
          style={[
            styles.bar,
            barStyle,
            disabled && styles.disabled,
            disabled && disabledBarStyle,
          ]}
        />
      </View>
      <Text color={colors.primary}>{label === 'bottom' && `${value}%`}</Text>
    </>
  )
}

export default Progress