<template>
    <div class="row m-l-0 m-r-0 m-b-10 parentContainer">
        <div class="col-auto">
            <div class="row h-100 align-items-center justify-content-center bg-master-lighter hint-text">
                <div class="col p-r-20 p-l-20">
                    <i class="fa fa-map-marker muted hint-text fs-16"></i>
                </div>
            </div>
        </div>
        <div class="col bg-white">
            <div class="row align-items-center justify-content-center p-t-10 p-b-10">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <span class="fs-10 muted">{{ address.street_one }} {{ address.street_two }} {{ address.city }} {{ address.state.name }} {{ address.post_code }} {{ address.country.name }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-auto b-l b-grey">
                    <div class="row h-100">
                        <div class="col">
                            <div class="row no-margin">
                                <div class="col-auto text-right p-t-10 p-b-10 bg-master-lightest m-r-5 ml-auto" @click="deleteAddress">
                                    <a class="requestModal pointer" data-type="delete">
                                        <div v-tooltip="'Delete'" data-placement="bottom" class="row link align-items-center justify-content-center">
                                            <div class="col">
                                                <i class="fa fa-times text-danger"></i>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-auto text-right p-t-10 p-b-10 bg-master-lightest" @click="updateAddress">
                                    <a class="pointer">
                                        <div v-tooltip="'Edit'" data-placement="bottom" class="row link align-items-center justify-content-center">
                                            <div class="col">
                                                <i class="fa fa-pencil text-info"></i>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4 m-l-15 d-flex align-items-center">
            <div class="row align-items-center" :class="[{ 'requestModal': !address.billing }, { 'pointer': !address.billing }, { 'link': !address.billing }]" data-type="setDefault" @click="!address.billing ? setDefaultAddress() : null">
                <div class="col-auto text-right p-t-5 p-b-5" :class="[{ 'bg-warning-lighter': address.billing }, { 'bg-master-light': !address.billing }]">
                    <div v-tooltip="address.billing ? '' : 'Set Default'" class="row align-items-center justify-content-center" :class="{ 'link': !address.billing }">
                        <div class="col">
                            <i class="fa fa-star" :class="[{ 'text-warning': address.billing }, { 'text-master': !address.billing }]"></i>
                        </div>
                    </div>
                </div>
                <div class="col bg-white p-t-5 p-b-5">
                    <small class="fs-12 all-caps bold" :class="[{ 'text-warning': address.billing }, { 'text-master': !address.billing }]">Default Address</small>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useFormHandler } from '@/composables/useFormHandler';
import { useQueueStore } from '@/stores/queue';
import emitter from '@/utils/emitter';
import route from '@/general/functions/router';

interface Address {
    id: number;
    street_one: string;
    street_two: string;
    city: string;
    state: { name: string };
    post_code: string;
    country: { name: string };
    billing: boolean;
}

interface Props {
    data: Address;
    section: string;
}

const props = defineProps<Props>();

const address = ref<Address>(props.data);
const queueStore = useQueueStore();

const { submit } = useFormHandler({ section: props.section, data: props.data });

watch(() => props.data, (newData) => {
    address.value = newData;
}, { deep: true });

const setDefaultAddress = () => {
    submit(route('api.address.default', address.value.id), 'put', props.section, true, true, null, {
        successHandler: () => {
            queueStore.reloadList({ name: "addresslist" });
        }
    });
};

const updateAddress = () => {
    emitter.emit('updateAddressForm', { address: address.value, status: true });
};

const deleteAddress = () => {
    emitter.emit('deleteAddressConfirm', address.value.id);
};
</script>
