import { createElement, Dropdown, Popup, validation, toDateValue, showAlert } from "../ui";
import { r as lang, nullOrEmpty } from "../utility";

let r = lang;

const iconWorkOrder = 'data:image/png;base64,[encoded data, 6640 characters]';

export default class AddWorkOrder {
    _var = {
        option: {
            isCustomerRecord: true
        },
        /**
         * @private
         * @type {HTMLElement}
         */
        container: null
    };

    constructor(opt) {
        opt ??= {};
        this._var.option = opt;
        const getText = opt.getText;
        if (typeof getText === 'function') {
            r = getText;
        }
    }

    get complaint() {
        return this._var.container.querySelector('.wo-complaint')?.value;
    }

    show() {
        const option = this._var.option;
        var title = r('P_WO_OPENWORKORDER', 'Open Work Order');
        const container = createElement('div', 'open-wo-container',
            createElement('div', 'open-wo-header',
                createElement('img', img => img.src = iconWorkOrder),
                createElement('h3', h3 => h3.innerText = title)
            ),
            createElement('div', 'open-wo-content',
                createElement('div', 'wo-line',
                    createElement('span', span => {
                        span.className = 'wo-title wo-title-required';
                        span.innerText = r('P_WO_ASSET_COLON', 'Asset:');
                    })
                ),
                createElement('div', 'wo-line',
                    createElement('span', span => {
                        span.className = 'wo-title wo-title-required';
                        span.innerText = r('P_WO_COMPLAINTCOLON', 'Complaint:');
                    })
                ),
                createElement('div', 'wo-line wo-sub-line',
                    createElement('textarea', textarea => {
                        textarea.className = 'ui-text wo-complaint';
                        textarea.placeholder = r('P_WO_ENTERCOMPLAINT', 'Enter Complaint');
                    })
                ),
                createElement('div', 'wo-line',
                    createElement('span', span => {
                        span.className = 'wo-title';
                        span.innerText = r('P_WO_WORKORDERTYPE_COLON', 'Work Order Type:');
                    })
                ),
                createElement('div', 'wo-line wo-customer-record',
                    createElement('span', span => {
                        span.className = 'wo-title';
                        span.innerText = r('P_WO_COMPANYNAME_COLON', 'Company Name:');
                    })
                ),
                createElement('div', 'wo-line',
                    createElement('span', span => {
                        span.className = 'wo-title';
                        span.innerText = r('P_WO_STATUS_COLON', 'Status:');
                    })
                ),
                createElement('div', 'wo-line wo-sub-line wo-status-closed',
                    createElement('span', span => {
                        span.className = 'wo-title';
                        span.innerText = r('P_WO_COMPLETEDDATE_COLON', 'Completed Date:');
                    })
                ),
                createElement('div', 'wo-line wo-sub-line wo-status-closed',
                    createElement('span', span => {
                        span.className = 'wo-title';
                        span.innerText = r('P_WO_HOURS_COLON', 'Hours:');
                    })
                ),
                createElement('div', 'wo-line wo-sub-line wo-status-closed',
                    createElement('span', span => {
                        span.className = 'wo-title';
                        span.innerText = r('P_WO_ODOMETER_COLON', 'Odometer:');
                    })
                ),
                createElement('div', 'wo-line',
                    createElement('span', span => {
                        span.className = 'wo-title';
                        span.innerText = r('P_WO_ASSIGNEDTO_COLON', 'Assigned To:');
                    })
                ),
                createElement('div', 'wo-line wo-customer-record',
                    createElement('span', span => {
                        span.className = 'wo-title';
                        span.innerText = r('P_WO_ADVISOR_COLON', 'Advisor:');
                    })
                ),
                createElement('div', 'wo-line wo-customer-record',
                    createElement('span', span => {
                        span.className = 'wo-title';
                        span.innerText = r('P_WO_LOCATION_COLON', 'Location:');
                    })
                ),
                createElement('div', 'wo-line wo-customer-record',
                    createElement('span', span => {
                        span.className = 'wo-title';
                        span.innerText = r('P_WO_DEPARTMENT_COLON', 'Department:');
                    })
                )
            )
        );
        this._var.container = container;
        const popup = new Popup({
            title,
            content: container,
            buttons: [
                {
                    key: 'open',
                    text: title,
                    trigger: () => {
                        if (nullOrEmpty(this.complaint)) {
                            showAlert(title, r('P_WO_COMPLAINTREQUIRED', 'Complaint is required.')).then(() => container.querySelector('.wo-complaint')?.focus());
                            return false;
                        }
                    }
                },
                { text: r('P_WO_CANCEL', 'Cancel') }
            ]
        });
        popup.create();
        popup.rect = { width: 600 };
        return popup.show();
    }
}