import * as React from 'react';
import * as _ from 'lodash';
import * as DefaultStyles from './style';
const loading = require('../../SVG/loading.svg')

export namespace LoadingButton {
    export interface Props {
        onClick: (event: any) => void;
        name: string;
        mode?: MODE;
        content: string;
        disableMouseOverStyles?: boolean;
        styles?: Styles;
        id?: string;
    }

    export interface State { }

    export interface Styles {
        Container?: any;
        Button?: any;
        Loading?: any;
        Failed?: any;
        Success?: any;
        Disabled?: any;
        LoadingImg?: any;
        Root?: any;
    }

};

export enum MODE {
    LOADING = 'loading',
    FAILED = 'failed',
    SUCCESS = 'success',
    DISABLED = 'disabled'
}

const LoadingButton = (props: LoadingButton.Props): JSX.Element => {
    const Styles: LoadingButton.Styles = _.merge(DefaultStyles, props.styles);

    const getButtonMode = (mode): JSX.Element => {
        switch (mode) {
            case MODE.LOADING:
                return (
                    <Styles.Loading disabled={true} data-testid={"loadingBtn"} id={props.id && props.id + '-loading'}><Styles.LoadingImg src={loading} /></Styles.Loading>
                )
            case MODE.SUCCESS:
                return (
                    <Styles.Success onClick={props.onClick} data-testid={"loadingBtn"} id={props.id && props.id + '-loading'} disableMouseOverStyles={props.disableMouseOverStyles} >{props.content}</Styles.Success>
                )
            case MODE.FAILED:
                return (
                    <Styles.Failed onClick={props.onClick} data-testid={"loadingBtn"} id={props.id && props.id + '-loading'} disableMouseOverStyles={props.disableMouseOverStyles}>{props.content}</Styles.Failed>
                )
            case MODE.DISABLED:
                return (
                    <Styles.Disabled disabled={true} onClick={props.onClick} id={props.id && props.id + '-loading'} data-testid={"loadingBtn"} >{props.content}</Styles.Disabled>
                )
            default:
                return (
                    <Styles.Button onClick={props.onClick} data-testid={"loadingBtn"} id={props.id && props.id + '-loading-btn'} disableMouseOverStyles={props.disableMouseOverStyles} >{props.content}</Styles.Button>
                )
        }

    }

    return (
        <Styles.Container name={props.name} id={props.id && props.id + '-loading-container'}>
            {getButtonMode(props.mode)}
        </Styles.Container>
    )
}

export default LoadingButton;