<template>
  <!-- QUOTE FORM -->
  <q-card :class="isPublic ? 'quote-form' : ''">
    <!-- TITLE HEADER -->
    <q-card-section v-if="isPublic" class="q-pt-xl">
      <div class="text-h5 text-center text-uppercase text-primary">
        {{ $t("form.title") }}
      </div>
      <div class="text-caption text-center">
        {{ $t("form.subtitle") }}
      </div>
    </q-card-section>

    <q-card-section>
      <q-form
        ref="form"
        @submit="onSubmit"
        autocorrect="off"
        autocomplete="off"
        spellcheck="false"
      >
        <ContactInputs v-if="!logged" :values="contact" />

        <div class="row q-col-gutter-xs q-pb-xs">
          <OriginInputs :values="origin" />
          <DestinationInputs :values="destination" />
        </div>

        <ProductInputs
          :values="product"
          :groupTable="groupTable"
          @updateCubageAndWeight="handleCubageAndWeightUpdate"
          />

          <div class="row align-items-center">
            <div class="col-xs-12 col-sm-4 q-pa-sm">
              <div class="q-pa-sm text-left subtitle2">
                *{{ $t("form.subtitle2") }}
              </div>
            </div>

            <div class="col-xs-12 col-sm-8 q-pa-sm">
              <div class="row justify-end items-center q-gutter-sm">
                <div class="bg-grey-3 rounded-borders q-pa-sm">
                  <div class="fit flex flex-center text-center non-selectable q-pa-sm">
                    <div class="text-subtitle2">{{ $t("form.cubTotal") }}: {{ totalCubage }} kg</div>
                  </div>
                </div>

                <div class="bg-grey-3 rounded-borders q-pa-sm">
                  <div class="fit flex flex-center text-center non-selectable q-pa-sm">
                    <div class="text-subtitle2">{{ $t("form.weigTotal") }}: {{ totalWeight }} kg</div>
                  </div>
                </div>
                <q-btn
                  :loading="isLoading"
                  :label="$t('form.labels.submit')"
                  type="submit"
                  color="primary"
                  class="q-ml-sm q-pa-sm"
                />
              </div>
            </div>
          </div>
      </q-form>
    </q-card-section>
  </q-card>
</template>

<script>
import { mapActions, mapGetters } from "vuex";

import ContactInputs from "./ContactInputs";
import ProductInputs from "./ProductInputs";
import OriginInputs from "./OriginInputs";
import DestinationInputs from "./DestinationInputs";

import { MyPackage } from "@freteclick/quasar-common-ui/src/utils/mypackage";
import { formatPhone } from "@freteclick/quasar-common-ui/src/utils/formatter";
import { DOMAIN } from "@freteclick/../../src/config/domain";
import { productName } from "@freteclick/../../package.json";

export default {
  name: "PageContainer",

  components: {
    ContactInputs,
    ProductInputs,
    OriginInputs,
    DestinationInputs,
  },

  props: {
    // partnerId: {
    //   type: Number,
    //   required: false
    // },
    contact: {
      type: Object,
      required: true,
    },
    product: {
      type: Object,
      required: true,
    },
    origin: {
      type: Object,
      required: true,
    },
    destination: {
      type: Object,
      required: true,
    },
    productTypeLabel: {
      type: String,
      required: true,
    },
    invoiceTaxLabel: {
      type: String,
      required: true,
    },
  },

  data() {
    return {
      groupTable: "",
      isCompany: null,
      //showContacts: true,
      sumCubage: 0,
      sumWeight: 0,
    };
  },

  computed: {
    ...mapGetters({
      isLoading: "quote/isLoading",
      myCompany: "people/currentCompany",
      defaultCompany: "people/defaultCompany",
    }),

    totalCubage() {
      return new Intl.NumberFormat("pt-br").format(this.sumCubage);
    },

    totalWeight() {
      return new Intl.NumberFormat("pt-br").format(this.sumWeight);
    },

    cubage() {
      return parseFloat(this.product.cubage.replace(",", "."));
    },

    logged() {
      let logged = this.getLoggedUser();
      if (logged && logged.email) {
        this.contact.name = logged.realname;;
        this.contact.email = logged.email;
        this.contact.phone = logged.phone;
      }
      return this.isLogged();
    },
  },

  watch: {
    "product.packages"() {
      this.handleCubageAndWeightUpdate();
    },

    cubage(value) {
      console.log(value);
      this.product.sumCubage = value;
    },

    sumCubage(value) {
      this.product.sumCubage = value;
    },
  },

  methods: {
    ...mapActions({
      quote: "quote/quote",
    }),
    isLogged() {
      return this.getLoggedUser() !== null && this.getLoggedUser().user;
    },
    getLoggedUser() {
      return this.$store.getters["auth/user"];
    },
    isPublic() {
      return this.$route.name == "QuoteIndex";
    },
    formatPhone(phone) {
      return formatPhone(phone);
    },

    logout() {
      if (this.isPublic) {
        this.$store.dispatch("auth/logOut");
      } else {
        //this.showContacts = true;
      }
    },

    validate() {
      let isValid = true;
      let message = "";

      if (!this.logged) {
        // name
        if (!this.contact.name.length) {
          message = "O campo NOME não é válido";
          isValid = false;
        }

        // email
        else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.contact.email)) {
          message = "O campo E-MAIL não é válido";
          isValid = false;
        }

        // phone
        else {
          const digits = (this.contact.phone || '').replace(/\D/g, '');
          if (!(digits.length >= 10 && digits.length <= 11)) {
          message = "O campo FONE não é válido";
          isValid = false;
          }
        }
      }

      // origin
      if (
        !this.origin.city.length ||
        !this.origin.state.length ||
        !this.origin.country.length
      ) {
        message = "O campo ORIGEM não é válido";
        isValid = false;
      }

      // destination
      else if (
        !this.destination.city.length ||
        !this.destination.state.length ||
        !this.destination.country.length
      ) {
        message = "O campo DESTINO não é válido";
        isValid = false;
      }
      // product type
      else if (!this.product.product.length) {
        const label = this.productTypeLabel.toUpperCase();
        message = "O campo " + label + " não é válido";
        isValid = false;
      }
      // product type
      else if (!this.product.type.length) {
        const label = this.productTypeLabel.toUpperCase();
        message = "O campo " + label + " não é válido";
        isValid = false;
      }

      // product price
      else if (!(parseFloat(this.product.totalPrice.replace(",", ".")) > 0)) {
        const label = this.invoiceTaxLabel.toUpperCase();
        message = "O campo " + label + " não é válido";
        isValid = false;
      }

      // packages
      else if (!(parseFloat(this.product.cubage.replace(",", ".")) > 0)) {
        if (!this.product.packages.length) {
          message = "Os dados dos produtos não foram informados";
          isValid = false;
        } else {
          let row = 0;

          for (let index in this.product.packages) {
            MyPackage._package = this.product.packages[index];

            row = parseInt(index) + 1;

            if (!(MyPackage.quantity() > 0)) {
              message = `O campo QUANTIDADE da fila ${row} não é válido`;
              isValid = false;
              break;
            } else if (!(MyPackage.weight() > 0)) {
              message = `O campo PESO da fila ${row} não é válido`;
              isValid = false;
              break;
            } else if (!(MyPackage.height() > 0)) {
              message = `O campo ALTURA da fila ${row} não é válido`;
              isValid = false;
              break;
            } else if (!(MyPackage.width() > 0)) {
              message = `O campo LARGURA da fila ${row} não é válido`;
              isValid = false;
              break;
            } else if (!(MyPackage.depth() > 0)) {
              message = `O campo PROFUNDIDADE da fila ${row} não é válido`;
              isValid = false;
              break;
            }
          }
        }
      }

      if (isValid === false && message.length)
        this.$q.notify({
          message: message,
          type: "negative",
          position: "bottom",
        });

      return isValid;
    },

    payload() {
      let packages = null;
      let cubage = parseFloat(this.product.cubage.replace(",", "."));

      if (cubage > 0) packages = cubage;
      else {
        if (this.product.packages.length) {
          packages = [];

          for (let index in this.product.packages) {
            MyPackage._package = this.product.packages[index];

            packages.push({
              qtd: MyPackage.quantity(),
              weight: MyPackage.weight(),
              height: MyPackage.height(),
              width: MyPackage.width(),
              depth: MyPackage.depth(),
            });
          }
        }
      }

      // if user is logged, contact can be null
      let contact = [];
      if (this.contact) {
        contact = {
          name: this.contact.name,
          email: this.contact.email,
          phone: this.contact.phone,
        };
      }

      return {
        // partnerId: this.partnerId,
        app: productName,
        groupTable: this.groupTable,
        selectedCompany: this.myCompany ? this.myCompany.id : null,
        domain:
          this.myCompany && this.myCompany.domains.length > 0
            ? this.myCompany.domains[0].domain
            : DOMAIN,
        origin: this.getAddress(this.origin),
        destination: this.getAddress(this.destination),
        productTotalPrice: parseFloat(
          this.product.totalPrice.replace(",", ".")
        ),
        packages: packages,
        productType: this.product.type + "," + this.product.product,
        contact: contact,
      };
    },

    getAddress(target) {
      let address = {
        country: target.country,
        state: target.state,
        city: target.city,
      };

      if (
        this.isNotEmpty(target.district) &&
        this.isNotEmpty(target.postalCode) &&
        this.isNotEmpty(target.street) &&
        this.isNotEmpty(target.number)
      ) {
        address["district"] = target.district;
        address["postal_code"] = target.postalCode;
        address["street"] = target.street;
        address["number"] = target.number;
        address["complement"] = target.complement;
      }

      return address;
    },

    isNotEmpty(target) {
      if (target !== null) return target.length > 0;

      return false;
    },

    handleCubageAndWeightUpdate() {
      let totalCubage = 0;
      let totalWeight = 0;

      for (let index in this.product.packages) {
        MyPackage._package = this.product.packages[index];

        totalCubage += MyPackage.cubage();
        totalWeight += MyPackage.quantity() * MyPackage.weight();
      }

      MyPackage.clean();

      this.sumCubage = isNaN(totalCubage) ? 0 : totalCubage;
      this.sumWeight = isNaN(totalWeight) ? 0 : totalWeight;
    },

    onSubmit() {
      if (this.validate() === false) return;

      let payload = {
        values: this.payload(),
      };

      if (this.myCompany !== null)
        payload.query = {
          selectedCompany: this.myCompany.id,
        };

      this.quote(payload);
    },
  },
};
</script>
<style>
.ul-info {
  margin: auto;
  max-width: 300px;
  font-size: 16px;
}
</style>
