<template>
	<div class="row m-l-0 m-r-0 m-b-10 bg-white parentContainer">
		<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-15">{{addressBook.street_one}} {{addressBook.street_two}} {{addressBook.city}} {{addressBook.state.name}} {{addressBook.post_code}} {{addressBook.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">
                                    <a class="requestModal pointer" data-type="deleteAddress">
                                        <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="defaultAddress">
                                        <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="requestModal pointer" data-type="editAddress">
                                        <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>
                                </div>
                            </div>
						</div>
					</div>
				</div>
			</div>
            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editAddress">
                <new-edit-address-form-component :populateWith="addressBook" :section="section" :address_id="-1" :isEdit=true></new-edit-address-form-component>
            </modal-component>

            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteAddress">
                <delete-address-form-component :data="addressBook" :section="section" class="text-center"></delete-address-form-component>
            </modal-component>

            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="defaultAddress">
                <set-default-address-form-component :data="addressBook" :section="section" class="text-center"></set-default-address-form-component>
            </modal-component>

		</div>
	</div>
</template>

<script>
    export default {
        props: {
            section: {
                default: 'addressSection'
            },
            'data': {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                addressBookx: this.data,
                isDefault: this.data.default,
                isEditing: false,
            }
        },
        watch: {
            'data.default': function() {
                this.isDefault = this.data.default;
            }
        },

        computed: {
            addressBook:{
                get() {
                     this.data.company_module_id = this.$store.getters.getCompanyModuleId;
                     return this.data;
                },
                set(val) {
                }
            },

        }
    }
</script>