import React from 'react';
import { Button as NativeBaseButton, IButtonProps } from 'native-base';
import LoadingIcon from '../../../images/loading.icon';
import { AnimatePresence, MotiView } from 'moti';
import { Easing } from 'react-native-reanimated';

type NoGhost = {
    variant: 'primary' | 'secondary',
    size: 'lg' | 'md'
}

type Ghost = {
    variant: 'ghost',
    size: 'lg'
}

type ButtonProps = (Ghost | NoGhost) & Omit<IButtonProps, 'variant' | 'size'>;

export default function Button(props: ButtonProps) {
    let { _text, _pressed, borderColor } = generateConditionalProps(props);

    function renderLoading() {
        return <MotiView
            from={{
                rotate: "0deg",
            }}
            animate={{
                rotate: "360deg",
            }}
            transition={{
                loop: true,
                repeatReverse: false,
                easing: Easing.linear,
                type: 'timing',
                duration: 1700,
                delay: 0,
            }}
        >
            <LoadingIcon />
        </MotiView>
    }
    return <NativeBaseButton spinner={renderLoading()} _text={_text} _pressed={_pressed} borderColor={borderColor} {...props}>{props.children}</NativeBaseButton>
}

Button.defaultProps = {
    variant: "primary",
    size: "lg"
}

function generateConditionalProps(props: ButtonProps) {
    let borderColor = props.borderColor;
    let _text = props._text;
    let _pressed = props._pressed;

    if (props.variant === 'secondary' && props.size === "md") {
        if (props.isDisabled || props.disabled) {
            borderColor = "mini_text_gray";
        }

        _pressed = {
            bgColor: "mini_focused_secondary_blue",
        };
    }

    if (props.variant === 'secondary' && props.size === "lg") {
        if (props.isDisabled || props.disabled) {
            borderColor = "mini_disabled_blue";
        }

        _pressed = {
            bgColor: "mini_blue",
            borderColor: "mini_blue",
        };
    }

    if (props.variant === 'primary' && props.size === "lg") {
        props.py = "3";
    }

    if (props.variant === 'ghost') {
        _text = {
            color: props.disabled || props.isDisabled ? "mini_text_gray" : "mini_white"
        };
    }
    return { _text, _pressed, borderColor };
}