import * as React from 'react';
import { Form, Field, FormikProps, withFormik, getIn } from 'formik';
import { object, string } from 'yup';
import { Datasource } from '../../../Model/Datasource';
import { Col, Button, FormGroup, Label, } from 'reactstrap';

interface ErrorMessageProps {
    name: string;
}

const ErrorMessage = ({name}: ErrorMessageProps) => (
    <Field
        name={name}
        render={({form}) => {
            const error = getIn(form.errors, name);
            const touch = getIn(form.touched, name);
            return touch && error ? error : null;
        }}
    />
);

const InnerForm = (props: FormikProps<Datasource>) => {
    return(
    <Form>
         <FormGroup row={true}>
          <Label for="name" sm={2}>Name</Label>
          <Col sm={10}>
            <Field name={`name`}/>
            <ErrorMessage name={`name`}/>
          </Col>
        </FormGroup>

        <FormGroup row={true}>
          <Label for="url" sm={2}>URL</Label>
          <Col sm={10}>
            <Field name={`url`}/>
            <ErrorMessage name={`url`}/>
          </Col>
        </FormGroup>

        <FormGroup row={true}>
        <Label for="username" sm={2}>Username</Label>
        <Col sm={10}>
            <Field name={`username`}/>
            <ErrorMessage name={`username`}/>
        </Col>
        </FormGroup>

        <FormGroup row={true}>
        <Label for="password" sm={2}>Password</Label>
        <Col sm={10}>
            <Field name={`password`}/>
            <ErrorMessage name={`password`}/>
        </Col>
        </FormGroup>

        <FormGroup row={true}>
        <Label for="description" sm={2}>Description</Label>
        <Col sm={10}>
            <Field name={`description`}/>
            <ErrorMessage name={`description`}/>
        </Col>
        </FormGroup>

        <div>
            <Button type="submit">Submit</Button>
        </div>
    </Form>);
};

const NewDatasourceForm = withFormik({
    mapPropsToValues: (initialData): Datasource => ({
        id: '',
        name: '',
        url: '' ,
        username: '' ,
        password: '' ,
        description: ''
    }),
    validationSchema: object().shape({
        name: string().required('name required'),
        url: string().required('url required'),
        username: string().required('username required'),
        password: string().required('password required')
    }),
    handleSubmit: (values) => {
        alert(JSON.stringify(values));
    },
})(InnerForm);

export default NewDatasourceForm;