import React, {ReactNode} from "react";
import "./formbutton.scss";
import retry from "../../../assets/images/retry.svg";
import {toast} from "react-toastify";
import loading = toast.loading;
import Loader from "../Loader/Loader";

type FormButtonProps = {
    onClick?: () => void;
    buttonType?: "submit" | "button";
    disabled?: boolean;
    children: ReactNode[];
    className?: string
    loading?: boolean
};


const isSvg = (node: any) => {

    return node!.hasOwnProperty('type') && node!.type === 'img';
}

const FormButton = ({
                        onClick,
                        buttonType = 'submit',
                        disabled = false,
                        loading = false,
                        children,
                        className,
                    }: FormButtonProps) => {


    return (
        <button
            disabled={disabled}
            type={buttonType}
            onClick={() => onClick && onClick()}
            className={`form-button ${className} ${loading && 'loading'}`}
        >
            {
                loading && isSvg(children[0]) ?

                    <Loader color='white'/>
                    :
                    children[0]

            }
            <hr/>
            {
                loading && isSvg(children[1]) ?

                    <Loader color='white'/>
                    :
                    children[1]
            }

            {/*{!props.isDisabled && props.status == "enter" && (*/}
            {/*	<span className="enter ">*/}
            {/*		<img src={right_arrow_white} alt="right arrow white" />*/}
            {/*	</span>*/}
            {/*)}*/}


            {/*{!props.isDisabled && props.status == "next-step" && (*/}
            {/*	<span className="next-step ">*/}
            {/*		<img src={Yes} alt="yes" />*/}
            {/*	</span>*/}
            {/*)}*/}
            {/*{!props.isDisabled && props.status == "retry" && (*/}
            {/*	<span className="retry ">*/}
            {/*		<img src={retry} alt="retry" />*/}
            {/*	</span>*/}
            {/*)}*/}
            {/*{!props.isDisabled && props.status == "no" && (*/}
            {/*	<span className="no ">*/}
            {/*		<img src={No} alt="no" />*/}
            {/*	</span>*/}
            {/*)}*/}
            {/*{!props.isDisabled && props.status == "yes" && (*/}
            {/*	<span className="yes ">*/}
            {/*		<img src={Yes} alt="yes" />*/}
            {/*	</span>*/}
            {/*)}*/}
            {/*{!props.isDisabled && props.status == "activate-go" && (*/}
            {/*	<span className="activate-go ">*/}
            {/*		<img src={right_arrow_white} alt="right arrow white" />*/}
            {/*	</span>*/}
            {/*)}*/}
            {/*{props.isDisabled  &&(*/}
            {/*	<span>*/}
            {/*		<img src={YesDark} alt="yesdark" />*/}
            {/*	</span>*/}
            {/*)}*/}
            {/*{props.isDisabled  && (*/}
            {/*	<span>*/}
            {/*		<img src={right_arrow} alt="right arrow" />*/}
            {/*	</span>*/}
            {/*)}*/}
            {/*{!props.isDisabled && props.status == "loading" && <Loader color='white'/>}*/}

        </button>
    );
};

export default FormButton;