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

interface CheckboxProps {
    checked: boolean
    onPress: () => void
    label?: string
    disabled?: boolean
}

/**
 * Renders a checkbox component. 
 * 
 *  > **Note**: The check icon does not render properly on storybook.
 *
 * @param {CheckboxProps} props - The props for the checkbox component.
 * @returns {JSX.Element} The rendered checkbox component.
 */
export function Checkbox(props: CheckboxProps) {
  return (
    <View style={
        {
            margin: 5,
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center"
        }
    }>
        <Pressable
            onPress={props.onPress}
            disabled={props.disabled}
            style={
                {
                    borderRadius: 5,
                    borderWidth: 2,
                    borderColor: props.disabled ? SWIFT_BYTE_COLOURS.GRAY : props.checked ? SWIFT_BYTE_COLOURS.YELLOW : SWIFT_BYTE_COLOURS.DARK_GRAY,
                    width: 30,
                    height: 30,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: props.disabled ? "white" : props.checked ? SWIFT_BYTE_COLOURS.YELLOW : "white"
                }
            }>
            {
                (props.checked && !props.disabled) &&
                <AntDesign name="check" size={20} color={"white"} />
            }
        </Pressable>
        {props.label &&
            <Text
                style={{
                    fontSize: 16,
                    marginLeft: 10,
                    color: props.disabled ? SWIFT_BYTE_COLOURS.GRAY : "black"
                }}
            >{props.label}</Text>}
    </View>
  )
}

const styles = StyleSheet.create({})