import {View, Text} from "react-native";
import {LinearGradient} from "expo-linear-gradient";

const Card = {
    Block: ({variant, image, children, tooltip}) => {

        const variantSelection = {
            default: ["rgba(100, 101, 103, 0.20)", "rgba(100, 101, 103, 0.0)"],
            success: ["rgba(26, 117, 18, 0.20)", "rgba(26, 117, 18, 0.0)"],
            danger: ['rgba(210, 145, 21, 0.20)', 'rgba(210, 145, 21, 0.0)'],
            error: ["rgba(229,53,45, 0.20)", "rgba(229,53,45, 0.0)"]
        }

        const AddData = () => {
            if (!!image && !!tooltip) {
                return (<View style={{width: "10%"}}>
                    {image}
                </View>)
            }
            if (!!image) {

                return  <View style={{width: "10%"}}>
                    {image}
                </View>
            }

            // if (!!tooltip) {
            //     return  <View style={{width: "10%"}}>
            //     </View>
            // }

            return null

        }

        return (
            <View style={{marginBottom: 16}}>
                <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}}
                                colors={variant ? variantSelection[variant] : variantSelection.default}
                                style={{
                                    padding: 16,
                                    display: "flex",
                                    flexDirection: "row",
                                    alignItems: "center",
                                    justifyContent: "space-between"
                                }}
                >
                    {!!tooltip && tooltip}
                    <View style={{width: !!image ? "80%" : "100%"}}>

                        {children}
                    </View>

                    <AddData />


                </LinearGradient>

            </View>
        )

    },

    Header: ({children}) => {
        return (
            <View style={{marginBottom: 20}}>
                {children}
            </View>
        )
    },

    Body: ({children}) => {
        return (
            <View>
                {children}
            </View>
        )
    },

    TitleNumber: ({children}) => {
      return (<>
          <Text style={{fontSize: 16, fontWeight: "bold", marginBottom: 10, color: "#0F0F0F"}}>{children}</Text>
      </>)
    },

    TitleHeader: ({children}) => {
        return (
            <>
                <Text style={{fontSize: 20, fontWeight: "bold", marginBottom: 10, color: "#0F0F0F"}}>{children}</Text>
            </>
        )
    },

    TextSmall: ({children, style, ...props}) => {
        return (
            <>
                <Text style={{
                    fontSize: 16,
                    fontWeight: "bold",
                    // marginBottom: 10,
                    color: "rgba(16,17,17,0.4)",
                    ...style
                }} {...props}>{children}</Text>
            </>

        )

    },

    TitleExtra: ({children}) => {
        return (
            <>
                <Text style={{
                    fontSize: 32,
                    fontWeight: "bold",
                    marginBottom: 10,
                    color: "rgba(16,17,17,0.4)"
                }}>{children}</Text>
            </>
        )
    }

}

export default Card