<template>
  <div id="page_content_inner">
    <h3 class="heading_b uk-margin-bottom">{{ $t('contacts.createPageTitle') }}</h3>
    <div class="md-card">
      <div class="md-card-content large-padding">
        <create-form :contact="contact" :validRules="validRules"></create-form>
      </div>
    </div>
  </div>
</template>

<script>
  // mixins
  import ContactsMixin from 'crm/mixins/Contacts';
  import ContactTypesMixin from 'crm/mixins/ContactTypes';

  // components
  import CreateForm from 'crm/pages/contacts/includes/CreateForm';

  const initialAddress = {
    name: "",
    value_one: "",
    value_two: "",
    value_three: "",
    house_number: "",
    post_code: "",
    land_id: null,
  };

  export default {
    name: 'crm-contacts-create',
    data: () => {
      return {
        validRules: {
          address: {
            name: { required: true, min: 3 },
            value_one: { required: true, min: 3 },
            value_two: { min: 3 },
            value_three: { min: 3 },
            house_number: { numeric: true, min:1 },
            post_code: { numeric: true },
            land: { required: true },
          },
          company_name: { min: 3 },
          company_tax_number: { min: 2, numeric: true },
          notes: { min: 10 },
          type: { required: true, in: "0,1" },
          client_shortcode: { min: 3 },
          client_number: { min: 3, numeric: true },
          project_manager_id: { numeric: true },
          price_list: { numeric: true },
          person_birthday: { date_format: 'DD.MM.YYYY' },
          person_department: { min: 3 },
          person_position: { min: 3 },
          person_title: { min: 3 },
          first_name: { min: 3 },
          last_name: { min: 3 },
        },
        contact: {
          type: 0, // company
          is_client: 0,
          is_provider: 0,
          // company info
          company_name: '',
          company_tax_number: '',
          avatar: '',
          base_64_avatar: null,
          // addresses
          addresses: [ initialAddress ],
          // contact possibilities
          possibilities: [],
          // general
          notes: '',
          tags: [],
          // client info
          client_shortcode: '',
          client_number: '',
          project_manager_id: 0,
          price_list: '',
          // provider info
          provider_number: '',
          // person
          person_title: '',
          first_name: '',
          last_name: '',
          // additional information
          person_birthday: null,
          person_department: '',
          person_position: ''
        }
      }
    },
    mixins: [
      ContactTypesMixin,
      ContactsMixin
    ],
    components: {
      'create-form': CreateForm
    },
    mounted: function () {
      this.Bus.$emit('pageIsReady');
      this.Bus.$on('storeContact', this.storeContact);
      this.Bus.$on('modal.cropper.change', this.updateAvatar);
      this.Bus.$on('crm.contact-types.update', this.updatePossibilities);
      this.Bus.$on('crm.address.new', this.newAddress);
      this.Bus.$on('crm.address.update', this.updateAddress);
      this.Bus.$on('crm.address.remove', this.removeAddress);
      this.Bus.$on('global.tags-input.update', this.updateTags);
    },
    methods: {
      updateAvatar: function (data) {
        this.contact.base_64_avatar = data.imageSrc;
      },
      updatePossibilities: function (data) {
        this.contact.possibilities = this.objectToArray(data.items);
      },
      newAddress: function () {
        this.contact.addresses.push(initialAddress);
      },
      updateAddress: function (data) {
        this.contact.addresses[data.index] = data.address;
      },
      removeAddress: function (data) {
        let addresses = this.contact.addresses;

        if (addresses.length === 1) {
          this.fail('address.lastAddressDelete');
          return false;
        }

        delete addresses[data.index];
        addresses = addresses.filter(function (val) { return val });
        this.contact.addresses = addresses;
      },
      updateTags: function (data) {
        this.contact.tags = data.tags;
      }
    }
  }
</script>

<style lang="sass-loader" scoped></style>