function toggleSelectCountry(el, callback) {
    if (!el) return;

    let $parent = el.closest('.w_select_country');
    if (!$parent) return;

    if ($parent.classList.contains('closed')) {
        openSelectCountry(el, callback)
    } else {
        closeSelectCountry(el, callback);
    }
}

function openSelectCountry(el, callback) {
    let $parent = el.closest('.w_select_country');
    if (!$parent) return;

    $parent.classList.remove('closed');

    $('body')[0].onclick = function (){
        if (event.target.closest(".w_select_country.closed") || !event.target.closest(".w_select_country")){
            closeSelectCountry(el)
        }
    }
    if (callback) callback('opened', $parent);
}

function closeSelectCountry(el, callback) {
    let $parent = el.closest('.w_select_country');
    if (!$parent) return;

    $parent.classList.add('closed');

    if (callback) callback('closed', $parent);
}

let search_country_timeout = false;

function searchCountry(el) {
    resetCountrySelect(el)
    closeSelectCountry(el)
    if (el && el.value.length < 3) closeSelectCountry(el)
    if (!el || el.value.length < 3) return;

    let $parent = el.closest('.w_select_country');
    let $search_icon_cont = $parent.querySelector('.w_select_country_icon');
    let $content_part = $parent.querySelector('.w_select_country_content');

    $search_icon_cont.src = '/static/v2/loaders/search_spinner.svg'

    if (search_country_timeout) {
        clearTimeout(search_country_timeout);
        search_country_timeout = false;
    }
    search_country_timeout = setTimeout(function () {
        let url = '/reference_data/search_city/'
        let data = {
            'search_str': el.value
        }
        let request = new api({
            url: url,
            data: data,
            data_type: 'json',
            success: function (data) {
                if (!data.res_search_list && data.res_search_list !== '') console.log(`request data has not html => ${url}`);
                $search_icon_cont.src = '/static/v2/icons/widgets/w_select_country/pin.svg'
                $content_part.innerHTML = data.res_search_list;
                openSelectCountry(el)
            }, error: function (data) {
            }
        });
        request.ajaxRequest()
    }, 1000)
}

function selectCountry(el, callback) {
    let $parent = el.closest('.w_select_country');
    if (!$parent) return;

    let $input_part = $parent.querySelector('.select_country_header_left_part');
    let $flag = $input_part.querySelector('.country_flag_img_container');
    let $country_code = $input_part.querySelector('.country_code');
    let $input = $input_part.querySelector('input');

    let country_data = {
        full_name: el.dataset.name,
        id: el.dataset.id,
        country_code: el.dataset.country_code,
        flag: el.dataset.flag,
        now: el.dataset.now
    }

    $flag.src = country_data.flag;
    $country_code.innerHTML = country_data.country_code;
    $input.value = country_data.full_name;

    $input.dataset.name = country_data.full_name;
    $input.dataset.id = country_data.id;

    connectCountryWDateRangePicker(el, country_data)
    closeSelectCountry(el);
    resetFieldError(el);
}

function connectCountryWDateRangePicker (el, data) {
    let $parent = el.closest(".field_container")
    if (!$parent || !data || typeof daterangepickerInit === 'undefined') return;

    let datepicker_name = $parent.dataset.datepicker;

    let $datepicker = $(`.field_container[data-name="${datepicker_name}"]`)[0]
    if (!$datepicker) return;
    daterangepickerInit($datepicker, false, data.now)
}

function resetCountrySelect(el, callback) {
    let $parent = el.closest('.w_select_country');
    if (!$parent) return;

    let $input_part = $parent.querySelector('.select_country_header_left_part');
    let $flag = $input_part.querySelector('.country_flag_img_container');
    let $country_code = $input_part.querySelector('.country_code');
    let $input = $input_part.querySelector('input');
    let $content_part = $parent.querySelector('.w_select_country_content');

    $flag.removeAttribute('src')
    $country_code.innerHTML = '';
    $input.dataset.name = '';
    $input.dataset.id = '';
    $content_part.innerHTML = '';
}

function openCountruSelectIfDataEnter(el, callback) {
    let $parent = el.closest('.w_select_country');
    if (!$parent) return;

    let $content_part = $parent.querySelector('.w_select_country_content');
    if (!$content_part) return;

    if ($content_part.innerHTML.includes("div")) openSelectCountry(el)
}