import React, {Component} from 'react'
import classNames from 'classnames/bind'
import FieldsTable from 'components/fields_table'
import Button from 'components/utils/button'
import store from 'common/store'
import auto_bind from 'common/auto_bind'

const cx = classNames.bind(require('../styles/fields_settings.scss'))

class FieldsSettings extends Component {
  constructor(props) {
    super(props)
    auto_bind(this)
  }

  static defaultProps = {
    options: []
  }

  render_table({header, fields, children, actions}, index) {
    let {options} = this.props
    return (
      <div key={index} className={cx('fields-settings__fields')}>
        <div className={cx('fields-settings__fields-header')}>
          <span>
            {header}
          </span>
          {actions}
        </div>
        {fields ? (
          <FieldsTable fields={fields} options={options} />
        ) : null}
        {children}
      </div>
    )
  }

  render() {
    let {title, fields, instant_job_fields, children, create_field} = this.props
    return (
      <div className={cx('fields-settings')}>
        <div className={cx('fields-settings__header')}>
          <div className={cx('fields-settings__header-title')}>
            {title}
          </div>
          <Button onClick={create_field}>
            Créer un nouveau champ
          </Button>
        </div>
        {[
          {header: "Champs personnalisables", fields},
          instant_job_fields && {header: "Champs InstantJob", fields: instant_job_fields},
          ...(children || []),
        ].filter(Boolean).map(this.render_table)}
      </div>
    )
  }
}

export default FieldsSettings