<template>
	<div class="row m-l-0 m-r-0 m-b-10 bg-white 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">
			<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-12 bold">{{addressBook.reference}}</span>
                            <span class="m-l-5 m-r-5">-</span>
                            <span class="fs-12 text-complete">{{addressBook.contact}}</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <span class="fs-10 muted">{{addressBook.street_one}} {{addressBook.street_two}} {{addressBook.city}} {{addressBook.state}} {{addressBook.post_code}} {{addressBook.country}}</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">
                                    <a class="requestModal pointer" data-type="delete">
                                        <div data-toggle="tooltip" title="" data-placement="bottom" class="row link align-items-center justify-content-center" data-original-title="Delete">
                                            <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 m-r-5" :class="[{'bg-warning': isDefault}, {'bg-master-lightest': !isDefault}]">
                                    <a :class="[{'requestModal': !isDefault}, {'pointer': !isDefault}]" data-type="setDefault">
                                        <div data-toggle="tooltip" class="row align-items-center justify-content-center" :class="{'link': !isDefault}">
                                            <div class="col">
                                                <i class="fa fa-star" :class="[{'text-white': isDefault}, {'text-master-light': !isDefault}]"></i>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-auto text-right p-t-10 p-b-10 bg-master-lightest">
                                    <a class="pointer" @click="toggleEdit()" v-show="!isEditing">
                                        <div data-toggle="tooltip" title="" data-placement="bottom" class="row link align-items-center justify-content-center" data-original-title="Delete">
                                            <div class="col">
                                                <i class="fa fa-pencil text-info"></i>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="pointer" @click="closeEdit()" v-show="isEditing">
                                        <div data-toggle="tooltip" title="" data-placement="bottom" class="row link align-items-center justify-content-center" data-original-title="Delete">
                                            <div class="col">
                                                <i class="fa fa-times text-info"></i>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
						</div>
					</div>
				</div>
			</div>
			<div class="row bg-white no-margin">
				<div class="col no-padding">
                    <div class="slider" :class="{close: !isEditing}" >
						<div class="row">
							<div class="col no-padding b-t b-grey">
								<address-book-form-component v-on:collapseEdit="closeEdit()" :data="addressBook"></address-book-form-component>
							</div>
						</div>
                    </div>
				</div>
			</div>
			<confirm-modal-component
					title="Default Address"
					message="Are you sure you want to set this address as your <strong>default delivery address</strong>?"
					type="setDefault"
					v-on:confirm="defaultAddress()"></confirm-modal-component>
			<confirm-modal-component
					title="Remove Address"
					:message="'Are you sure you want to remove <strong>'+addressBook.reference+'</strong>?'"
					type="delete"
                    danger
					v-on:confirm="deleteAddress()"></confirm-modal-component>
		</div>
	</div>
</template>

<script>
    export default {
        props: {
            'data': {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                addressBook: this.data,
                isDefault: this.data.default,
                isEditing: false
            }
        },
        watch: {
            'data.default': function() {
                this.isDefault = this.data.default;
            }
        },
        mounted() {
            Event.$on('collapseEdit', () => {
                this.closeEdit();
            });
        },
        methods: {
            deleteAddress(){
                fetch(route('api.company.addressBook.delete', {'id': this.addressBook.id, 'companyId': this.addressBook.company_id}), {
                    method: 'delete'
                }).then(response => response.json())
                    .then(data => {
                        Event.$emit('updateAddressBookList');
                    })
                    .catch(error => console.log(error))
            },
            defaultAddress(){
                fetch(route('api.company.addressBook.default', {'id': this.addressBook.id, 'companyId': this.addressBook.company_id}), {
                    method: 'put'
                }).then(response => response.json())
                    .then(data => {
                        this.isDefault = true;
                        Event.$emit('updateAddressBookList');
                    })
                    .catch(error => console.log(error))
            },
            closeEdit(){
                this.isEditing = false;
            },
            toggleEdit(){
                Event.$emit('collapseEdit');
                this.isEditing = !this.isEditing;
            }
        }
    }
</script>