<template>
  <f7-page name="addphoto">
    <f7-navbar title="Add Photos" back-link="Back"></f7-navbar>

    <f7-block>
      <f7-row>
        <f7-col
          ><div class="wrapper">
            <span style="font-size: 10px; margin-left: 5px"
              >Profile Picture</span
            ><br />
            <img
              class="image--cover"
              :src="image_url1"
              alt
              @click="launchFilePicker(1)"
            /></div
        ></f7-col>

        <f7-col>
          <div class="wrapper">
            <span style="font-size: 10px; margin-left: 5px">Add Photo</span>
            <span v-if="delete_photo2">
              <f7-link @click="deletePhoto(2)">
                <i class="f7-icons size-29 color-icon-red">bin_xmark_fill</i>
              </f7-link>
            </span>

            <br />
            <img
              class="image--cover"
              :src="image_url2"
              alt
              @click="launchFilePicker(2)"
            /></div
        ></f7-col>
      </f7-row>

      <f7-row>
        <f7-col
          ><div class="wrapper">
            <span style="font-size: 10px; margin-left: 5px">Add Photo</span>
            <span v-if="delete_photo3">
              <f7-link @click="deletePhoto(3)">
                <i class="f7-icons size-29 color-icon-red">bin_xmark_fill</i>
              </f7-link>
            </span>

            <br />
            <img
              class="image--cover"
              :src="image_url3"
              alt
              @click="launchFilePicker(3)"
            /></div
        ></f7-col>
        <f7-col
          ><div class="wrapper">
            <span style="font-size: 10px; margin-left: 5px">Add Photo</span>

            <span v-if="delete_photo4">
              <f7-link @click="deletePhoto(4)">
                <i class="f7-icons size-29 color-icon-red">bin_xmark_fill</i>
              </f7-link>
            </span>

            <br />
            <img
              class="image--cover"
              :src="image_url4"
              alt
              @click="launchFilePicker(4)"
            /></div
        ></f7-col>
      </f7-row>

      <f7-row>
        <f7-col
          ><div class="wrapper">
            <Media
              :kind="'video'"
              :muted="true"
              :src="image_url5"
              :autoplay="false"
              :controls="true"
              :loop="true"
              :ref="'fish'"
              :style="{ width: '50%', align: 'left' }"
            >
            </Media
            ><br />

            <img
              class="img-class"
              :src="addvideo"
              alt
              @click="launchFilePicker(5)"
            />
            <span v-if="delete_photo5">
              <f7-link @click="deletePhoto(5)">
                <i class="f7-icons size-29 color-icon-red">bin_xmark_fill</i>
              </f7-link>
            </span>
          </div></f7-col
        >
        <f7-col
          ><div class="wrapper">
            <Media
              :kind="'video'"
              :muted="true"
              :src="image_url6"
              :autoplay="false"
              :controls="true"
              :loop="true"
              :ref="'fish'"
              :style="{ width: '50%' }"
            >
            </Media
            ><br />

            <img
              class="img-class"
              :src="addvideo"
              alt
              @click="launchFilePicker(6)"
            />
            <span v-if="delete_photo6">
              <f7-link @click="deletePhoto(6)">
                <i class="f7-icons size-29 color-icon-red">bin_xmark_fill</i>
              </f7-link>
            </span>
          </div></f7-col
        >
      </f7-row>
    </f7-block>

    <div class="align-center">
      <f7-block>
        <input
          type="file"
          ref="file"
          style="display: none"
          @change="onFilePicked"
        />
      </f7-block>
    </div>
  </f7-page>
</template>

<script>
import Media from "@dongido/vue-viaudio";

import { mixin } from "../../js/mixin";

export default {
  name: "app",
  components: {
    mixins: [mixin],
    Media,
  },
  data() {
    return {
      name: null,
      email: null,
      password: null,
      photoURL: null,
      addvideo: "https://penpalamerica.com/images/addvideo.jpg",
    };
  },
  computed: {
    delete_photo2() {
      return this.$store.getters.delete_photo2;
    },

    delete_photo3() {
      return this.$store.getters.delete_photo3;
    },

    delete_photo4() {
      return this.$store.getters.delete_photo4;
    },
    delete_photo5() {
      return this.$store.getters.delete_photo5;
    },
    delete_photo6() {
      return this.$store.getters.delete_photo6;
    },

    user() {
      return this.$store.getters.user;
    },

    image_url() {
      return this.$store.getters.image_url;
    },
    image_url1() {
      return this.$store.getters.image_url1;
    },
    image_url2() {
      return this.$store.getters.image_url2;
    },
    image_url3() {
      return this.$store.getters.image_url3;
    },
    image_url4() {
      return this.$store.getters.image_url4;
    },
    image_url5() {
      return this.$store.getters.image_url5;
    },
    image_url6() {
      return this.$store.getters.image_url6;
    },

    files() {
      return this.$store.getters.files;
    },
    photo_url() {
      return this.$store.getters.photo_url;
    },
  },
  watch: {},

  methods: {
    deletePhoto(value) {
      //console.log("Delete Account");
      var dialog = this.$f7.dialog
        .create({
          title: "Delete Photo?",
          text: "Do you want to Delete this Photo?",
          content: "",

          buttons: [{ text: "No", close: true }, { text: "Yes" }],
          onClick: (dialog, index) => {
            if (index == 1) {
              const app = this.$f7;
              //var payload = {};
              //payload.profileMessage = response;
              var payload = {};
              payload.email = this.user[0].email;
              payload.domain = this.user[0].domain;
              payload.url = value;
              this.$store.dispatch("deletePhoto", payload);
              this.$f7.dialog.close();
              app.panel.close();
            } else {
            }
          },
          on: {
            open: function () {
              //console.log("OPEN");
            },
          },
        })
        .open();
    },

    //    launchFilePicker() {
    //    this.$refs.file.click();
    //  },
    // onFilePicked() {
    //read the image file
    // console.log("let me know");
    //this.$store.dispatch("readFile", "setImageURL");
    // },

    launchFilePicker(value) {
      if (value == "1") {
        this.photoURL = "1";
      }

      if (value == "2") {
        this.photoURL = "2";
      }

      if (value == "3") {
        this.photoURL = "3";
      }

      if (value == "4") {
        this.photoURL = "4";
      }

      if (value == "5") {
        this.photoURL = "5";
      }

      if (value == "6") {
        this.photoURL = "6";
      }

      this.$refs.file.click();
    },
    async onFilePicked() {
      const self = this;
      //read the image file
      // console.log("let me know which photo", this.photoURL);
      var action_name1 = "setImageURL" + this.photoURL;
      var payload1 = {};
      payload1.action_name = action_name1;
      payload1.url = this.photoURL;
      await this.$store.dispatch("readFilePlus", payload1);
      // console.log("how far");
      if (self.files) {
        //console.log("files to update", self.files);
        //console.log("self.files[0]", self.files[0]);
        var payload = {};
        payload.files = self.files[0];
        payload.url = this.photoURL;
        payload.email = self.user[0].email;
        payload.domain = self.user[0].domain;
        //console.log("self.user[0].email;", self.user[0].email);

        var url1 = await self.$store.dispatch(
          "uploadImageMySQLAddPhoto",
          payload
        );
        //console.log("url2", url1);
      }
    },
  },

  created() {
    if (this.user[0].photo_url1 != null) {
      this.$store.commit("setImageURL1", this.user[0].photo_url1);
    }

    if (this.user[0].photo_url2 != "") {
      this.$store.commit("setDeletePhoto2", true);
      this.$store.commit("setImageURL2", this.user[0].photo_url2);
      //console.log("photo2");
    }

    if (this.user[0].photo_url3 != "") {
      this.$store.commit("setDeletePhoto3", true);
      this.$store.commit("setImageURL3", this.user[0].photo_url3);
    }

    if (this.user[0].photo_url4 != "") {
      this.$store.commit("setDeletePhoto4", true);
      this.$store.commit("setImageURL4", this.user[0].photo_url4);
    }

    if (this.user[0].photo_url5 != "") {
      5;
      this.$store.commit("setDeletePhoto5", true);
      this.$store.commit("setImageURL5", this.user[0].photo_url5);
    }

    if (this.user[0].photo_url6 != "") {
      this.$store.commit("setDeletePhoto6", true);
      this.$store.commit("setImageURL6", this.user[0].photo_url6);
    }

    if (this.user[0].name != null) {
      this.$store.commit("setDisplayName", this.user[0].name);
    }
    if (this.user[0].location != null) {
      this.$store.commit("setUserLocation", this.user[0].location);
    }
    if (this.user[0].profileMessage != null) {
      this.$store.commit("setProfileMessage", this.user[0].profileMessage);
    }
  },
};
</script>

<style scoped>
.size-29 {
  font-size: 10px;
}

.color-icon-red {
  color: #ff0000;
}

.wrapper {
  text-align: center;
}

.image--cover {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  margin: 10px;
  object-fit: cover;
  object-position: center;
}

.video--cover {
  margin-left: 5px;
  object-fit: cover;
  object-position: center;
}
.align-center {
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  position: relative;
}
.img-class {
  width: 50px;
}
</style>