import React from 'react';
import { TouchableOpacity, Text, StyleSheet, PixelRatio, StyleProp, ViewStyle, TextStyle } from 'react-native';
import { SWIFT_BYTE_COLOURS } from '../../../constants';
import AntDesign from 'react-native-vector-icons/AntDesign';

interface ButtonProps {
    text: string;
    type: "primary" | "secondary";
    size?: "small" | "normal" | "medium" | "large"
    onPress: () => void;
    disabled?: boolean;
    plus?: boolean;
    buttonStyle?:StyleProp<ViewStyle>
    textStyle?: StyleProp<TextStyle>
}

/**
 * Standard SwiftByte button component.
 *
 * @param props - The props for the Button component.
 * @returns The rendered Button component.
 */
export const Button = (props: ButtonProps) => {
    
    const size = props.size || "normal";
    
    const baseFontSize = PixelRatio.getFontScale() * 16;
    const fontSize = size === "small" ? baseFontSize * 0.8 : size === "normal" ? baseFontSize : size === "medium" ? baseFontSize * 1.1 : baseFontSize * 1.2;

    return (
        <TouchableOpacity style={
            [
                styles.button,
                {
                    backgroundColor: props.type === "primary" ? SWIFT_BYTE_COLOURS.YELLOW : SWIFT_BYTE_COLOURS.GREEN,

                    paddingLeft: fontSize*5,
                    paddingRight: fontSize*5,
                    paddingTop: fontSize,
                    paddingBottom: fontSize,

                    opacity: props.disabled ? 0.5 : 1,
                },
                props.buttonStyle
            ]
        }
            onPress={props.onPress} disabled={props.disabled}>
            {props.plus && <AntDesign name="plus" size={fontSize} color={props.type === "primary" ? SWIFT_BYTE_COLOURS.GREEN : SWIFT_BYTE_COLOURS.YELLOW} style={{marginRight:10}}/>}
            <Text style={
                [
                    styles.buttonText,
                    {
                        color:  props.type === "primary" ? SWIFT_BYTE_COLOURS.GREEN : SWIFT_BYTE_COLOURS.YELLOW,
                        fontSize: fontSize
                    },
                    props.textStyle
                ]
            }>{props.text}</Text>
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create({
    button: {
        borderRadius: 50,
        alignItems: 'center',
        justifyContent: 'center',
        marginVertical: 10,
        flexDirection: 'row',
    },
    buttonText: {
        fontSize: 16,
        fontWeight: 'bold',
    },
});