<template>
    <UiContainer>
        <form class="w-[85%] mx-auto" @submit.prevent="checkoutStore.sendForm">
            <div v-if="userStore.isLogged" class="space-25-55">

                <div class="w-full flex items-center justify-center">
                    <div class="flex justify-between">
                        <div class="flex items-center gap-[25px] text-gray dark:text-button-disabled">
                            <div class="px-6 py-3 mx-auto">
                                {{ $t("login") }}
                            </div>
                            <div
                                class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3">
                                {{ $t("address") }}
                            </div>
                            <div class="px-6 py-3 mx-auto">
                                {{ $t("summary") }}
                            </div>
                            <div class="px-6 py-3 mx-auto">
                                {{ $t("order_placed") }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="space-y-[30px]">
                    <h2 class="h2-bold-bounded">
                        {{ $t("Account address") }}
                    </h2>
                    <div class="flex flex-col gap-[30px] xl:flex-row">
                        <div class="flex flex-col w-1/2 gap-[30px]">
                            <CheckoutInput v-model="checkoutStore.userName" :id="1" disabled>{{ $t("first_name")
                                }} </CheckoutInput>
                            <CheckoutInput v-model="checkoutStore.lastName" :id="2" disabled>{{ $t("surname")
                                }} </CheckoutInput>
                            <CheckoutInput v-model="checkoutStore.address" :id="3" disabled>{{ $t("address")
                                }} </CheckoutInput>
                            <CheckoutInput v-model="checkoutStore.postCode" :id="4" disabled>{{ $t("post_code")
                                }} </CheckoutInput>
                        </div>
                        <div class="flex flex-col w-1/2 gap-[30px]">
                            <CheckoutInput v-model="checkoutStore.city" :id="5" disabled>{{ $t("city")
                                }} </CheckoutInput>
                            <CheckoutInput v-model="checkoutStore.country" :id="6" disabled>{{ $t("country")
                                }} </CheckoutInput>
                            <CheckoutInput v-model="checkoutStore.phoneNumber" :id="7" disabled>{{ $t("phone")
                                }} </CheckoutInput>
                        </div>
                    </div>
                </div>
                <div class="space-y-[30px]">
                    <h2 class="h2-bold-bounded">
                        {{ $t("Shipping details") }}
                    </h2>
                    <div class="relative">
                        <input v-model="checkoutStore.accountPhoneNumber" type="text"
                            class="border border-block placeholder:text-bg-dark dark:placeholder:text-bg-light rounded-lg px-6 h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
                    </div>
                    <div class="flex items-center gap-2">
                        <input @change="(event: Event) => {
                            const target = event.target as HTMLInputElement
                            target.checked ? checkoutStore.vUseAccountPhoneNumber = true : checkoutStore.vUseAccountPhoneNumber = false
                        }" type="checkbox" class="border border-button !bg-inherit" />
                        <p>{{ $t('use_account_phone') }}</p>
                    </div>
                </div>
                <div class="space-y-[30px]">
                    <h2 class="h2-bold-bounded">
                        {{ $t("Select delivery address") }}
                    </h2>
                    <div class="flex items-center justify-center gap-[25px] h-[225px]">
                        <div class="w-[500px] flex flex-col gap-4 h-full">
                            <div v-for="(item, index) in checkoutStore.addressesList" :key="index"
                                :class="['flex h-full flex-col py-[15px] px-[25px] gap-[15px] rounded-lg border-2', checkoutStore.activeAddress === item ? 'border-button' : 'border-block']">
                                <div
                                    :class="['flex flex-col justify-between mt-1 h-full', checkoutStore.activeAddress !== item && 'text-gray dark:text-button-disabled']">
                                    <span>{{ item.address.name }} {{ item.address.surname }}</span>
                                    <span>{{ item.address.street }}</span>
                                    <span>{{ item.address.postcode }} {{ item.address.city }}</span>
                                    <span>{{ item.address.country_iso }}</span>
                                </div>
                                <div class="flex items-center gap-2 border-t pt-[15px] border-block">
                                    <input :checked="checkoutStore.activeAddress ? true : false" @change="(event: Event) => {
                                        const target = event.target as HTMLInputElement
                                        target.checked ? checkoutStore.activeAddress = item : checkoutStore.activeAddress = null;
                                        checkoutStore.isOpen = false;
                                    }" type="checkbox" class="border border-button !bg-inherit" />
                                    <p>{{ $t('choose_default_address') }}</p>
                                </div>
                            </div>
                        </div>
                        <p class="uppercase">{{ $t("or") }}</p>
                        <div @click="() => {
                            checkoutStore.isOpen = !checkoutStore.isOpen
                            checkoutStore.activeAddress = null
                        }"
                            :class="['cursor-pointer w-[500px] py-[15px] px-[25px] rounded-lg border-2 flex flex-col items-center justify-center h-full', checkoutStore.isOpen ? 'border-button text-button' : 'text-gray border-block ']">
                            <h4
                                :class="['font-inter text-base leading-[150%] uppercase text-[16px] sm:text-[20px] border-b', checkoutStore.isOpen ? 'border-button' : 'border-gray']">
                                {{ $t("add_new_address") }}
                            </h4>
                        </div>
                    </div>

                    <div v-if="checkoutStore.isOpen"
                        class="flex flex-col items-center gap-[30px] justify-center w-full">
                        <div class="flex flex-col gap-[30px] xl:flex-row w-full">
                            <div class="flex flex-col w-1/2 gap-[30px]">
                                <CheckoutInput v-model="checkoutStore.vNewAddressName" :placeholder="$t('first_name')"
                                    :id="8">{{ $t("first_name") }}
                                </CheckoutInput>
                                <CheckoutInput v-model="checkoutStore.vNewAddressAddress" :placeholder="$t('address')"
                                    :id="9">{{ $t("address") }}
                                </CheckoutInput>
                                <CheckoutInput v-model="checkoutStore.vNewAddressCity" :placeholder="$t('city')"
                                    :id="10">{{ $t("city") }}
                                </CheckoutInput>
                            </div>
                            <div class="flex flex-col w-1/2 gap-[30px]">
                                <CheckoutInput v-model="checkoutStore.vNewAddressSurname" :placeholder="$t('surname')"
                                    :id="11">{{ $t("surname") }}
                                </CheckoutInput>
                                <CheckoutInput v-model="checkoutStore.vNewAddressCountry" :placeholder="$t('country')"
                                    :id="12">{{ $t("country") }}
                                </CheckoutInput>
                                <CheckoutInput v-model="checkoutStore.vNewAddressCode" :placeholder="$t('post_code')"
                                    :id="13">{{ $t("post_code") }}
                                </CheckoutInput>
                            </div>
                        </div>
                        <form @submit.prevent="checkoutStore.uploadAddress()">
                            <span v-if="addressValidation === false" class="text-red"> {{
                                $t("Remember to select a shipping address") }}</span>
                            <div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
                                <button type="submit"
                                    :class="['h-[40px] cursor-pointer min-w-40 rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px] bg-button text-text-dark group-hover:bg-button-hover']">
                                    {{ $t("add_new_address") }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="flex justify-center">
                    <div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
                        <button
                            :class="['h-[40px] cursor-pointer min-w-40 rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]', checkoutStore.activeAddress ? 'bg-button text-text-dark group-hover:bg-button-hover' : ' bg-button-disabled  text-gray']">
                            {{ $t("continue") }}
                        </button>
                        <div
                            :class="['flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px]', checkoutStore.activeAddress ? 'bg-button text-text-dark group-hover:bg-button-hover' : ' bg-button-disabled  text-gray']">
                            <svg class="" width=" 26" height="26" viewBox="0 0 26 26" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
                                    fill="currentColor" />
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </UiContainer>
</template>

<script setup lang="ts">
import CheckoutInput from '../ui/CheckoutInput.vue';

const checkoutStore = useCheckoutStore();
const userStore = useUserStore()
const router = useRoute();

const addressValidation = ref<null | boolean>(null);

watch(
    () => checkoutStore.vUseAccountPhoneNumber,
    (newValue) => {
        if (newValue == true) {
            checkoutStore.accountPhoneNumber = checkoutStore.phoneNumber;
        } else {
            checkoutStore.accountPhoneNumber = "";
        }
    }
);


// fetchWithCookie(useRequestEvent(), `restricted/cart/checkout`, {
//     method: "PUT",
// });

// if change needs to be applied then provide it in second argument of function below
// $setSeoMetaFromTranslation(useStore(), {});


checkoutStore.restrictedAddress()
checkoutStore.restrictedAddressOfficial()
</script>
