import RequestHandler from "../../request_handler.js";
import Loading from "../../loading.js";

export default class ToggleFavoriteComponent extends HTMLElement {

    constructor() {
        super();


    }

    getFavoriteTogglerButton()
    {
        return  this.getElementsByClassName('toggle_favorite_btn')[0];
    }

    getButtonSpan()
    {
        return  this.getElementsByClassName('toggle_favorite_btn')[0].getElementsByTagName('span')[0];
    }

    attachListeners()
    {
        let context = this;

        let url = context.getAttribute('url');



        this.getFavoriteTogglerButton().addEventListener('click', function (e){



            let request_handler = new RequestHandler();
            request_handler.makeRequest("POST", url, {})
                .then(function (data){



                    let loading = new Loading();
                    loading.release();


                    let favorte_class_holder = context.getButtonSpan().closest('.favorite_holder');
                    let favorites_container = context.getButtonSpan().closest('.only_favorites');

                    if(data.data.is_favorite == 1)
                    {

                        console.log('is_favorite');
                        console.log(context.getButtonSpan());

                        if(context.getButtonSpan().classList.contains('far'))
                        {
                            context.getButtonSpan().classList.remove('far');
                            context.getButtonSpan().classList.add('fas');
                        }
                        else
                        {
                            context.getButtonSpan().classList.remove('text-muted');
                            context.getButtonSpan().classList.add('text-danger');

                            if(favorte_class_holder != null)
                            {
                                favorte_class_holder.classList.add('favorite');
                            }
                        }






                    }
                    else
                    {
                        if(context.getButtonSpan().classList.contains('fas'))
                        {
                            context.getButtonSpan().classList.remove('fas');
                            context.getButtonSpan().classList.add('far');
                        }
                        else
                        {
                            console.log('not_favorite');
                            console.log(context.getButtonSpan());
                            context.getButtonSpan().classList.remove('text-danger');
                            context.getButtonSpan().classList.add('text-muted');


                            if(favorte_class_holder != null)
                            {
                                favorte_class_holder.classList.remove('favorite');
                            }

                            if(favorites_container != null)
                            {
                                favorte_class_holder.classList.add('d-none');
                            }
                        }


                    }


                    if(typeof document.getElementsByClassName('datatable_reload')[0] != 'undefined')
                    {
                        console.log("reload table click");

                        document.getElementsByClassName('datatable_reload')[0].click();

                    }






                })
                .catch((error) => {
                    console.error('Error:', error);
                });





        });

    }



    connectedCallback() {


        console.log("Toggle favorite component");


        this.attachListeners();


    }


}


/*
<toggle-favorite-component url="{{route(" core_telephone_calls.toggle_favorite", $view_obj->active_call->id ?? -1)}}">

    <button className="btn  toggle_favorite_btn" type="button" style="position: absolute;right:20px;top:30px;">
        <span className="fa fa-heart text-{{$view_obj->active_call->is_favorite == 1 ? " danger" : " muted"}}"
              style="font-size: 25px;"></span>
    </button>

</toggle-favorite-component>
*/

customElements.define('toggle-favorite-component', ToggleFavoriteComponent);