import { Button, View, Text } from "@tarojs/components";
import './Buttons.scss'
import { ButtonType, ComponentStatus } from "../../utils/types";

import { Button as RNButton } from 'react-native';



/*
export default function Buttons(props: { title: string, type?: ButtonType, status?: ComponentStatus,onClick?:()=>void,style?:any }) {
    
    const myStyle = props.status == ComponentStatus.disable ? { opacity: 0.4 } : {}
    return (
        <View style={{...myStyle}}>
            <Button className={props.type == ButtonType.outline ? 'outline_btn' : 'btn'} style={{...props.style}} onClick={props.onClick}>{props.title}</Button>
        </View>

    )
}*/

export default function Buttons(props: {
    title: string,
    type?: ButtonType,
    className?:any,
    onClick: () => void,
    disabled?: boolean,
    lowLight?: boolean,
    openType?: string,
    btnStyle?: any,
}) {

    function onClick() {
        if (props.disabled) return
        props.onClick()
    }


    var mainClass = 'elevated'
    var textClass = 'elevated_text'

    if (props.type == ButtonType.text) {
        mainClass = 'texted'
        
        return <View style={{ opacity: (props.lowLight || props.disabled) ? 0.4 : 1 }} onClick={onClick}>
            <Text
                style={{
                    ...props.btnStyle,
                    fontWeight:500,
                }} className={props.className?props.className:''}>{props.title}</Text>
        </View>
    }

    if (props.type == ButtonType.outline) {
        mainClass = 'outlined'
        textClass = 'outlined_text'

        return (
            <View className={mainClass} style={{ ...props.btnStyle, opacity: props.lowLight ? 0.4 : 1 }} onClick={onClick}>
                <Text

                    style={{
                        color: props.btnStyle.color,
                        fontSize: props.btnStyle.fontSize,
                        fontWeight:500,
                        marginBottom:2
                    }}>{props.title}</Text>
            </View>
        )
    }
    else {
        mainClass = 'puretext'
        textClass = 'puretext_text'
    }
    return (
        <View className={mainClass} style={{ ...props.btnStyle, opacity: props.lowLight ? 0.4 : 1  }} onClick={onClick}>
            <Text
                // onClick={onClick}
                style={{
                    color: props.btnStyle.color,
                    fontSize: props.btnStyle.fontSize,
                    fontWeight:500,
                    marginBottom:2
                }}>{props.title}</Text>
        </View>
        // <View  onClick={onClick}>
        //     <Text 
        //         style={{
        //             height: props.btnStyle.height,
        //             lineHeight: props.btnStyle.height,
        //             color: props.btnStyle.color,
        //             fontSize: props.btnStyle.fontSize
        //         }}>{props.title}</Text>
        // </View>
    )
}