<template>
  <b-row>
    <b-col sm="12">
      <b-card>
        <div slot="header">
          Create User
        </div>

        <div class="form-group">
          <label class="row">
            <picture-input
              ref="pictureInput"
              @change="pictureChange"
              width="200"
              height="150"
              margin="10"
              size="10"
              :removable="true"
              buttonClass="btn"
              :customStrings="{
                upload: '<h1>Bummer!</h1>',
                drag: 'Drag an image or click here'
            }">
              ></picture-input>
          </label>
        </div>


        <div class="form-group">
          <label class="row">
            <span class="col-sm-3">
              First Name
            </span>
            <span class="col-sm-9">
              <input v-model="user.first_name" type="text" class="form-control" placeholder="First Name">
            </span>
          </label>
        </div>

        <div class="form-group">
          <label class="row">
            <span class="col-sm-3">
              Last Name
            </span>
            <span class="col-sm-9">
              <input v-model="user.last_name" type="text" class="form-control" placeholder="Last Name">
            </span>
          </label>
        </div>

        <div class="form-group">
          <label class="row">
            <span class="col-sm-3">
              Email
            </span>
            <span class="col-sm-9">
              <input v-model="user.email" type="email" class="form-control" placeholder="Email">
            </span>
          </label>
        </div>

        <div class="form-group">
          <label class="row">
            <span class="col-sm-3">
              Password
            </span>
            <span class="col-sm-9">
              <input v-model="user.password" type="text" class="form-control" placeholder="Password">
            </span>
          </label>
        </div>

        <div class="form-group">
          <label class="row">
            <span class="col-sm-3">
              Role
            </span>
            <span class="col-sm-9">
              <select v-model="user.role" class="form-control">
                <option value="administrator">Administrator</option>
                <option value="user">User</option>
              </select>
            </span>
          </label>
        </div>

        <div class="form-group">
          <label class="row">
            <span class="col-sm-3">
              Status
            </span>
            <span class="col-sm-9">
              <select v-model="user.status" class="form-control">
                <option value="active">Active</option>
                <option value="disabled">Disabled</option>
              </select>
            </span>
          </label>
        </div>

        <div class="form-group">
          <label class="row">
            <span class="col-sm-3">
              Website
            </span>
            <span class="col-sm-9">
              <input v-model="user.website" type="text" class="form-control" placeholder="Website">
            </span>
          </label>
        </div>

        <div class="form-group">
          <label class="row">
            <span class="col-sm-3">
              Facebook URL
            </span>
            <span class="col-sm-9">
              <input v-model="user.fb_url" type="text" class="form-control" placeholder="Facebook Url">
            </span>
          </label>
        </div>

        <div class="form-group">
          <label class="row">
            <span class="col-sm-3">
              Twitter URL
            </span>
            <span class="col-sm-9">
              <input v-model="user.tw_url" type="text" class="form-control" placeholder="Twitter Url">
            </span>
          </label>
        </div>

        <div class="form-group">
          <label class="row">
            <span class="col-sm-3">
              LinkedIn URL
            </span>
            <span class="col-sm-9">
              <input v-model="user.ln_url" type="text" class="form-control" placeholder="LinkedIn Url">
            </span>
          </label>
        </div>

        <div class="form-group">
          <label class="row">
            <span class="col-sm-3">
              Biography
            </span>
            <span class="col-sm-9">
              <textarea v-model="user.bio" class="form-control" cols="30" rows="6" placeholder="Biography"></textarea>
            </span>
          </label>
        </div>

        <div slot="footer">
          <b-button type="submit" size="md" variant="primary" @click.prevent="save">
            <i class="fa fa-dot-circle-o"></i> Create
          </b-button>
          <router-link :to="{name: 'users'}" class="btn btn-info">
            <i class="fa fa-ban" aria-hidden="true"></i> Cancel
          </router-link>
        </div>

      </b-card>
    </b-col>
  </b-row>
</template>

<script>
import PictureInput from 'vue-picture-input';
import { mapActions } from 'vuex';

export default {
  name: 'UsersEdit',
  components: {
    PictureInput,
  },
  data() {
    return {
      user: {
        first_name: '',
        last_name: '',
        email: '',
        password: 'secret',
        role: 'user',
        status: 'active',
        website: '',
        fb_url: '',
        tw_url: '',
        ln_url: '',
        image: null,
        bio: '',
      },
    };
  },
  mounted() {
    // Code to solve PictureInput issue
    setTimeout(() => {
      const evt = new UIEvent('resize');
      window.dispatchEvent(evt);
    }, 700);
  },
  methods: {
    ...mapActions('users', [
      'saveUser',
    ]),
    pictureChange() {
      this.user.image = this.$refs.pictureInput.file;
    },
    save() {
      this.saveUser(this.user)
        .then(() => {
          this.success('The user was created')
            .then(() => {
              this.redirectTo('/admin/users');
            });
        })
        .catch((response) => {
          this.failWithErrors('The user was not created', response);
        });
    },
  },
};
</script>