import * as React from 'react';
import VirtualizedSelect from 'react-virtualized-select';
import { withFormik } from 'formik';
import Yup from 'yup';

import 'react-select/dist/react-select.css';
import 'react-virtualized/styles.css';
import 'react-virtualized-select/styles.css';
import { Datasource } from '../../../Model/Datasource';
import { If } from '../../Utils/Helper/Helper';

const dataSourceType = [
    { label: 'MOM', value: 'MOM' },
    { label: 'MES', value: 'MES' },
];

interface Props {
    initialData: Datasource;
    submitHandler: (datasource: Datasource) => void;
}

const NewDatasourceForm = (props) => {
    const {
        values,
        touched,
        errors,
        isSubmitting,
        setFieldValue,
        handleSubmit,
        handleChange,
        handleBlur
    } = props;

    const _handleSelect = (selectDSChoice) => {
        try {
            setFieldValue('dataSourceType',  selectDSChoice.value);
        } catch (error) {
            // tslint:disable-next-line:no-console
            console.error(error);
        }

    };

    return(
      <form className="needs-validation was-validated p-5" onSubmit={handleSubmit}>

        <div className="form-group">
            <label>Data source type</label>
            <VirtualizedSelect
                name="imaginaryThingId"
                value={values.dataSourceType}
                options={dataSourceType}
                onChange={_handleSelect}
            />
        </div>

        <If cond={values.dataSourceType !== ''}>
            <div className="form-group">
                <label>Name</label>
                <input
                    className={`form-control`}
                    name="name"
                    type="text"
                    value={values.name}
                    onChange={handleChange}
                    onBlur={handleBlur}
                />
                {errors.name && touched.name && <div className="invalid-feedback">{errors.name}</div>}
            </div>

            <div className="form-group">
                <label>Url</label>
                <input
                    className={`form-control`}
                    name="url"
                    type="text"
                    value={values.url}
                    onChange={handleChange}
                    onBlur={handleBlur}
                />
                {errors.url && touched.url && <div className="invalid-feedback">{errors.url}</div>}
            </div>

            <div className="form-group">
                <label>Username</label>
                <input
                    className={`form-control`}
                    name="username"
                    type="text"
                    value={values.username}
                    onChange={handleChange}
                    onBlur={handleBlur}
                />
                {errors.username && touched.username && <div className="invalid-feedback">{errors.username}</div>}
            </div>

            <div className="form-group">
                <label>Password</label>
                <input
                    className={`form-control`}
                    name="password"
                    type="text"
                    value={values.password}
                    onChange={handleChange}
                    onBlur={handleBlur}
                />
                {errors.password && touched.password && <div className="invalid-feedback">{errors.password}</div>}
            </div>
        </If>

        <button type="submit" className="btn btn-outline-primary" disabled={isSubmitting}>
          {isSubmitting ? 'Please wait' : 'Submit'}
        </button>
      </form>
    );
};

export default withFormik({
    mapPropsToValues: (props: Props) => ({
      id: props.initialData.id,
      username: props.initialData.username,
      password: props.initialData.password,
      url: props.initialData.url,
      dataSourceType: props.initialData.dataSourceType,
    }),

    validationSchema: Yup.object().shape({
        username: Yup.string()
          .required('Username is required!'),
        dataSourceType: Yup.string()
          .required('dataSourceType is required!'),
    }),

    handleSubmit: (values, { setSubmitting }) => {
        // submit them do the parent component
        alert(JSON.stringify(values, null, 2));
    },
  })(NewDatasourceForm);