<script setup lang="ts">
import { useWindowScroll } from '@vueuse/core'
import { computed, ref } from 'vue'

const isUploading = ref(false)
const isLoading = ref(false)
const experience = ref('')
const firstJob = ref('')
const flexibility = ref('')
const remote = ref('')
const skills = ref(['software', 'saas', 'engineering'])
const skillsOptions = [
  { value: 'software', label: 'Software' },
  { value: 'saas', label: 'SaaS' },
  { value: 'engineering', label: 'Engineering' },
]

const { y } = useWindowScroll()

const isScrolling = computed(() => {
  return y.value > 30
})

const onAddFile = (error: any, file: any) => {
  if (error) {
    console.error(error)
    return
  }

  console.log('file added', file)
}
const onRemoveFile = (error: any, file: any) => {
  if (error) {
    console.error(error)
    return
  }

  console.log('file removed', file)
}
</script>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<script lang="ts">
import axios from 'axios'
import { useNotyf } from '/@src/composable/useNotyf'

export default {
  data() {
    return {
      show: 'password',
      eye: true,
      Loading: false,
      username: null,
      email: null,
      currentPassword: null,
      newPassword: null,
      confirmPassword: null,
      wrongPassword: false,
      smallOpen: false,
      // eye:'src/assets/illustrations/apps/eye.png',
      // hiddenEye:'src/assets/illustrations/apps/hidden.png',
    }
  },
  async created() {
    if (
      localStorage.getItem('token') === null ||
      localStorage.getItem('token').length === 0
    ) {
      console.log('no token provide')
    } else {
      const response = await axios.get('https://mylifeline.tech/api/users/get', {
        headers: {
          'x-access-token': localStorage.getItem('token'),
        },
      })
      response.data.map((item) => {
        this.username = item.username
        this.email = item.email
      })
      console.log('EDIT PROFILE GENERAL : ' + response.data)
    }
  },

  methods: {
    showPassword() {
      if (this.show === 'password') {
        this.show = 'text'
        this.eye = false
      } else if (this.show === 'text') {
        this.show = 'password'
        this.eye = true
      }
    },
    modalShowDelete() {
      this.smallOpen = true
    },
    async deleteAccount() {
      this.Loading = true
      const response = await axios.post(
        'https://mylifeline.tech/api/users/delete',
        {},
        {
          headers: {
            'x-access-token': localStorage.getItem('token'),
          },
        }
      )
      this.Loading = false
    },
    async changePassword() {
      this.Loading = true
      if (this.newPassword !== this.confirmPassword) {
        this.wrongPassword = true
        this.Loading = false
        setTimeout(() => {
          this.wrongPassword = false
        }, 2000)
      } else {
        const response = await axios.post(
          'https://mylifeline.tech/api/users/save',
          {
            username: this.username,
            email: this.email,
            newpassword: this.newPassword,
            currentpassword: this.currentPassword,
          },
          {
            headers: {
              'x-access-token': localStorage.getItem('token'),
            },
          }
        )

        this.Loading = false
        useNotyf().success('Your changes have been successfully saved!')
        console.log('EDIT PROFILE GENERAL PASSWORD CHANGE' + response.data)
      }
    },
  },
}
</script>

<template>
  <div class="account-box is-form is-footerless">
    <div class="form-head stuck-header" :class="[isScrolling && 'is-stuck']">
      <div class="form-head-inner">
        <div class="left">
          <h3>General Info</h3>
          <p>Edit your account's general information</p>
        </div>
        <div class="right">
          <div class="buttons">
            <VButton
              :to="{ name: 'app' }"
              icon="lnir lnir-arrow-left rem-100"
              light
              dark-outlined
            >
              Go Back
            </VButton>
            <VButton
              color="primary"
              raised
              :loading="Loading"
              tabindex="0"
              @keydown.space.prevent="onSave"
              @click="changePassword"
            >
              Save Changes
            </VButton>
            <VButton
              color="danger"
              raised
              :loading="Loading"
              tabindex="0"
              @keydown.space.prevent="onSave"
              @click="modalShowDelete"
            >
              Delete
            </VButton>
          </div>
        </div>
      </div>
    </div>
    <div class="form-body">
      <!--Fieldset-->
      <div class="fieldset">
        <div class="fieldset-heading">
          <h4>Personal Info</h4>
          <p>Others diserve to know you more</p>
        </div>

        <div class="columns is-multiline">
          <!--Field-->
          <div class="column is-12">
            <VField>
              <VControl icon="feather:user">
                <input
                  type="text"
                  class="input"
                  placeholder="User name"
                  autocomplete="user-name"
                  :value="username"
                />
              </VControl>
            </VField>
          </div>
          <!--Field-->
          <div class="column is-12">
            <VField>
              <VControl icon="feather:mail">
                <input
                  type="email"
                  class="input"
                  placeholder="Email"
                  autocomplete="email"
                  :value="email"
                />
              </VControl>
            </VField>
          </div>
          <div class="column is-12">
            <VField>
              <VControl style="position: relative" icon="feather:lock">
                <input
                  v-model="currentPassword"
                  :type="show"
                  class="input"
                  placeholder="Current password"
                  autocomplete="country-name"
                />
                <div
                  style="
                    max-width: 25px;
                    width: 100%;
                    position: absolute;
                    right: 16px;
                    top: 8px;
                    cursor: pointer;
                  "
                  @click="showPassword"
                >
                  <img v-if="eye === true" src="src/assets/illustrations/apps/eye.png" />
                  <img
                    v-if="eye === false"
                    src="src/assets/illustrations/apps/hidden.png"
                  />
                </div>
              </VControl>
            </VField>
          </div>
          <!--Field-->
          <div class="column is-6">
            <VField>
              <VControl style="position: relative" icon="feather:lock">
                <input
                  v-model="newPassword"
                  :type="show"
                  class="input"
                  placeholder="New password"
                  autocomplete="new-password"
                />
                <div
                  style="
                    max-width: 25px;
                    width: 100%;
                    position: absolute;
                    right: 16px;
                    top: 8px;
                    cursor: pointer;
                  "
                  @click="showPassword"
                >
                  <img v-if="eye === true" src="src/assets/illustrations/apps/eye.png" />
                  <img
                    v-if="eye === false"
                    src="src/assets/illustrations/apps/hidden.png"
                  />
                </div>
              </VControl>
            </VField>
          </div>
          <!--Field-->
          <div class="column is-6">
            <VField>
              <VControl style="position: relative" icon="feather:lock">
                <input
                  v-model="confirmPassword"
                  :type="show"
                  class="input"
                  placeholder="Confirm password"
                  autocomplete="new-password"
                />
                <div
                  style="
                    max-width: 25px;
                    width: 100%;
                    position: absolute;
                    right: 16px;
                    top: 8px;
                  "
                  @click="showPassword"
                >
                  <img v-if="eye === true" src="src/assets/illustrations/apps/eye.png" />
                  <img
                    v-if="eye === false"
                    src="src/assets/illustrations/apps/hidden.png"
                  />
                </div>
              </VControl>
            </VField>
          </div>
          <h1
            v-show="wrongPassword"
            style="text-align: center; color: red; width: 100%; font-size: 15px"
          >
            Password does not match
          </h1>
        </div>
      </div>
    </div>
  </div>
  <VModal
    :open="smallOpen"
    title="Share"
    size="small"
    actions="center"
    rounded
    @close="smallOpen = false"
  >
    <template #content>
      <h3 style="text-align: center">
        Are you sure that you want to delete this account?
      </h3>
    </template>
    <template #action="{ close }">
      <VButton color="danger" rounded raised @click="close()">NO</VButton>
      <VButton
        :loading="Loading"
        color="primary"
        rounded
        raised
        :disabled="disabled"
        @click="deleteAccount"
        >YES</VButton
      >
    </template>
  </VModal>
</template>

