<template>
    <div class="row align-items-center m-b-10 parentContainer">
        <div class="row w-100 m-0 p-0" v-show="!state.displayAddressForm">
            <div class="col-12 p-0">
                <label :style="state.minWidth">Reference</label>
                <label>{{props.company_details.reference ? props.company_details.reference : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <label :style="state.minWidth">Business Type</label>
                <label>{{props.company_details.business_type ? getBusinessTypeDesc(props.company_details.business_type) : ""}}</label>
            </div>
            <div class="col-12 p-0">
            <label :style="state.minWidth">Company Type</label>
                <label>
                    {{getCompanyTypeDesc(props.company_details.type)}}
                    <div class="btn btn-xs b-rad-none pointer requestModal d-inline rounded no-border hover-primary" data-type="changeCompanyType" >
                        <i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i>
                    </div>
                </label>
            </div>
            <div class="col-12 p-0">
                <label :style="state.minWidth">Email</label>
                <label><i class="fa fa-envelope text-primary fs-10"></i>&nbsp;{{props.company_details.employee ? props.company_details.employee.email : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <label :style="state.minWidth">Contacts</label>
                <label><i class="fa fa-envelope text-primary fs-10"></i>&nbsp;{{props.company_details.contact && props.company_details.contact.email ? props.company_details.contact.email : "-"}}</label>
            </div>
            <div class="col-12 p-0">
                <label :style="state.minWidth">&nbsp;</label>
                <label>
                    <i class="fa fa-phone text-primary fs-10"></i>&nbsp;{{props.company_details.contact ? props.company_details.contact.phone : ""}}
                    <div class="btn btn-xs b-rad-none pointer requestModal d-inline rounded no-border hover-primary" data-type="changeCustomerContactNumber" >
                        <i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i>
                    </div>
                </label>
            </div>
            <div class="col-12 p-0" v-if="props.company_details.identification && props.company_details.identification.document_type">
                <label class="pull-left" :style="state.minWidth">Identification</label>
                <div class="col-4 pull-left p-l-0 p-b-5">
                    <label>{{ props.company_details.identification.document_type === 'IDENTITY_CARD' ? 'IC' : 'SSM Registration' }}</label>
                    - <label>{{ props.company_details.identification.reference }}</label>
                    <div class="btn btn-xs b-rad-none pointer requestModal d-inline rounded no-border hover-primary" data-type="changeCustomerCompanyDetails" >
                        <i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i>
                    </div>
                    <div class="row no-margin pull-right">
                        <div v-for="file in props.company_details.identification.files" v-bind:key="file.id"  class="col-auto no-padding m-r-5">
                            <document-file-viewer-component :file="file">
                                <template #button>
                                    <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
                                        <i class="fa fa-file-image-o fs-10"></i>
                                    </div>
                                </template>
                            </document-file-viewer-component>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 p-0 p-b-5 d-none">
                <div class="btn btn-xs btn-default bg-master-lighter btn-rounded p-r-20 p-l-15 requestModal" data-type="editProfileInfo">
                    <i class="fa fa-pencil m-r-10"></i>Edit Profile Info
                </div>
            </div>
            <div class="col-12 p-0 p-t-5" v-if="props.company_details.e_invoice">
                <label class="muted m-b-0" :style="state.minWidth175">E-Invoice Info&nbsp;</label>
                <div class="btn btn-xs b-rad-none pointer requestModal d-inline rounded no-border hover-primary" data-type="changeCustomerCompanyDetails" >
                    <i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i>
                </div>
            </div>
            <div class="col-12 b-t b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-1" v-if="props.company_details.e_invoice">
                <label :style="state.minWidth175">TIN</label>
                <label>{{props.company_details.tin ? props.company_details.tin : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="props.company_details.e_invoice">
                <label :style="state.minWidth175">MSIC Code</label>
                <label>{{props.company_details.msic_code ? props.company_details.msic_code : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="props.company_details.e_invoice && props.company_details.address_einvoice">
                <label :style="state.minWidth175">Billing Address Line 1</label>
                <label>{{props.company_details.address_einvoice.street_one ? props.company_details.address_einvoice.street_one : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="props.company_details.e_invoice && props.company_details.address_einvoice">
                <label :style="state.minWidth175">Billing Address Line 2</label>
                <label>{{props.company_details.address_einvoice.street_two ? props.company_details.address_einvoice.street_two : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="props.company_details.e_invoice && props.company_details.address_einvoice">
                <label :style="state.minWidth175">District</label>
                <label>{{props.company_details.address_einvoice.district ? props.company_details.address_einvoice.district.name : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="props.company_details.e_invoice && props.company_details.address_einvoice">
                <label :style="state.minWidth175">Post Code</label>
                <label>{{props.company_details.address_einvoice.post_code ? props.company_details.address_einvoice.post_code : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="props.company_details.e_invoice && props.company_details.address_einvoice">
                <label :style="state.minWidth175">State</label>
                <label>{{props.company_details.address_einvoice.state ? props.company_details.address_einvoice.state.name : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="props.company_details.e_invoice && props.company_details.address_einvoice">
                <label :style="state.minWidth175">Country</label>
                <label>{{props.company_details.address_einvoice.country ? props.company_details.address_einvoice.country.name : ""}}</label>
            </div>
            <div class="col-12 p-0 p-t-5">
                <label class="muted m-b-0" :style="state.minWidth">Recipients Bank Accounts&nbsp;</label>
            </div>
            <div class="col-12 b-t b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-1">
                <list-component key="2" section="companyBanksSection" :endpoint="route('api.bank.list')" :options="{'company_id': props.company_details.id}" v-if="props.company_details.id">
                    <template #list="{data}">
                        <company-bank-account-component :data="data" :company_id="parseInt(company_details.id)" section="companyBanksSection"></company-bank-account-component>
                    </template>
                </list-component>
            </div>
            <div class="col-12 p-0 p-t-5">
                <label class="muted m-b-0" :style="state.minWidth">Address&nbsp;</label>
            </div>
            <div class="col-12 b-t b-b b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-1">
                <list-component key="2" section="addresslist" :endpoint="route('api.address.list')" :options="{'company_id': props.company_details.id}" v-if="props.company_details.id">
                    <template #list="{data}">
                        <address-component :data="data" section="addressListItem"></address-component>
                    </template>
                </list-component>
            </div>
            <div class="col-12 p-0" style="width: 500px; height:350px">
                <canvas id="booking-chart"></canvas>
            </div>
        </div>

        <div class="col" v-show="state.displayAddressForm">
            <div>Address form</div>
            <address-form-component :id="parseInt(props.company_details.id)" :type="3" :addressData="state.address" v-if="props.company_details.id"></address-form-component>
        </div>

        <modal-component id="deleteAddressModal">
            <address-modal-component section="deleteAddressModal" :address_id="state.address_id"></address-modal-component>
        </modal-component>
        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editProfileInfo">
            <edit-customer-profile-info-form-component :data="props.company_details" :section="section" v-if="props.company_details.id"></edit-customer-profile-info-form-component>
        </modal-component>
        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="changeCustomerContactNumber">
            <edit-customer-contact-number-form-component :data="props.company_details" :section="section"></edit-customer-contact-number-form-component>
        </modal-component>
        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="changeCompanyType">
            <edit-customer-company-type-form-component :data="props.company_details" :section="section"></edit-customer-company-type-form-component>
        </modal-component>
        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="changeCustomerCompanyDetails">
            <change-customer-company-details-form-component :section="'customerProfileSection'" :data="props.company_details"></change-customer-company-details-form-component>
        </modal-component>
    </div>
</template>

<script setup lang="ts">
import { reactive, watch, onMounted, onUnmounted, getCurrentInstance } from 'vue';
import Chart from 'chart.js';
import route from '@/general/functions/router';

const props = defineProps<{
    company_details: any;
    section: string;
}>();
const { proxy } = getCurrentInstance() as any;

const state = reactive({
    minWidth: {
        minWidth: '120px',
    },
    minWidth175: {
        minWidth: '175px',
    },
    address_id: 0,
    address: {},
    displayAddressForm: false
});

const getBusinessTypeDesc = (business_type_id: number) => {
    switch (business_type_id) {
        case 1:
            return 'Freight Forwarder';
        case 2:
            return 'Importer';
        case 3:
            return 'Currency Vendor';
        case 4:
            return 'Transfer Agent';
        default:
            return null;
    }
};

const getCompanyTypeDesc = (company_type_id: number) => {
    return (company_type_id == 1) ? 'Company Business' : 'Personal Business';
};

const backToCompanyList = () => {
    proxy.emitter.emit('backToCompanyList');
};

const initChart = (company_details: any) => {
    if (!company_details) return;

    let approved = 0, completed = 0, rejected = 0, expired = 0, pending = 0;
    company_details.bookings.forEach((booking: any) => {
        if (booking) {
            switch (booking.status) {
                case 1:
                    pending += 1;
                    break;
                case 2:
                    approved += 1;
                    break;
                case 3:
                    completed += 1;
                    break;
                case 4:
                    rejected += 1;
                    break;
                case 6:
                    expired += 1;
                    break;
                default:
                    break;
            }
        }
    });

    const ctx = document.getElementById('booking-chart') as HTMLCanvasElement;
    if (ctx) {
        new Chart(ctx, {
            type: "pie",
            data: {
                labels: ['Completed', 'Approved', 'Rejected', 'Pending Verification', 'Expired'],
                datasets: [
                    {
                        label: 'Booking Summary',
                        data: [completed, approved, rejected, pending, expired],
                        backgroundColor: [
                            '#4bc0c0',
                            '#35a2eb',
                            '#ff6384',
                            '#ff9f40',
                            '#ffcd56'
                        ],
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'right',
                },
                title: {
                    display: true,
                    text: 'Booking Activity (Total: ' + company_details.bookings.length + ')'
                }
            }
        });
    }
};

watch(() => props.company_details, (newVal) => {
    initChart(newVal);
}, { immediate: true });

onMounted(() => {
    proxy.emitter.on('deleteAddressConfirm', (id: number) => {
        state.address_id = id;
        (window as any).$ ( "#deleteAddressModal" ).closest ( '.modal' ).modal ( 'show' );
    });
    proxy.emitter.on('updateAddressForm', (data: any) => {
        if (data.status) {
            state.address = data.address;
            state.displayAddressForm = true;
        } else {
            state.displayAddressForm = false;
        }
    });
    initChart(props.company_details);
});

onUnmounted(() => {
    proxy.emitter.off('updateAddressForm');
    proxy.emitter.off('deleteAddressConfirm');
});
</script>
