class tarjetaDireccion {

    constructor(container, id, direccion) {
        
        this.container = container;
        this.id = id;
        this.direccionId = direccion.id;
        this.card = this.#generateHTML(id, direccion);
        this.deleteBtn = this.card.find('.direccion-eliminar');
        this.editBtn = this.card.find('.direccion-editar');
        this.direccion = direccion;
    }


    #generateHTML(id, direccion) {

        // Crear los elementos usando jQuery
        var $parent = $('<div>', { 
            class: 'direccion-cliente col-sm-5 form-check custom-option custom-option-basic checked justify-content-center mb-4',
            id: id 
        });
        
        var $label = $('<label>', { class: 'form-check-label custom-option-content' });

        var $header = $('<span>', { class: 'custom-option-header mb-2' });
        var $name = $('<h6>', { class: 'fw-semibold mb-0', text: direccion.att });
        var $unidades = $('<span>', { class: 'badge bg-label-primary unidades', text: direccion.unidades + ' unidades' });

        var $body = $('<span>', { class: 'custom-option-body' });
        var $direccion = $('<small>', { class: 'address-direccion', text: direccion.direccion });
        var $cp = $('<small>', { class: 'address-cp', text: direccion.cp });
        var $municipioPais = $('<small>', { class: 'address-municipio-pais', text: direccion.municipio + ', '+ direccion.pais });
        var $telefono = $('<small>', { class: 'address-telefono', text: direccion.telefono });
        var $email = $('<small>', { class: 'address-email', text: direccion.email });

        var $palets = $('<small>', {class: 'address-palets', html: '<i>Envío en palets</i>'});
        
        var $hr = $('<hr>', { class: 'my-2' });
        var $eliminar = $('<a>', { class: 'ms-auto direccion-eliminar', href: 'javascript:void(0)', text: 'Eliminar' });
        var $editar = $('<a>', { class: 'me-auto direccion-editar', href: 'javascript:void(0)', text: 'Editar' });
        var $eliminarContainer = $('<span>', { class: 'd-flex w-100 position-relative' }).append($editar, $eliminar);

        // Construir la estructura del HTML
        $header.append($name, $unidades);
        $body.append($direccion, '<br>', $cp, '<br>', $municipioPais, '<br>', $telefono, '<br>', $email, '<br>', $palets, '<br>', $hr, $eliminarContainer);
        $label.append($header, $body);
        $parent.append($label);

        return $parent;
    }


    init() {

        this.container.append(this.card);
    }


    setDireccion(direccion) {
        this.card.find('.address-direccion').text(direccion.direccion);
        this.card.find('.address-cp').text(direccion.cp);
        this.card.find('.address-municipio-pais').text(direccion.municipioPais);
        this.card.find('.address-telefono').text(direccion.telefono);
        this.card.find('.address-email').text(direccion.email);
        this.card.find('.address-palets').toggleClass('d-none', !direccion.palets);
    }


    setEntregaPalets(palets) {
        this.card.find('.address-palets').toggleClass('d-none', !palets);
    }

    getEntregaPalets() {
        return !this.card.find('.address-palets').hasClass('d-none');
    }

    setUnidades(unidades) {
        this.card.find('.unidades').text(unidades + ' unidades');
    }

    getUnidades() {
        return this.card.find('.unidades').text().split(' ')[0];
    }

    getCp() {
        return this.card.find('.address-cp').text();
    }

    getId() {
        return this.id;
    }

    getPaisId() {
        return this.direccion.pais_id;
    }

    getDireccion() {
        return this.direccion;
    }

    getDireccionId() {
        return this.direccionId;
    }

    getFormData() {
        return {
            direccion: this.direccion,
            unidades: this.getUnidades(),
            entregaPalets: this.getEntregaPalets()
        };
    }
}

export default tarjetaDireccion;