import Hyperlink from "../utils/Hyperlink";
import * as rsssl_api from "../utils/api";
import useFields from "./FieldsData";
import Icon from "../utils/Icon";
import {useState} from "@wordpress/element";
/**
* Render a help notice in the sidebar
*/
const Button = (props) => {
const {addHelpNotice} = useFields();
const [processing, setProcessing] = useState(false);
const {fields} = useFields();
const onClickHandler = async (action) => {
let data = {};
setProcessing(true);
data.fields = fields;
await rsssl_api.doAction(action, data).then((response) => {
let label = response.success ? 'success' : 'warning';
let title = response.title;
let text = response.message;
setProcessing(false);
addHelpNotice(props.field.id, label, text, title, false);
});
}
let is_disabled = !!props.field.disabled;
return (
<>
{ props.field.url &&
<Hyperlink className={"button button-default"} disabled={is_disabled} text={props.field.button_text} url={props.field.url}/>
}
{ props.field.action &&
<button onClick={ () => onClickHandler( props.field.action ) } className="button button-default" disabled={is_disabled}>
{props.field.button_text}
{processing && <Icon name = "loading" color = 'grey' />}
</button>
}
</>
);
}
export default Button