// @flow
/**
 * Created by steve on 11/09/15.
 */
import React from "react";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";
import { withStyles } from "@material-ui/core/styles";
import type { Localization } from "./types";

const styles = theme => ({
    root: {
        marginTop: theme.spacing.unit
    },
    fields: {
        marginLeft: theme.spacing.unit
    }
});

type Props = {
    form: any,
    mapper: any,
    builder: any,
    model: any,
    onChange: any,
    classes: any,
    localization: Localization
};

const FieldSet = ({
    form,
    mapper,
    builder,
    model,
    onChange,
    classes,
    localization: { getLocalizedString }
}: Props) => {
    const forms = form.items.map((f, index) =>
        builder(f, model, index, mapper, onChange, builder)
    );

    return (
        <FormControl component="fieldset" className={classes.root}>
            <FormLabel component="legend" required={form.required}>
                {form.title && getLocalizedString(form.title)}
            </FormLabel>
            <div className={classes.fields}>{forms}</div>
        </FormControl>
    );
};

export default withStyles(styles)(FieldSet);

@@ -879,16 +879,28 @@
 mControl
+%0A           
  compone
@@ -912,16 +912,28 @@
 ieldset%22
+%0A           
  classNa
@@ -949,16 +949,56 @@
 es.root%7D
+%0A            style=%7Bform.style%7D%0A        
 %3E%0A      

add form.style