<template>
  <b-row>
    <b-col md="12"></b-col>

    <b-col md="8" class="col-left">
      <p class="col-md-6 offset-md-3 text-justify">
        Tire uma selfie com
        o documento selecionado.
        Coloque o documento ao
        lado do seu rosto com
        foto virada para a frente
        e tire a foto.
      </p>

      <b-col>
        <p class="label-buttons text-center">Tipo de identificação</p>
        <button
          @click="selectDocument('RG')"
          class="radius-theme btn"
          :class="{'btn-primary': getCurrentValue.document_identification_type === 'RG',
              'btn-outline-danger': getCurrentValue.document_identification_type !== 'RG' }"
        >R.G.</button>

        <button
          @click="selectDocument('CNH')"
          class="radius-theme btn"
          :class="{'btn-primary': getCurrentValue.document_identification_type === 'CNH',
              'btn-outline-danger': getCurrentValue.document_identification_type !== 'CNH'
               }"
        >CNH.</button>

        <button
          @click="selectDocument('CT')"
          class="radius-theme btn"
          :class="{'btn-primary': getCurrentValue.document_identification_type === 'CT',
              'btn-outline-danger': getCurrentValue.document_identification_type !== 'CT'
               }"
        >Cart. Trabalho</button>
        <p class="text-center">Esse é o mesmo documento que você vai utilizar na etapa seguinte.</p>
        <p class="text-center text-danger">
          *Retire óculos ou qualquer objeto que possa atrapalhar a foto.
          <br />
É importante que foto fique nítida e com boa visibilidade.
        </p>
      </b-col>
    </b-col>

    <b-col md="4" class="d-none d-sm-none d-md-block col-right">
      <img class="img-fluid" src="@/assets/sel-signup/cadastro_foto.png" />
    </b-col>

    <identificationModal @modalClosed="setSelfie" />

    <b-col md="12">
      <p style="line-height: 5em;" class="text-right">
        <b-button variant="warning" size="larger" @click="storeSelfie" :disabled="loading">
          <b-spinner small type="grow" v-show="loading"></b-spinner>
          CONTINUAR</b-button>
      </p>
    </b-col>
    <message-modal :message="alertMessage" />
  </b-row>
</template>

<script>
import identificationModal from "@/components/modals/selfSignUp/IdentificationDocument";
import SelfSignUp from "@/services/resources/SelfSignUpService";
import MessageModal from "@/components/modals/MessageModal.vue";
import { objectToFormData } from "@/utils/convert.js";
const service = SelfSignUp.build();

export default {
 props:{
    id:{
      default(){
        return 0;
      }
    },
    token:{
      default(){
        return "";
      }
    },
    cpf:{
      default(){
        return "";
      }
    },
    selfSignUp:{

    }
  },
  model:{
    prop: 'selfSignUp',
    event: 'change'
  },
  components: {
    identificationModal,
    MessageModal
  },
  data() {
    return {
      document_identification_selfie: "",
      alertMessage: "",
      loading: false
    };
  },
  computed:{
getCurrentValue: {
      get() {
        return this.selfSignUp;
      },
      set(value) {
        this.$emit('change', value);
      },
    }
  },
  methods: {
    selectDocument(selected) {
      this.getCurrentValue.document_identification_type = selected;
      this.document_identification_selfie = "";
      this.$modal.show("identification-document");
    },
    setSelfie(file) {
      this.document_identification_selfie = file;
    },
    storeSelfie(file) {
      if (this.document_identification_selfie == "") {
        this.alertMessage = "Tire uma selfie com o o documento selecionado";
        this.$bvModal.show("message-modal");
        return;
      }

      let formToSend = {
        token: this.token,
        id: this.id,
        cpf: this.cpf,
        document_identification_type: this.getCurrentValue.document_identification_type,
        document_identification_selfie: this.document_identification_selfie
      };

      let formData = objectToFormData(formToSend);

      this.store(formData);
    },
    store(form) {
      var vm = this;
      this.loading = true;
      form.append("_method", "PUT");
      service
        .update(form)
        .then(response => {
          vm.$emit("next", { token: vm.token, id: vm.id, cpf: vm.cpf });
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
          let resp = JSON.parse(err.response.data);
          vm.alertMessage = resp.msg;
          vm.$bvModal.show("message-modal");
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" >
.col-left {
  padding-top: 70px;

  button {
    margin: 6px;
  }
}
p.label-buttons {
  margin-bottom: 0px;
}

.col-right {
  img {
    max-height: 400px;
  }
}
</style>