import React from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';

import { Paper, Button } from '@material-ui/core';
import { entityProperties } from '../../data/appData';
import TextEditor from '../form-items/TextEditor';
import { getMetaValue, CustomizedComponent } from '../../utils/utils';
import appConstants from '../../appConstants';
import SelectEditor from '../form-items/SelectEditor';

export default ({ entityId, data, history, isNew = false }) => {
    const schema = entityProperties(entityId).schema;
    const formRef = React.useRef();

    React.useEffect(() => {
        if (formRef.current) formRef.current.resetForm();
    }, [entityId, data]);

    return (
        <CustomizedComponent entityName={entityId} customizationName={'form'} renderProperties={data}>
            <Paper css={{ maxWidth: 600 }}>
                <Formik
                    ref={formRef}
                    validationSchema={Yup.object().shape(schema)}
                    initialValues={
                        data
                            ? data
                            : Yup.object()
                                  .shape(schema)
                                  .cast()
                    }
                    onSubmit={async (values, actions) => {
                        try {
                            (await isNew)
                                ? appConstants.connector.createItem(entityId, values)
                                : appConstants.connector.updateItem(entityId, values);
                            history.push(`/${entityId}`);
                        } catch (e) {
                            console.log(e);
                        }
                    }}
                    render={() => (
                        <Form>
                            <div css={{ display: 'flex', flexDirection: 'column' }}>
                                {Object.entries(entityProperties(entityId).schema)
                                    .filter(([, propertyData]) => !getMetaValue(propertyData, 'id'))
                                    .map(([propertyId, propertyData]) =>
                                        getMetaValue(propertyData, 'select') ? (
                                            <SelectEditor key={propertyId} propertyData={propertyData} propertyId={propertyId} />
                                        ) : (
                                            <TextEditor key={propertyId} propertyData={propertyData} propertyId={propertyId} />
                                        )
                                    )}
                                <div css={{ display: 'flex', padding: 16 }}>
                                    <Button type="submit" css={{ marginRight: 8 }} variant="contained" color="primary">
                                        Save
                                    </Button>
                                    <Button variant="text">Cancel</Button>
                                </div>
                            </div>
                        </Form>
                    )}
                />
            </Paper>
        </CustomizedComponent>
    );
};