<script setup lang="ts">
import useState from '~/hooks/useState'
const { t } = useI18n()

const profile = ref({
  username: 'jesusperez',
  fullname: 'Jesús Pérez Lorenzo',
  bgcolors: ['bg-emerald-500', 'bg-purple-500', 'bg-yellow-500', 'bg-gray-800', 'bg-pink-500'],
  bgcolor: 'bg-dark-800',
  photourl: 'https://avatars.githubusercontent.com/u/59666?v=4',
})
const profile_showsettings= ref(false)
const profile_editing= ref('')
const profile_saveedit = (name: string) => {
  profile_editing.value = ''
}
const profile_edit = (name: string) => {
  profile_editing.value = name
  // this.$nextTick(() => {
  // 	this.$refs[`${name}input`].focus()
  // })
}
const profile_discard = (name: string) => {
  // this.$refs[`${name}input`].value = this[name]
  profile_editing.value = ''
}
const profile_selectcolor = (color: string) => {
  profile.value.bgcolor = color
}
const onSettings = () => {
	profile_showsettings.value= true
}
const onCloseSettings = () => {
	profile_showsettings.value=false
}
const onLogout = () => {
 useState().show_profile.value = false
}
</script>
<template>
  <div class="block flex flex-col w-full h-screen justify-center items-center bg-white">
    <div class="flex flex-col w-75 shadow-md max-w-full h-70 rounded-lg transition-colors ease-in" :class="profile.bgcolor">
      <div v-show="profile_showsettings" class="fixed z-10 flex flex-col w-75 max-w-full h-70 text-center text-white p-5 origin-top-left transform scale-0 transition-all" :class="{'scale-100': profile_showsettings}">
        <span class="text-2xl font-bold">{{ t('profile.Settings','Settings') }}</span>
        <div class="flex flex-col space-y-2 mt-5 flex-grow">
          <span class="text-md font-bold">{{ t('profile.backgroud_color','Background color') }}:</span>
          <div class="w-full flex justify-center space-x-2">
            <span v-for="c in profile.bgcolors" :key="c">
              <button class="flex border-4 border-white inline cursor-pointer w-8 h-8 rounded-full" :class="c" :disabled="profile.bgcolor == c" @click="profile_selectcolor(c)"></button>
            </span>
          </div>
        </div>
        <div class="flex justify-center flex-shrink align-end">
          <button class="rounded bg-transparent font-bold text-lg fill-current text-white" @click="onCloseSettings">
            {{ t(`profile.Close`,'Close') }}
          </button>
        </div>
      </div>
      <div v-show="!profile_showsettings">
        <div class="flex w-full justify-between p-2 mt-1">
          <button  @click="onSettings" class="flex space-x-1 group font-semibold items-center bg-transparent cursor-pointer text-white fill-current">
            <svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <span class="origin-left transform scale-x-0 group-focus:scale-x-100 group-hover:scale-x-100 transition-transform ease-in select-none text-lg">{{ t('profile.Settings','Settings') }}</span>
          </button>
          <button @click="onLogout" class="flex space-x-1 group font-semibold items-center bg-transparent cursor-pointer text-white fill-current">
            <span class="origin-right transform scale-x-0 group-focus:scale-x-100 group-hover:scale-x-100 transition-transform ease-in select-none text-lg">{{ t('profile.Logout','Logout') }}</span>
            <svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
            </svg>
          </button>
        </div>
        <div class="flex flex-col w-full h-full text-center">
          <div class="flex flex-col space-y-2 items-center mb-3">
            <img :src="profile.photourl" alt="Profile Picture" class="rounded-full select-none w-22">
            <div class="text-center relative group">
              <span v-show="profile_editing !== 'fullname'" class="text-xl break-words font-semibold text-white font-sans m-0 p-0 px-2 select-none" title="Double click to edit" @dblclick="profile_edit('fullname')">{{ profile.fullname }}</span>
              <svg v-show="profile_editing != 'fullname'" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-50 inline absolute right-2 -top-3 transform scale-0 group-hover:scale-100 transition-transform" viewBox="0 0 20 20" fill="currentColor">
                <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
                <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
              </svg>
              <input
                v-show="profile_editing == 'fullname'"
                id=""
                type="text"
                name=""
                class="bg-transparent text-xl font-sans w-full p-0 px-2 m-0 text-center text-white font-semibold focus:outline-none focus:animate-pulse"
                :value="profile.fullname"
                spellcheck="false"
                x-ref="fullnameinput"
                title="Enter to save, click outside to discard."
                maxlength="20"
                @keydown.enter="profile_saveedit('fullname')"
                @click="profile_discard('fullname')"
                @keydown.escape="profile_discard('fullname')"
              >
            </div>
            <div class="text-center relative group">
              <span v-show="profile_editing != 'username'" class="text-sm text-wrap font-semibold font-sans m-0 p-0 text-green-100 select-none" title="Double click to edit" @dblclick="profile_edit('username')">{{ profile.username }}</span>
              <svg v-show="profile_editing != 'username'" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-50 inline absolute ml-1 -top-1 transform scale-0 group-hover:scale-100 transition-transform" viewBox="0 0 20 20" fill="currentColor">
                <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
                <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
              </svg>
              <input
                v-show="profile_editing == 'username'"
                id=""
                type="text"
                name=""
                class="inline-block bg-transparent text-sm font-sans p-0 m-0 w-auto text-center font-semibold text-green-100 focus:outline-none focus:animate-pulse"
                :value="profile.username"
                spellcheck="false"
                x-ref="usernameinput"
                title="Enter to save, click outside to discard."
                maxlength="15"
                @keydown.enter="profile_saveedit('username')"
                @click="profile_discard('username')"
                @keydown.escape="profile_discard('username')"
              >
            </div>
          </div>
          <div class="hidden flex flex-row justify-evenly">
            <div class="flex flex-col cursor-pointer hover:opacity-80">
              <span class="text-lg font-bold text-white">11</span>
              <span class="text-green-100 text-sm">Followers</span>
            </div>
            <div class="flex flex-col cursor-pointer hover:opacity-80">
              <span class="text-lg font-bold text-white">52</span>
              <span class="text-green-100 text-sm">Following</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
