<template>
  <modal :show="true">
    <div slot="header">
      <h3 v-if="pk" class="modal-title">
        <translate>Edit contact</translate></h3>
      <h3 v-else class="modal-title">
        <translate>New contact</translate></h3>
    </div>

    <div slot="body">
      <form id="contactForm" class="form-horizontal" method="post" v-on:submit.prevent="saveContact" enctype="multipart/form-data">
        <div class="form-group" :class="{ 'has-error': formErrors['first_name'] || formErrors['last_name'] }">
          <label class="col-sm-1 control-label" for="first_name">
            <span class="fa fa-user"></span></label>
          <div class="col-sm-6">
            <input v-model="contact.first_name" type="text" id="first_name" name="first_name" class="form-control" :placeholder="firstNamePlaceholder">
            <span v-if="formErrors['first_name']" class="help-block">{{ formErrors['first_name'][0] }}</span>
          </div>
          <div class="col-sm-5">
            <input v-model="contact.last_name" type="text" id="last_name" name="last_name" class="form-control" :placeholder="lastNamePlaceholder">
            <span v-if="formErrors['last_name']" class="help-block">{{ formErrors['last_name'][0] }}</span>
          </div>
        </div>
        <div class="form-group" :class="{ 'has-error': formErrors['display_name'] }">
          <div class="col-sm-offset-1 col-sm-11">
            <input v-model="contact.display_name" type="text" id="display_name" name="display_name" class="form-control" :placeholder="displayNamePlaceholder">
            <span v-if="formErrors['display_name']" class="help-block">{{ formErrors['display_name'][0] }}</span>
          </div>
        </div>
        <div class="form-group" :class="{ 'has-error': formErrors['company'] || formErrors['position'] }">
          <label class="col-sm-1 control-label" for="company">
            <span class="fa fa-building"></span></label>
          <div class="col-sm-6">
            <input v-model="contact.company" type="text" id="company" name="company" class="form-control" :placeholder="companyPlaceholder">
            <span v-if="formErrors['company']" class="help-block">{{ formErrors['company'][0] }}</span>
          </div>
          <div class="col-sm-5">
            <input v-model="contact.position" type="text" id="position" name="position" class="form-control" :placeholder="positionPlaceholder">
            <span v-if="formErrors['position']" class="help-block">{{ formErrors['position'][0] }}</span>
          </div>
        </div>

        <email-field v-for="(email, index) in contact.emails"
                     :key="`email-${index}`"
                     :index="index"
                     :email="email"
                     :errors="(formErrors.emails) ? formErrors.emails[index] : {}"
                     @add="addEmailField"
                     @delete="(index) => deleteEmailField(index)">
        </email-field>

        <phone-number-field v-for="(phone_number, index) in contact.phone_numbers"
                            :key="`phone-${index}`"
                            :index="index"
                            :phone="phone_number"
                            :errors="(formErrors.phone_numbers) ? formErrors.phone_numbers[index] : {}"
                            @add="addPhoneNumberField"
                            @delete="(index) => deletePhoneNumberField(index)">
        </phone-number-field>

        <div v-if="showMore">
          <div class="form-group" :class="{ 'has-error': formErrors['birth_date'] }">
            <label class="col-sm-1 control-label" for="birth_date">
              <span class="fa fa-calendar"></span></label>
            <div class="col-sm-6">
              <datepicker v-model="contact.birth_date" id="birth_date" name="birth_date" inputClass="form-control" :placeholder="birthDatePlaceholder"></datepicker>
              <span v-if="formErrors['birth_date']" class="help-block">{{ formErrors['birth_date'][0] }}</span>
            </div>
          </div>
          <div class="form-group" :class="{ 'has-error': formErrors['address'] }">
            <label class="col-sm-1 control-label" for="address">
              <span class="fa fa-map-marker"></span></label>
            <div class="col-sm-11">
              <textarea v-model="contact.address" id="address" name="address" class="form-control" :placeholder="addressPlaceholder"></textarea>
              <span v-if="formErrors['address']" class="help-block">{{ formErrors['address'][0] }}</span>
            </div>
          </div>
          <div class="form-group" :class="{ 'has-error': formErrors['zipcode'] || formErrors['city'] }">
            <div class="col-sm-offset-1 col-sm-4">
              <input v-model="contact.zipcode" type="text" id="zipcode" name="zipcode" class="form-control" :placeholder="zipCodePlaceholder">
              <span v-if="formErrors['zipcode']" class="help-block">{{ formErrors['zipcode'][0] }}</span>
            </div>
            <div class="col-sm-7">
              <input v-model="contact.city" type="text" id="city" name="city" class="form-control" :placeholder="cityPlaceholder">
              <span v-if="formErrors['city']" class="help-block">{{ formErrors['city'][0] }}</span>
            </div>
          </div>
          <div class="form-group" :class="{ 'has-error': formErrors['country'] || formErrors['state'] }">
            <div class="col-sm-offset-1 col-sm-6">
              <input v-model="contact.country" type="text" id="country" name="country" class="form-control" :placeholder="countryPlaceholder">
              <span v-if="formErrors['country']" class="help-block">{{ formErrors['country'][0] }}</span>
            </div>
            <div class="col-sm-5">
              <input v-model="contact.state" type="text" id="state" name="state" class="form-control" :placeholder="statePlaceholder">
              <span v-if="formErrors['state']" class="help-block">{{ formErrors['state'][0] }}</span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-1 control-label" for="note">
              <span class="fa fa-sticky-note"></span></label>
            <div class="col-sm-11">
              <textarea v-model="contact.note" id="note" name="note" class="form-control" :placeholder="notePlaceholder"></textarea>
            </div>
          </div>
        </div>

        <hr>
        <button type="button" class="btn btn-default" @click="showMore = true"><translate>More</translate></button>
        <div class="pull-right">
          <button type="button" class="btn btn-default" @click="close"><translate>Close</translate></button>
          <input type="submit" class="btn btn-primary" value="Save">
        </div>
        <div class="clearfix"></div>
      </form>
    </div>
  </modal>
</template>

<script>
import * as api from '../api'
import Datepicker from 'vuejs-datepicker'
import EmailField from './EmailField.vue'
import Modal from './Modal.vue'
import PhoneNumberField from './PhoneNumberField.vue'

export default {
    components: {
        datepicker: Datepicker,
        'email-field': EmailField,
        modal: Modal,
        'phone-number-field': PhoneNumberField
    },
    data () {
        return {
            contact: {
                emails: [{}],
                phone_numbers: [{}]
            },
            formErrors: {},
            show: true,
            showMore: false
        }
    },
    computed: {
        firstNamePlaceholder () {
            return this.$gettext('First name')
        },
        lastNamePlaceholder () {
            return this.$gettext('Last name')
        },
        displayNamePlaceholder () {
            return this.$gettext('Display name')
        },
        companyPlaceholder () {
            return this.$gettext('Company')
        },
        positionPlaceholder () {
            return this.$gettext('Position')
        },
        birthDatePlaceholder () {
            return this.$gettext('Birth date')
        },
        addressPlaceholder () {
            return this.$gettext('Address')
        },
        zipCodePlaceholder () {
            return this.$gettext('Zip Code')
        },
        cityPlaceholder () {
            return this.$gettext('City')
        },
        countryPlaceholder () {
            return this.$gettext('Country')
        },
        statePlaceholder () {
            return this.$gettext('State/Province')
        },
        notePlaceholder () {
            return this.$gettext('Note')
        }
    },
    props: {
        pk: {
            type: Number,
            default: null
        }
    },
    created () {
        if (this.pk) {
            api.getContact(this.pk).then((res) => {
                this.contact = res.data
                if (this.contact.emails.length === 0) {
                    this.contact.emails.push({})
                }
                if (this.contact.phone_numbers.length === 0) {
                    this.contact.phone_numbers.push({})
                }
                if (this.contact.address !== '') {
                    this.showMore = true
                }
            })
        }
    },
    methods: {
        close () {
            this.show = false
            this.contact = {}
            this.formErrors = {}
            this.$emit('close')
        },
        onFormError (response) {
            this.formErrors = response.data
        },
        createContact (contact) {
            this.$store.dispatch('createContact', contact).then((res) => {
                this.close()
            }, this.onFormError)
        },
        saveContact () {
            var contact = JSON.parse(JSON.stringify(this.contact))
            /* var form = document.querySelector('#contactForm')
             var data = new FormData(form) */

            if (!Object.keys(contact.phone_numbers[0]).length) {
                contact.phone_numbers.splice(0, 1)
            }
            if (contact.birth_date) {
                contact.birth_date = contact.birth_date.split('T')[0]
            }
            if (this.pk !== null) {
                this.updateContact(contact)
            } else {
                this.createContact(contact)
            }
        },
        addEmailField () {
            this.contact.emails.push({})
        },
        deleteEmailField (index) {
            this.contact.emails.splice(index, 1)
        },
        setEmail (index, email) {
            this.contact.emails.splice(index, 1, email)
        },
        addPhoneNumberField () {
            this.contact.phone_numbers.push({})
        },
        deletePhoneNumberField (index) {
            this.contact.phone_numbers.splice(index, 1)
        },
        setPhoneNumber (index, phoneNumber) {
            this.contact.phone_numbers.splice(index, 1, phoneNumber)
        },
        updateContact (contact) {
            var args = [contact.pk, contact]
            this.$store.dispatch('updateContact', args).then((res) => {
                this.close()
            }, this.onFormError)
        }
    }
}
</script>
