<template>
  <div class="shoes-uploader">
    <div class="shoes-uploader__inner">
      <div class="shoes-uploader__col">
        <slot :update-property="setProperty"></slot>
      </div>
      <div class="shoes-uploader__col">
        <ages :ages="ages" v-model="selectedAge" name="contact[fascia d'età]"></ages>
        <models :models="models" :age="selectedAge" v-model="selectedModel" name="contact[modello]"></models>
        <colors :colors="colors" :model="selectedModel" name="contact[colore della base]"></colors>
      </div>
      <sizes :sizes="sizes" :age="selectedAge" :model="selectedModel" name="contact[numero]"></sizes>
      <slot name="file-uploader" :save-customer="saveUserAsCustomer"></slot>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { set } from 'lodash';
const l_set = set;
import Models from './Models.vue';
import Colors from './Colors.vue';
import Ages from './Ages.vue';
import Sizes from './Sizes.vue';
import UploadImage from './UploadImage.vue';

export default {
  data: function() {
    return {
      selectedAge: 'adults',
      selectedModel: '',
      customer: {
        first_name: '',
        last_name: '',
        email: '',
        phone: '',
        verified_email: true,
        addresses: []
      }
    };
  },

  components: {
    Models,
    Colors,
    Ages,
    Sizes,
    UploadImage
  },

  props: {
    models: {
      default: undefined,
      type: Object
    },
    colors: {
      default: undefined,
      type: Object
    },
    ages: {
      default: undefined,
      type: Array
    },
    sizes: {
      default: undefined,
      type: Object
    },
    contactFormId: {
      default: 'contact_form',
      type: String
    },
    saveCustomer: {
      default: false,
      type: Boolean
    },
    saveCustomerEndpoint: {
      default: false,
      type: String
    }
  },

  computed: {
    formIsValid() {
        return document.getElementById(this.contactFormId).checkValidity()
    },
    canSaveCustomer() {
      return (this.saveCustomer &&
        this.saveCustomerEndpoint &&
        this.customer.first_name !== '' &&
        this.customer.last_name !== '' &&
        this.customer.email !== '' &&
        this.customer.phone !== '') ? true : false
    }
  },

  methods: {
    setProperty({ resource, property, value }) {
      l_set(this[resource], property, value)
    },

    decodedCredential(credential) {
        return credential.substring(1).substring(0, credential.length - 1)
    },

    submitForm() {
      if(document.getElementById(this.contactFormId)) {
        if(document.getElementById(this.contactFormId).checkValidity()) {
          document.getElementById(this.contactFormId).submit()
        } else {
           document.getElementById(this.contactFormId).reportValidity() 
        }
      }
    },

    saveUserAsCustomer(e) {
      if(this.canSaveCustomer && document.getElementById(this.contactFormId).checkValidity()) {
        console.log('salvo cliente e invio form');
        axios({
            url: this.saveCustomerEndpoint,
            method: 'POST',
            data: {
                customer: this.customer
            }
        })
        .then((response) =>  {
          this.submitForm()
        })
        .catch((error) => {
          console.log(error);
          this.submitForm()
        })
      } else {
        console.log('invio form');
        this.submitForm()
      }
    }
  },

  watch: {
    selectedAge: function (newValue, oldValue) {
      if (newValue !== oldValue) {
        this.selectedModel = ''
      }
    }
  }
};
</script>
<style lang="scss">
  .shoes-uploader {
    &__inner {
      display: flex;
      flex-flow: row wrap;
    }

    &__col {
      align-content: flex-start;
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      width: 100%;

      @media screen and (min-width:769px) {
        flex: 0 0 50%;
        max-width: 50%;
        width: 100%;
      }
    }

    &__field {
      width: 100%;
    }
  }
</style>


