import * as React from 'react';
import { Box } from '@rebass/grid';
import { IStepConnectorForm } from '../../../common/catalogo-protocol';
import ConnectorOverview from './connectors-overview';

import GluonForm from '@quarks/gluon-form';
import { CommonRequestConfig } from '@quarks/gluon-form/lib/typings';
import { ContainerContext } from '../catalogo-context';
import { MessageType } from '@theia/core';

interface ConnectorFormRenderProps {
    stepForm: IStepConnectorForm;
    context: Object;
    onSubmit: (result: any) => void;
    onDone: (data: any) => void;
}

interface ConnectorFormRenderState {
}

export default class ConnectorFormRender extends React.Component<ConnectorFormRenderProps, ConnectorFormRenderState> {
    static contextType = ContainerContext;
    context!: React.ContextType<typeof ContainerContext>;
    
    constructor(props) {
        super(props);
        
    }

    private async request(req: CommonRequestConfig): Promise<any> {
        const request = this.context.service.commonRequest(req);
        request.catch(e => {
            console.error(e);
            this.context.service.logMessage({type: MessageType.Error, text: e});
        });

        return request;
    }

    private onSubmitResolved(data: any) {
        this.props.onSubmit(data);

        return Promise.resolve(true);
    }

    private async onSubmit(req: CommonRequestConfig): Promise<any> {
        if(req && req.base && req.endpoint) {
            
            // Se não for faz um request no endpoint especificado
            const request = this.context.service.commonRequest(req);

            request.then(value => {
                this.onSubmitResolved(value);
            }).catch(e => {
                console.error(e);
            });

            return request;

        } else {
            // Se for o ultimo step faz o Done
            if(this.props.stepForm.type === 'submit') {
                return this.props.onDone(req.data);
            } else {
                // Caso não tenha endpoint manda os dados pro context
                return this.onSubmitResolved(req);
            }
        }
    }

    render() {
        const { stepForm, context } = this.props;

        const ctx = {
            ...context,
            ...this.context.options
        }

        return (
            <Box p="1rem">
                {
                    stepForm && stepForm.content
                        ? <GluonForm
                            request={(request: CommonRequestConfig) => this.request(request)}
                            schema={stepForm.content}
                            context={ctx}
                            onSubmit={(request: CommonRequestConfig) => this.onSubmit(request)}
                            onValidate={(formData, errors) => errors}
                        />

                        : stepForm.type === 'overview'
                            ? <ConnectorOverview overview={stepForm}/>
                            : <h3>Error</h3>
                }
            </Box>
        );
    }
}