import React from 'react';
import { Form, Button, Input } from 'UI';
import styles from './webhookForm.module.css';
import { useStore } from 'App/mstore'
import { observer } from 'mobx-react-lite'

function WebhookForm(props) {
    const { settingsStore } = useStore()
    const { webhookInst: webhook, hooksLoading: loading, saveWebhook, editWebhook } = settingsStore
    const write = ({ target: { value, name } }) => editWebhook({ [name]: value });

    const save = () => {
        saveWebhook(webhook).then(() => {
            props.onClose();
        });
    };


    return (
        <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
            <h3 className="p-5 text-2xl">{webhook.exists() ? 'Update' : 'Add'} Webhook</h3>
            <Form className={styles.wrapper}>
                <Form.Field>
                    <label>{'Name'}</label>
                    <Input
                        name="name"
                        value={webhook.name}
                        onChange={write}
                        placeholder="Name"
                    />
                </Form.Field>

                <Form.Field>
                    <label>{'Endpoint'}</label>
                    <Input
                        name="endpoint"
                        value={webhook.endpoint}
                        onChange={write}
                        placeholder="Endpoint"
                    />
                </Form.Field>

                <Form.Field>
                    <label>{'Auth Header (optional)'}</label>
                    <Input
                        name="authHeader"
                        value={webhook.authHeader}
                        onChange={write}
                        placeholder="Auth Header"
                    />
                </Form.Field>

                <div className="flex justify-between">
                    <div className="flex items-center">
                        <Button
                            onClick={save}
                            disabled={!webhook.validate()}
                            loading={loading}
                            variant="primary"
                            className="float-left mr-2"
                        >
                            {webhook.exists() ? 'Update' : 'Add'}
                        </Button>
                        {webhook.exists() && <Button onClick={props.onClose}>{'Cancel'}</Button>}
                    </div>
                    {webhook.exists() &&
                        <Button icon="trash" variant="text" onClick={() => props.onDelete(webhook.webhookId)}></Button>}
                </div>
            </Form>
        </div>
    );
}

export default observer(WebhookForm);