//  main.js

import environment from './environment';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources')
    .feature('validation');

  if (environment.debug) {
    aurelia.use
      .developmentLogging();
  }

  if (environment.testing) {
    aurelia.use
      .plugin('aurelia-testing');
  }

  aurelia.start()
    .then(() => aurelia.setRoot());
}

//  validation/index.js

export function configure(config) {
  config
    .plugin('aurelia-validation');
}

//  contact-edition.html

<template>
  <section class="container">

    <h1 if.bind="isNew">New contact</h1>
    <h1 if.bind="!isNew">Contact #${contact.id}</h1>

    <form class="form-horizontal" submit.delegate="save()">

      <div class="form-group">
        <label class="col-sm-3 control-label">First name</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" value.bind="contact.firstName & validate">
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-3 control-label">Last name</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" value.bind="contact.lastName">
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-3 control-label">Company</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" value.bind="contact.company">
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-3 control-label">Birthday</label>
        <div class="col-sm-9">
          <input type="date" class="form-control" value.bind="contact.birthday">
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-3 control-label">Note</label>
        <div class="col-sm-9">
          <textarea class="form-control" value.bind="contact.note"></textarea>
        </div>
      </div>

      <hr>

      <div class="form-group" repeat.for="phoneNumber of contact.phoneNumbers">

        <div class="col-sm-2 col-sm-offset-1">
          <select value.bind="phoneNumber.type" class="form-control">
            <option value="Home">Home</option>
            <option value="Office">Office</option>
            <option value="Mobile">Mobile</option>
            <option value="Other">Other</option>
          </select>
        </div>

        <div class="col-sm-8">
          <input type="tel" class="form-control" placeholder="Phone number" value.bind="phoneNumber.number">
        </div>

        <div class="col-sm-1">
          <button type="button" class="btn btn-danger" click.delegate="contact.phoneNumbers.splice($index, 1)">
            <i class="fa fa-times"></i>
          </button>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-9 col-sm-offset-3">
          <button type="button" class="btn btn-primary" click.delegate="contact.addPhoneNumber()">
            <i class="fa fa-plus-square-o"></i> Add a phone number
          </button>
        </div>
      </div>

      <hr>

      <div class="form-group" repeat.for="emailAddress of contact.emailAddresses">

        <div class="col-sm-2 col-sm-offset-1">
          <select value.bind="emailAddress.type" class="form-control">
            <option value="Home">Home</option>
            <option value="Office">Office</option>
            <option value="Other">Other</option>
          </select>
        </div>

        <div class="col-sm-8">
          <input type="email" class="form-control" placeholder="Email address" value.bind="emailAddress.address">
        </div>

        <div class="col-sm-1">
          <button type="button" class="btn btn-danger" click.delegate="contact.emailAddresses.splice($index, 1)">
            <i class="fa fa-times"></i>
          </button>
        </div>

      </div>

      <div class="form-group">

        <div class="col-sm-9 col-sm-offset-3">
          <button type="button" class="btn btn-primary" click.delegate="contact.addEmailAddress()">
            <i class="fa fa-plus-square-o"></i> Add an email address
          </button>
        </div>

      </div>

      <hr>

      <div class="form-group" repeat.for="address of contact.addresses">

        <div class="col-sm-2 col-sm-offset-1">
          <select value.bind="address.type" class="form-control">
            <option value="Home">Home</option>
            <option value="Office">Office</option>
            <option value="Other">Other</option>
          </select>
        </div>

        <div class="col-sm-8">

          <div class="row">
            <div class="col-sm-4">
              <input type="text" class="form-control" placeholder="Number" value.bind="address.number">
            </div>

            <div class="col-sm-8">
              <input type="text" class="form-control" placeholder="Street" value.bind="address.street">
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4">
              <input type="text" class="form-control" placeholder="Postal code" value.bind="address.postalCode">
            </div>

            <div class="col-sm-8">
              <input type="text" class="form-control" placeholder="City" value.bind="address.city">
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4">
              <input type="text" class="form-control" placeholder="State" value.bind="address.state">
            </div>

            <div class="col-sm-8">
              <input type="text" class="form-control" placeholder="Country" value.bind="address.country">
            </div>
          </div>

        </div>

        <div class="col-sm-1">
          <button type="button" class="btn btn-danger" click.delegate="contact.addresses.splice($index, 1)">
            <i class="fa fa-times"></i>
          </button>
        </div>

      </div>

      <div class="form-group">

        <div class="col-sm-9 col-sm-offset-3">
          <button type="button" class="btn btn-primary" click.delegate="contact.addAddress()">
            <i class="fa fa-plus-square-o"></i> Add an address
          </button>
        </div>

      </div>

      <hr>

      <div class="form-group" repeat.for="profile of contact.socialProfiles">

        <div class="col-sm-2 col-sm-offset-1">
          <select value.bind="profile.type" class="form-control">
            <option value="GitHub">GitHub</option>
            <option value="Twitter">Twitter</option>
          </select>
        </div>

        <div class="col-sm-8">
          <input type="text" class="form-control" placeholder="Username" value.bind="profile.username">
        </div>

        <div class="col-sm-1">
          <button type="button" class="btn btn-danger" click.delegate="contact.socialProfiles.splice($index, 1)">
            <i class="fa fa-times"></i>
          </button>
        </div>

      </div>

      <div class="form-group">

        <div class="col-sm-9 col-sm-offset-3">
          <button type="button" class="btn btn-primary" click.delegate="contact.addSocialProfile()">
            <i class="fa fa-plus-square-o"></i> Add a social profile
          </button>
        </div>

      </div>

      <div class="form-group">

        <div class="col-sm-9 col-sm-offset-3">
          <button type="submit" class="btn btn-success">Save</button>
          <a if.bind="isNew" class="btn btn-danger" route-href="route: contacts">Cancel</a>
          <a if.bind="!isNew" class="btn btn-danger" route-href="route: contact-details; params.bind: { id: contact.id }">Cancel</a>
        </div>

      </div>

    </form>

  </section>
</template>

//  contact-edition.js

import {inject, NewInstance} from 'aurelia-framework';
import {ValidationController} from 'aurelia-validation';
import {Router} from 'aurelia-router';
import {ContactGateway} from './contact-gateway';
import {Contact} from './models';

@inject(ContactGateway, NewInstance.of(ValidationController), Router)
export class ContactEdition {

  constructor(contactGateway, validationController, router) {
    this.contactGateway = contactGateway;
    this.validationController = validationController;
    this.router = router;
  }

  activate(params, config) {
    this.isNew = params.id === undefined;
    if (this.isNew) {
      this.contact = new Contact();
    }
    else {
      return this.contactGateway.getById(params.id)
        .then(contact => {
          this.contact = contact;
          config.navModel.setTitle(contact.fullName);
        });
    }
  }

  save() {
    this.validationController.validate().then(errors => {
      if (errors.length > 0) {
        return;
      }

      if (this.isNew) {
        this.contactGateway.create(this.contact)
          .then(() => this.router.navigateToRoute('contacts'));
      }
      else {
        this.contactGateway.update(this.contact.id, this.contact)
          .then(() => this.router.navigateToRoute('contact-details',{ id: this.contact.id }));
      }
    });
  }
}

//  models.js

import {ValidationRules} from 'aurelia-validation';

export class PhoneNumber {

  static fromObject(src) {
    return Object.assign(new PhoneNumber(), src);
  }

  type = 'Home';
  number = '';

}

export class EmailAddress {

  static fromObject(src) {
    return Object.assign(new EmailAddress(), src);
  }

  type = 'Home';
  address = '';

}

export class Address {

  static fromObject(src) {
    return Object.assign(new Address(), src);
  }

  type = 'Home';
  number = '';
  street = '';
  postalCode = '';
  city = '';
  state = '';
  country = '';

}

export class SocialProfile {

  static fromObject(src) {
    return Object.assign(new SocialProfile(), src);
  }

  type = 'GitHub';
  username = '';

}

export class Contact {

  static fromObject(src) {
    const contact = Object.assign(new Contact(), src);
    contact.phoneNumbers = contact.phoneNumbers.map(PhoneNumber.fromObject);
    contact.emailAddresses = contact.emailAddresses.map(EmailAddress.fromObject);
    contact.addresses = contact.addresses.map(Address.fromObject);
    contact.socialProfiles = contact.socialProfiles.map(SocialProfile.fromObject);
    return contact;
  }

  firstName = '';
  lastName = '';
  company = '';
  birthday = '';
  phoneNumbers = [];
  emailAddresses = [];
  addresses = [];
  socialProfiles = [];
  note = '';

  constructor() {
    ValidationRules
      .ensure('firstName').minLength(5).required()
      .on(this);
  }

  static fromObject(src) {
    return Object.assign(new Contact(), src);
  }

  get isPerson() {
    return this.firstName || this.lastName;
  }

  get fullName() {
    const fullName = this.isPerson ? `${this.firstName} ${this.lastName}` : this.company;
    return fullName || '';
  }

  get firstLetter() {
    const name = this.lastName || this.firstName || this.company;
    return name ? name[0].toUpperCase() : '?';
  }

  addPhoneNumber() {
    this.phoneNumbers.push(new PhoneNumber());
  }

  addEmailAddress() {
    this.emailAddresses.push(new EmailAddress());
  }

  addAddress() {
    this. addresses.push(new Address());
  }

  addSocialProfile() {
    this.socialProfiles.push(new SocialProfile());
  }

}