import React, {Component} from 'react'
import styled from 'styled-components'
import FieldContent from './field'
import auto_bind from 'common/auto_bind'

export default class Fields extends Component {
  constructor(props) {
    super(props)
    auto_bind(this)
  }

  render_field(field) {
    return (
      <Field key={field.id}>
        <FieldContent {...field} />
      </Field>
    )
  }

  render() {
    let {children: fields, on_create} = this.props
    if (on_create) {
      fields = [
        ...fields,
        {id: "new_field", category: "new_field", on_create},
      ]
    }
    return (
      <Container>
        {fields.map(this.render_field)}
      </Container>
    )
  }
}

Fields.defaultProps = {
  editable: true,
  edit_mode: 'hover',
}

const Container = styled.div`
  position: relative;
  display: flex;
  flex-wrap: wrap;
`

const Field = styled.div`
  width: 33%;
`