<template>
  <div class="container cabinet_main" @click.stop="close">
    <div class="main">
      <div class="title">Мои данные</div>
      <div class="save_button">
        <button @click="save()" :disabled="loading" style="display: flex; align-items: center">
          <b-spinner
            small
            style="margin-right: 0.5em; border-radius: 50% !important"
            v-if="loading"
            :disabled="loading"
          ></b-spinner>Сохранить
        </button>
      </div>
      <div class="cabinet_block">
        <div class="cabinet_group">
          <b-form-text style="font-size: 0.4em; color: #064482 !important">Фото пользователя</b-form-text>
          <div class="image-uploader">
            <span class="image-uploader-text">Нажмите сюда, чтобы добавить фото</span>
            <input type="file" @change="previewFile" />
            <img :src="imageData" v-if="imageData && imageData.length > 0" />
          </div>
        </div>
        <div class="cabinet_group">
          <b-form-text style="font-size: 0.4em; color: #064482 !important">Имя Фамилия</b-form-text>
          <b-form-input class="cabinet_input" v-model="user.names"></b-form-input>
        </div>
        <div class="cabinet_group">
          <b-form-text style="font-size: 0.4em; color: #064482 !important">Имя пользователя</b-form-text>
          <b-form-input class="cabinet_input" v-model="user.username"></b-form-input>
        </div>
        <div class="cabinet_group">
          <b-form-text
            style="font-size: 0.4em; color: #064482 !important"
          >Электронная почта (E-mail)</b-form-text>
          <b-form-input class="cabinet_input" type="email" v-model="user.email"></b-form-input>
        </div>
        <div class="cabinet_group">
          <b-form-text style="font-size: 0.4em; color: #064482 !important">Номер телефона</b-form-text>
          <b-form-input
            class="cabinet_input"
            type="tel"
            v-model="user.profile.phone"
            @click="changePhone.show = true"
          ></b-form-input>
          <b-modal v-model="changePhone.show" hide-footer hide-header>
            <b-form @submit.prevent="sendPhone">
              <label style="margin-bottom: 1em">Смена номера телефона</label>
              <b-form-input
                id="changePhone"
                type="tel"
                style="margin-bottom: 1.5em"
                placeholder="Введите новый номер телефона"
                v-model="changePhone.phone"
                v-mask="'+7 (###) ### ## ##'"
                :state="changePhone.validation.phone.state"
                required
              ></b-form-input>
              <b-form-invalid-feedback
                id="changePhone-feedback"
              >{{ changePhone.validation.phone.message }}</b-form-invalid-feedback>
              <b-button type="submit" style="margin-top: 2em">Сохранить изменения</b-button>
            </b-form>
          </b-modal>
          <b-modal v-model="changePhoneConfirm.show" hide-footer hide-header>
            <b-form @submit.prevent="confirmSendPhone">
              <label style="font-size: 4em;" v-if="verifyTime">{{ verifyTime }}</label>
              <b-button style="font-size: 1.5em;" v-else @click="sendPhone(true)">Отправить код</b-button>
              <label
                style="font-size: 1em; text-align: center; font-weight: 600; margin-bottom: 3em"
              >
                На ваш номер телефона
                было выслано сообщение с кодом
                введите его в поле
              </label>
              <b-form-input class="cabinet_input" v-model="changePhoneConfirm.token"></b-form-input>
              <b-form-invalid-feedback
                id="changePhone-feedback"
              >{{ changePhoneConfirm.validation.phone.message }}</b-form-invalid-feedback>
              <b-button type="submit" style="margin-top: 2em">Сохранить изменения</b-button>
            </b-form>
          </b-modal>
        </div>
        <div class="cabinet_group">
          <b-form-text style="font-size: 0.4em; color: #064482 !important">Пароль</b-form-text>
          <b-form-input
            class="cabinet_input"
            type="password"
            placeholder="Изменить"
            @click="changePassword.show = true"
            ref="changePassword"
          ></b-form-input>
          <b-modal v-model="changePassword.show" hide-footer hide-header>
            <b-form @submit.prevent="sendPassword">
              <label style="margin-bottom: 1em">Смена пароля</label>
              <b-form-input
                id="changePassword-old"
                type="password"
                style="margin-bottom: 1.5em"
                placeholder="Введите старый пароль"
                v-model="changePassword.old_password"
                :state="changePassword.validation.old_password.state"
                required
              ></b-form-input>
              <b-form-invalid-feedback
                id="changePassword-old-feedback"
              >{{ changePassword.validation.old_password.message }}</b-form-invalid-feedback>
              <b-form-input
                id="changePassword-new"
                type="password"
                placeholder="Введите новый пароль"
                v-model="changePassword.new_password"
                :state="changePassword.validation.new_password.state"
                required
              ></b-form-input>
              <b-form-input
                id="changePassword-new2"
                type="password"
                placeholder="Повторите новый пароль"
                v-model="changePassword.new_password2"
                :state="changePassword.validation.new_password2.state"
                required
              ></b-form-input>
              <b-form-invalid-feedback
                id="changePassword-new2-feedback"
              >{{ changePassword.validation.new_password.message }}</b-form-invalid-feedback>
              <b-button type="submit" style="margin-top: 2em">Сохранить изменения</b-button>
            </b-form>
          </b-modal>
        </div>
      </div>
      <div class="cabinet_block cabinet-card-ml">
        <div>
          <b-button variant="primary mt-3" :href="addCard.url">Добавить карту</b-button>
        </div>

        <div v-if="cards[0]" class="cabinet_group">
          <b-form-text style="font-size: 0.4em; color: #064482 !important">Номер карты</b-form-text>
          <div class="cabinet_input mb-3" v-for="item in cards" :key="item.id">
            <span class="card_span mr-1">{{item.pg_card_hash}}</span>
            <span class="mr-2" style="cursor: pointer;" :disabled="loading" @click="show=true">×</span>
            <b-modal v-model="show" hide-header>
              <p class="text-center pt-3" style="font-size: 1.5rem;">Вы точно хотите удалить?</p>

              <template v-slot:modal-footer>
                <div class="w-100">
                  <b-button variant="primary" class="float-right" @click="show = false">Нет</b-button>
                  <b-button
                    variant="danger"
                    class="float-right mr-3"
                    @click="deleteCard(item.pg_card_id), show=false"
                  >Удалить</b-button>
                </div>
              </template>
            </b-modal>
          </div>
        </div>
        <div v-else class="cabinet_group">
          <span class="card_span mr-1">Вы не добавили карту</span>
        </div>
      </div>
    </div>
  </div>
</template>

import api from "~/service/api.js";
import md5 from "~/service/md5.js";

let weekDays = ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"];

export default {
  async asyncData({ store, redirect, query }) {
    let user = JSON.parse(JSON.stringify(store.state.user));
    user.names = user.first_name + " " + user.last_name;
    try {
      let myObjects = [];

      let successMessage = null;

      if (query.payment_success) {
        let success = JSON.parse(query.payment_success);

        successMessage = `Предоплата брони ${success.name}, ${success.date} ${success.time} на сумму ${success.sum} тг прошла успешно.\n\nЗайдите в личный кабинет, чтобы узнать подоброную информацию`;
      }

      await store.dispatch("getMyBooks");
      if (user.profile.is_provider) {
        myObjects = await store.dispatch("getMyObjects");
      }

      myObjects.forEach(item => {
        item.clicked = false;
      });
      console.log(user);
      return {
        successMessage,
        user,
        myObjects,
        loading: false,
        imageData:
          user.profile &&
          user.profile.photo &&
          user.profile.photo.includes("https")
            ? user.profile.photo
            : "http://80.241.42.214:8000" + user.profile.photo,
        showMore: false,
        showLess: false,
        moreData: {},
        lessData: {
          weekDays,
          selected: 0,
          data: [],
          id: 0,
          loading: false
        },
        changePassword: {
          show: false,
          old_password: "",
          new_password: "",
          new_password2: "",
          validation: {
            old_password: {
              state: null,
              message: ""
            },
            new_password: {
              state: null,
              message: ""
            },
            new_password2: {
              state: null,
              message: ""
            }
          }
        },
        changePhone: {
          show: false,
          phone: "",
          validation: {
            phone: {
              state: null,
              message: ""
            }
          }
        },
        changePhoneConfirm: {
          show: false,
          phone: "",
          validation: {
            phone: {
              state: null,
              message: ""
            }
          }
        },
        count: 90000,
        enterVerify: false
      };
    } catch (error) {
      console.log(error);
    }
  },

  watch: {
    "changePassword.show"(newValue) {
      let element = this.$refs.changePassword;
      element.blur();
    }
  },
  mounted() {
    if (this.successMessage) {
      this.$store.commit("setSuccess", {
        show: true,
        message: this.successMessage
      });
    }
  },
  computed: {
    cards() {
      return this.$store.state.card;
    },

    addCard() {
      return this.$store.state.addCard;
    },

    myBooks() {
      return this.$store.state.myBooks;
    },
    verifyTime() {
      let date = {
        minutes: new Date(this.count).getMinutes(),
        seconds: new Date(this.count).getSeconds(),

        str: null
      };

      if (date.minutes >= 0) {
        date.str = `0${date.minutes}:`;
      }

      if (date.seconds >= 0) {
        date.str += `${date.seconds > 9 ? date.seconds : "0" + date.seconds}`;
      }

      if (date.minutes <= 0 && date.seconds <= 0) {
        date.str = null;
      }

      return date.str;
    }
  },

  data() {
    return {
      show: false
    };
  },

  methods: {
    deleteCard(id) {
      let v = this.$store.dispatch;

      this.$store.dispatch("deleteCard", id);
      setTimeout(function() {
        v("getCard");
      }, 2000);
    },

    async saveChanges() {
      try {
        let schedule = [];
        let closed_days = [];

        this.lessData.loading = true;

        this.lessData.data.forEach((item, index) => {
          if (item.is_closed) {
            closed_days.push(item.day);
          }

          item.windows.forEach((item2, index2) => {
            schedule.push({
              day: item.day,
              from_time: item2.from_time,
              to_time: item2.to_time,
              price: item2.price
            });
          });
        });

        let response = await this.$store.dispatch("putPlayground", {
          data: { schedule, closed_days },
          id: this.lessData.id
        });

        this.$store.commit("setSuccess", {
          show: true,
          message: "Успех!"
        });

        this.lessData.loading = false;
      } catch (error) {
        alert(error.message);
      }
    },
    async sendPassword() {
      try {
        let payload = JSON.parse(JSON.stringify(this.changePassword));
        delete payload.show;
        delete payload.validation;
        this.changePassword.validation = {
          old_password: {
            state: null,
            message: ""
          },
          new_password: {
            state: null,
            message: ""
          },
          new_password2: {
            state: null,
            message: ""
          }
        };
        if (payload.new_password != payload.new_password2) {
          throw {
            response: {
              data: {
                new_password: ["Пароли должны совпадать"],
                new_password2: ["Пароли должны совпадать"]
              }
            }
          };
        }

        delete payload.new_password2;

        let response = await this.$store.dispatch("changePassword", payload);

        this.changePassword.show = false;
        this.changePassword.old_password = "";
        this.changePassword.new_password = "";
        this.changePassword.new_password2 = "";
        this.$store.commit("setSuccess", {
          show: true,
          message: "Пароль успешно изменен!"
        });
      } catch (error) {
        console.log(error.response);

        let { data } = error.response;
        if (data.status) {
          this.changePassword.validation.old_password.state = false;
          this.changePassword.validation.old_password.message = data.status;
        } else {
          for (let key in data) {
            this.changePassword.validation[key].state = false;
            this.changePassword.validation[key].message = data[key][0];
          }
        }
      }
    },
    async sendPhone() {
      try {
        let payload = JSON.parse(JSON.stringify(this.changePhone));
        delete payload.show;
        delete payload.validation;
        payload.phone = payload.phone.replace(/[^\d,+]/g, "");
        let response = await this.$store.dispatch("changePhone", payload);

        this.changePhone.show = false;
        this.changePhoneConfirm.phone = payload.phone;
        this.changePhoneConfirm.show = true;

        this.count = 90000;
        clearInterval(this.interval);

        this.interval = setInterval(() => {
          this.count = this.count - 1000;
          if (this.count <= 0) clearInterval(this.interval);
        }, 1000);
      } catch (error) {
        console.log(error.response);

        let { data } = error.response;
        if (data.status) {
          this.changePhone.validation.phone.state = false;
          this.changePhone.validation.phone.message = data.status;
        } else {
          for (let key in data) {
            this.changePhone.validation[key].state = false;
            this.changePhone.validation[key].message = data[key][0];
          }
        }
      }
    },
    async confirmSendPhone() {
      try {
        let payload = JSON.parse(JSON.stringify(this.changePhoneConfirm));
        delete payload.show;
        delete payload.validation;
        payload.renumber = "True";
        let response = await this.$store.dispatch(
          "confirmChangePhone",
          payload
        );
        this.user.profile.phone = payload.phone;
        this.changePhoneConfirm.show = false;
        this.$store.commit("setSuccess", {
          show: true,
          message: `Ваш телефонный номер успешно изменен.`
        });
      } catch (error) {
        console.log(error.response);

        let { data } = error.response;
        for (let key in data) {
          this.changePhone.validation[key].state = false;
          this.changePhone.validation[key].message = data[key][0];
        }
      }
    },
    async more(index, show) {
      this[show] = false;

      if (show == "showMore") {
        this.myBooks.forEach(item => {
          item.clicked = false;
        });

        this.moreData = this.myBooks[index];
        this.myBooks[index].clicked = true;
      } else {
        this.myObjects.forEach(item => {
          item.clicked = false;
        });

        this.myObjects[index].clicked = true;
        this.myObjects[index].loading = true;

        let playground = await this.$store.dispatch(
          "getPlayground",
          this.myObjects[index].id
        );

        this.lessData.id = this.myObjects[index].id;

        let data = [];
        this.lessData.weekDays.forEach((item, index) => {
          let day = playground.days.find(el => el.day == index + 1);
          data.push(day);
        });

        this.lessData.data = data;
        this.myObjects[index].loading = false;
      }

      this[show] = true;
    },
    close() {
      this.showMore = false;
      this.showLess = false;

      this.myBooks.forEach(item => {
        item.clicked = false;
      });

      this.myObjects.forEach(item => {
        item.clicked = false;
        item.loading = false;
      });
    },
    previewFile(event) {
      try {
        let reader = new FileReader();
        let input = event.target;

        reader.onload = e => {
          this.imageData = e.target.result;
        };

        reader.readAsDataURL(input.files[0]);
        this.user.profile.photo = input.files[0];
      } catch (error) {}
    },

    async save() {
      this.loading = true;

      let form = new FormData();

      let payload = {
        id: this.user.id,
        first_name: this.user.names.split(" ")[0],
        last_name: this.user.names.split(" ")[1],
        username: this.user.username,
        email: this.user.email,
        photo: this.user.profile.photo
      };

      let names = {
        first_name: "Имени",
        last_name: "Фамилии",
        photo: "Аватара"
      };

      if (typeof payload.photo == "string") delete payload.photo;

      for (let key in payload) {
        if (!payload[key]) {
          delete payload[key];
        } else {
          if (key != "id") form.append(key, payload[key]);
        }
      }

      try {
        await this.$store.dispatch("updateUser", { form, id: payload.id });

        this.$store.commit("setSuccess", {
          show: true,
          message: "Изменения прошли успешно"
        });
        this.loading = false;
      } catch (error) {
        console.log(error.response);

        this.loading = false;
      }
    },
    refundlink(moreData) {
      console.log(moreData);
      //
      let pg_description =
        `${moreData.playground.name}, ` +
        `${moreData.date} ` +
        `${moreData.book_windows[0].window.from_time}-${moreData.book_windows[moreData.book_windows.length - 1].window.to_time}, ` +
        `${moreData.playground.location.address}`;
      //
      // let success = {
      //   sum: this.price.pre,
      //   date: `${this.booked[0].date}`,
      //   time: `${this.booked[0].from_time}-${this.booked[this.booked.length - 1].to_time}`,
      //   name: this.data.name,
      //   address: this.data.location.address
      // };

      let pg_user_phone = this.user.profile.phone;
      pg_user_phone = pg_user_phone.replace(/ /g, "");
      pg_user_phone = pg_user_phone.replace("+7", "8");
      pg_user_phone = pg_user_phone.replace("(", "");
      pg_user_phone = pg_user_phone.replace(")", "");

      const today = new Date();
      const pg_refund_date = `${today.getFullYear()}-${today.getMonth() +
        1}-${today.getDate()} ${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`;

      let paybox = {
        pg_merchant_id: 517131,
        pg_refund_amount: moreData.final_price,
        pg_payment_id: moreData.id,
        pg_salt: "40d9fgdflgkdf8"
      };

      let secret_key = "KyOKkJmCaDxPKmCU";

      let ordered = {};
      Object.keys(paybox)
        .sort()
        .forEach(function(key) {
          ordered[key] = paybox[key];
        });

      let sign = "revoke.php;";
      for (let key in ordered) {
        sign += `${ordered[key]};`;
      }
      sign += secret_key;

      paybox.pg_sig = md5(sign);

      let result = "https://api.paybox.money/revoke.php?";

      for (let key in paybox) {
        result += `${key}=${paybox[key]}&`;
      }
      return result;
    }
  }
};