<template>
    <div class="general my-account flex flex-col items-center w-full h-full p-8">
        <main class="flex main-part flex-col px-8 mt-6 w-[720px]">
            <h1 id="general_acct_info_user_name" class="text-[32px] leading-[64px] font-medium mb-2">
                {{ name }}
            </h1>
            <div class="general-status-container">
                <Badge displayText="Admin" :isActivated="is_admin"/>
                <Badge displayText="Suspended" :isActivated="!is_active"/>
            </div>
            <div id="general_account_visit_info" class="w-full border-b border-b-[#CBD5E1] border-b-[1px] mt-3 pb-4
                w-full">
                Total visits <span class="text-[#0099FF]">
                    {{ visitTime }}
                </span> times.
            </div>
        </main>
        <main class="flex flex-col pt-6 px-8 w-[720px]">
            <h1 class="text-[20px] font-medium mb-4">
                {{ i18next.t("AcctMgmt.UserInfo") }}
            </h1>
            <div class="row w-full flex py-2 h-[40px] mb-4 items-center">
                <div class="field-label text-sm flex items-center font-medium mr-4">
                    <span class="align-right-span flex w-[80px]">
                        {{ i18next.t("AcctMgmt.Account") }}
                    </span>
                </div>
                <div class="account flex flex-col">
                    <span class="flex text-[#0F172A] text-[16px]">{{ username }}</span>
                    <div v-show="false" class="error-wrapper my-2">                    
                        <div class="error-msg-section flex justify-start">
                            <img src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
                            <span class="error-msg-text flex text-[#FF3366] h-[24px]">
                                {{ i18next.t("AcctMgmt.AccountNotUnique") }}
                            </span>
                        </div> 
                    </div>
                </div>
            </div>
            <div class="row w-full flex py-2 h-[40px] mb-4 items-center text-[14px]">
                <div class="field-label text-sm flex font-medium mr-4 box-border">
                    <span class="flex w-[80px]">
                        {{ i18next.t("AcctMgmt.FullName") }}
                    </span>
                </div>
                <input v-if='isNameEditable' id="input_name_field"
                    class="w-[280px] h-[40px] rounded p-1 border border-[1px] border-[#64748B] flex items-center outline-none"
                    v-model="inputName"
                    autocomplete="off"
                />
                <div v-else class="not-editable displayable name flex w-[280px]">
                    {{ name }}
                </div>
                <button v-if='isNameEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[32px] w-[80px] items-center
                    bg-[#0099FF] justify-center cursor-pointer ml-[112px]"
                    @click="onSaveNameClick">
                    {{ i18next.t("Global.Save") }}
                </button>
                <button v-if='isNameEditable' class="flex cancel-btn rounded-full text-[#64748B] h-[32px] w-[80px] items-center
                    border-[#64748B] border-[1px] justify-center cursor-pointer ml-[8px]"
                    @click="onCancelNameClick">
                        {{ i18next.t("Global.Cancel") }}
                </button>
                <button v-else class="flex save-btn rounded-full text-[#666666] h-[32px] w-[80px] items-center
                    bg-[#FFFFFF] justify-center cursor-pointer ml-[204px] border border-[#666666] 
                    box-border"
                    @click="onEditNameClick"    
                >
                    {{ i18next.t("Global.Edit") }}
                </button>
            </div>
            <div class="row w-full flex py-2 mb-4  border-b border-b-[#CBD5E1] border-b-[1px]">
                <div class="field-label flex flex-col text-sm font-medium mr-4">
                    <span class="flex h-[40px] w-[80px] items-center">
                        {{ i18next.t("AcctMgmt.Password") }}
                    </span>
                    <div class="flex dummy-cell"></div>
                </div>
                <div class="flex input-and-error-msg flex-col w-[280px]">
                    <div v-if='isPwdEditable' class="input-and-eye flex items-center h-[40px] relative border-[1px] rounded"
                        :class="{'border-[#FF3366]': !isPwdLengthValid, 'border-[#64748B]': isPwdLengthValid,}"
                    >
                        <input class="outline-none p-1 w-[280px]" :type="isPwdEyeOn ? 'text' : 'password'"
                            v-model="inputPwd"
                            autocomplete="off" :class="{'color-[#FF3366]': !isPwdLengthValid,
                            'color-[#64748B]': isPwdLengthValid,}"/>
                        <img id='eye_button' v-if="isPwdEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
                            @mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt=""/>
                        <img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer"
                            @mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt="eye"/>
                    </div>
                    <div class="error-msg-section flex justify-start mt-4">
                        <img v-show="!isPwdLengthValid" src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
                        <span class="error-msg-text flex text-[#FF3366] h-[24px] text-[14px]">
                            {{ isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough") }}
                        </span>
                    </div>                    
                </div>
                <div class="button-and-dummy-column flex flex-col text-[14px]">
                    <div class="button-group flex w-min-[80px] h-[40px]">
                       <button v-if='isPwdEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[32px] w-[80px] items-center
                            bg-[#0099FF] justify-center cursor-pointer ml-[112px]"
                            :class="{
                                'border-[#CCCCCC]': !isPwdLengthValid,
                                'border-[1px]': !isPwdLengthValid,
                                'text-[#CCCCCC]': !isPwdLengthValid,
                                'bg-[#FFFFFF]': !isPwdLengthValid,
                                'cursor-auto': !isPwdLengthValid,
                            }"
                            @click="onSavePwdClick">
                                {{ i18next.t("Global.Save") }}
                        </button>
                        <button v-if='isPwdEditable' class="flex cancel-btn rounded-full text-[#64748B] h-[32px] w-[80px] items-center
                            border-[#64748B] border-[1px] justify-center cursor-pointer ml-[8px]"
                            @click="onCancelPwdClick">
                                {{ i18next.t("Global.Cancel") }}
                        </button>
                        <button v-else class="flex reset-btn rounded-full text-[#666666] h-[32px] w-[80px] items-center
                            bg-[#FFFFFF] justify-center cursor-pointer ml-[460px] border border-[#666666]"
                            @click="onResetPwdClick"    
                        >
                            {{ i18next.t("Global.Reset") }}
                        </button> 
                    </div>                    
                    <div class="flex dummy-cell h-[40px]"></div>
                </div>                
            </div>
        </main>
        <main class="session flex flex-col pt-6 px-8 w-[720px]">
            <h1 class="text-[20px] font-medium mb-4">
                {{ i18next.t("AcctMgmt.Session") }}
            </h1>
        </main>
    </div>
</template>

<script>
import { onMounted, computed, ref, } from 'vue';
import i18next from '@/i18n/i18n.js';
import LoginStore from '@/stores/login';
import useAcctMgmtStore from '@/stores/acctMgmt.ts';
import Badge from '../../components/Badge.vue';
import LoadingStore from '@/stores/loading.js';
import { useToast } from 'vue-toast-notification';
import { PWD_VALID_LENGTH } from '@/constants/constants.js';

export default {
    setup() {
        const loadingStore = LoadingStore();
        const loginStore = LoginStore();
        const acctMgmtStore = useAcctMgmtStore();
        const toast = useToast();

        const visitTime = ref(0);
        const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
        const name = computed(() => currentViewingUser.value.name);
        const {
            username,
            is_admin,
            is_active,
        } = currentViewingUser.value;

        const inputName = ref(name.value); // remember to add .value postfix
        const inputPwd = ref('');
        const isNameEditable = ref(false);
        const isPwdEditable = ref(false);
        const isPwdEyeOn = ref(false);
        const isPwdLengthValid = ref(true);

        const onEditNameClick = () => {
            isNameEditable.value = true;           
        }

        const onResetPwdClick = () => {
            isPwdEditable.value = true;
        }

        const onSaveNameClick = async() => {
            if(inputName.value.length > 0) {
                await acctMgmtStore.editAccountName(username, inputName.value);
                await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
                await acctMgmtStore.getUserDetail(username);
                isNameEditable.value = false;
                inputName.value = name.value; // updated value
            } 
        };

        const onSavePwdClick = async() => {
            validatePwdLength();
            if (isPwdLengthValid.value) {
               isPwdEditable.value = false;               
               await acctMgmtStore.editAccountPwd(username, inputPwd.value);
               await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
               inputPwd.value = '';
               // remember to force update
               await acctMgmtStore.getUserDetail(loginStore.userData.username);
            }            
        }

        const onCancelNameClick = () => {
            isNameEditable.value = false;
            inputName.value = name.value;
        };
        
        const onCancelPwdClick = () => {
            isPwdEditable.value = false;
            inputPwd.value = '';
            isPwdLengthValid.value = true;
        };

        const togglePwdEyeBtn = (toBeOpen) => {
            isPwdEyeOn.value = toBeOpen;
        };

        const validatePwdLength = () => {
            isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
        }

        onMounted(async() => {
            loadingStore.setIsLoading(false);
            await acctMgmtStore.getUserDetail(loginStore.userData.username);   
        });

        return {
            i18next,
            username,
            name,
            is_admin,
            is_active,
            visitTime,
            inputName,
            inputPwd,
            isNameEditable,
            isPwdEditable,
            isPwdEyeOn,
            isPwdLengthValid,
            onEditNameClick,
            onResetPwdClick,
            onSavePwdClick,
            onSaveNameClick,
            onCancelPwdClick,
            onCancelNameClick,
            togglePwdEyeBtn,
        };
  },
  components: {
        Badge,
    }
}
</script>