import React, { useState, useEffect } from "react";
import { Header, Message, Icon, Button, Table, Label, Segment, Modal, Dropdown } from 'semantic-ui-react'

import BigApiErrorMessage from "./BigApiErrorMessage.jsx";

const ButtonModal = (props) => {
    const [showModal, setShowModal] = useState(false);
    const [loading, setLoading] = useState(false);

    const onShowModal = async () => {
        setShowModal(true);
        if (props.onShowModal) {
            await props.onShowModal();
        }
    }

    const onCloseModal = (i, e) => {
        setShowModal(false);
    }

    const onConfirm = async (e) => {
        e.preventDefault();
        setLoading(true);

        // If closeImmediately is true, close the modal before processing
        if (props.closeImmediately) {
            setShowModal(false);
        }

        try {
            if (props.onConfirm) {
                await props.onConfirm();
            }
        } catch (e) {
            console.log(e.status);
            console.log(e.response.body);
            //this.setState({ error: e.response.body.message, loading: false });
            console.error(e);
        }
        setLoading(false);

        // If closeImmediately is false (default), close the modal after processing
        if (!props.closeImmediately) {
            setShowModal(false);
        }
    }

    const modal = (
        <Modal
            dimmer="blurring"
            closeOnEscape={true}
            closeOnDimmerClick={true}
            closeIcon
            onClose={onCloseModal}
            open={showModal}>
            <Header icon={props.modalIcon} content={props.text} />
            <Modal.Content>
                {props.error &&
                    <BigApiErrorMessage error={props.error} />
                }
                {props.children}
            </Modal.Content>
            <Modal.Actions>
                {props.cancel && <Button onClick={onCloseModal} color='red'><Icon name='remove' />Cancel</Button>}
                <Button color={props.color} loading={loading} disabled={props.confirmDisabled} onClick={onConfirm}>
                    <Icon name={props.icon} />{props.modalButtonText}
                </Button>
            </Modal.Actions>
        </Modal>
    );

    if (props.as && props.as === "dropdown") {
        return (
            <>
                <Dropdown.Item style={{ color: props.color || "black" }} loading={loading} onClick={onShowModal} icon={props.icon} color={props.color} size={props.size}>
                    {props.icon && <Icon name={props.icon} />}
                    {props.text}

                </Dropdown.Item>
                {modal}
            </>
        );
    } else {
        return (
            <>
                <Button loading={loading} disabled={props.disabled} onClick={onShowModal} color={props.color} size={props.size}>{props.icon && <Icon name={props.icon} />}{props.text}</Button>
                {modal}
            </>
        );
    }
}


export default ButtonModal;