import { PixelRatio, Pressable, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { SWIFT_BYTE_COLOURS } from '../../../constants'

interface RadioProps {
    active: boolean
    label?: string
    disabled?: boolean
}

export function Radio(props: RadioProps) {
    return (
        <View style={
            {
                flexDirection: "row",
                justifyContent: "center",
                alignItems: "center",
                margin: 5
            }
        }>
            <Pressable
                disabled={props.disabled}
                style={
                    {
                        borderRadius: 50,
                        borderWidth: 2,
                        borderColor: props.disabled ? SWIFT_BYTE_COLOURS.GRAY : props.active ? SWIFT_BYTE_COLOURS.YELLOW : SWIFT_BYTE_COLOURS.DARK_GRAY,
                        width: 30,
                        height: 30,
                        justifyContent: 'center',
                        alignItems: 'center'
                    }
                }>
                {
                    (props.active && !props.disabled) &&
                    <View style={
                        {
                            backgroundColor: SWIFT_BYTE_COLOURS.YELLOW,
                            width: "65%",
                            height: "65%",
                            borderRadius: 50
                        }
                    } />
                }
            </Pressable>
            {props.label &&
                <Text
                    style={{
                        fontSize: PixelRatio.getFontScale() * 16,
                        marginLeft: 10,
                        color: props.disabled ? SWIFT_BYTE_COLOURS.GRAY : "black"
                    }}
                >{props.label}</Text>}
        </View>
    )
}

const styles = StyleSheet.create({})