<template>
  <div class="section page FormPage">
    <CustomInput
      v-for="field of formFields"
      ref="inputs"
      :key="field.id"
      v-bind="field.inputProps"
      v-on="field.inputEvents"
    />
  </div>
</template>

<script>
  import CustomInput from 'components/CustomInput/CustomInput';
  import changeCase from 'change-case';

  const FORM_FIELD_KEYS = [
    'name',
    'lastName',
    'email',
    'address',
    'city',
    'postalCode',
    'province'
  ];

  export default {
    name       : 'FormPage',
    components : { CustomInput },
    props      : {
      contentData : {
        type     : Object,
        required : true
      }
    },
    data() {
      return {
        name       : 'Default Name',
        lastName   : 'Default Last Name',
        email      : 'default@example.com',
        address    : '',
        city       : '',
        postalCode : '',
        province   : ''
      };
    },
    computed : {
      entryID() {
        return this.$_get(this.contentData, 'sys.contentType.id');
      },
      formFields() {
        return FORM_FIELD_KEYS.map((fieldName) => {
          const requiredKey = `${fieldName}Required`;
          const id = this.$_get(this.contentData[fieldName], 'sys.id', '');
          const label = this.$_get(this.contentData[fieldName], 'name', '');
          return {
            id,
            required   : this.contentData[requiredKey],
            inputProps : {
              label,
              name : fieldName,
              type : fieldName === 'email' ? 'email' : 'text',
              // Value from data is passed as value, using a dynamic key
              value : this[fieldName],
              class : [
                'FormPage__custom-input',
                `FormPage__custom-input--${changeCase.paramCase(fieldName)}`
              ],
              inputAttributes : {
                required : this.contentData[requiredKey],
                form     : this.entryID
              }
            },
            inputEvents : {
              // CustomInput value change update handler
              'update:value' : this.handleInputUpdate
            }
          };
        });
      }
    },
    methods : {
      // CustomInput value update handler
      handleInputUpdate({ value, name }) {
        // Using the value of name, we can dynamically update properties inside of data
        this[name] = value;
      }
    }
  };
</script>