Display and Rendering

/**
 * Re-render the selectpicker display (button text, selected state)
 * @returns jQuery object for chaining
 */
.selectpicker('render'): JQuery;

// Re-render after programmatic value change
$('#mySelect')
  .val('newValue')
  .selectpicker('render');

// Re-render multiple selectpickers
$('.selectpicker').selectpicker('render');

// Force display update after DOM changes
$('#mySelect option[value="dynamic"]').text('Updated Text');
$('#mySelect').selectpicker('render');

/**
 * Refresh the entire selectpicker (rebuild data and re-render)
 * Use when options are added, removed, or significantly modified
 * @returns jQuery object for chaining
 */
.selectpicker('refresh'): JQuery;

// Refresh after adding new options
$('#mySelect')
  .append('<option value="new">New Option</option>')
  .selectpicker('refresh');

// Refresh after removing options
$('#mySelect option[value="remove"]').remove();
$('#mySelect').selectpicker('refresh');

// Refresh after changing option attributes
$('#mySelect option').each(function() {
  $(this).attr('data-subtext', 'Updated subtext');
});
$('#mySelect').selectpicker('refresh');

// Refresh multiple selectpickers
$('.dynamic-select').selectpicker('refresh');

/**
 * Show the dropdown menu
 * @returns jQuery object for chaining
 */
.selectpicker('show'): JQuery;

// Show dropdown programmatically
$('#mySelect').selectpicker('show');

// Show on custom trigger
$('#customButton').click(function() {
  $('#mySelect').selectpicker('show');
});

// Show with focus
$('#mySelect')
  .selectpicker('show')
  .focus();

/**
 * Hide the dropdown menu
 * @returns jQuery object for chaining
 */
.selectpicker('hide'): JQuery;

// Hide dropdown programmatically
$('#mySelect').selectpicker('hide');

// Hide on custom condition
if (someCondition) {
  $('#mySelect').selectpicker('hide');
}

// Hide all open dropdowns
$('.selectpicker').selectpicker('hide');

/**
 * Toggle dropdown menu visibility
 * @returns jQuery object for chaining
 */
.selectpicker('toggle'): JQuery;

// Toggle dropdown state
$('#mySelect').selectpicker('toggle');

// Toggle on custom trigger
$('#toggleButton').click(function() {
  $('#mySelect').selectpicker('toggle');
});

// Toggle with keyboard shortcut
$(document).keydown(function(e) {
  if (e.ctrlKey && e.key === 'Space') {
    $('#mySelect').selectpicker('toggle');
  }
});

/**
 * Set the style class for the selectpicker button
 * @param style - CSS class name for button styling
 * @param status - Optional status for the style operation
 * @returns jQuery object for chaining
 */
.selectpicker('setStyle', style: string, status?: string): JQuery;

// Change button style
$('#mySelect').selectpicker('setStyle', 'btn-success');

// Change style with status
$('#mySelect').selectpicker('setStyle', 'btn-danger', 'add');

// Dynamic style based on selection
$('#mySelect').on('changed.bs.select', function() {
  const count = $(this).selectpicker('val').length;
  if (count === 0) {
    $(this).selectpicker('setStyle', 'btn-secondary');
  } else if (count < 3) {
    $(this).selectpicker('setStyle', 'btn-primary');
  } else {
    $(this).selectpicker('setStyle', 'btn-success');
  }
});

// Reset to default style
$('#mySelect').selectpicker('setStyle', 'btn-default');

/**
 * Enable mobile interface mode
 * @returns jQuery object for chaining
 */
.selectpicker('mobile'): JQuery;

// Enable mobile mode programmatically
$('#mySelect').selectpicker('mobile');

// Conditional mobile mode
if (window.innerWidth < 768) {
  $('.selectpicker').selectpicker('mobile');
}

// Initialize with mobile mode
$('#mySelect').selectpicker({
  mobile: true
});

/**
 * Check if dropdown is currently visible
 */
function isDropdownOpen(selectElement: JQuery): boolean {
  return selectElement.next('.bootstrap-select').hasClass('show');
}

/**
 * Get the current display state information
 */
function getDisplayState(selectElement: JQuery): {
  isOpen: boolean;
  buttonText: string;
  optionCount: number;
  selectedCount: number;
} {
  const $wrapper = selectElement.next('.bootstrap-select');
  const selected = selectElement.selectpicker('val');
  return {
    isOpen: $wrapper.hasClass('show'),
    buttonText: $wrapper.find('.filter-option-inner-inner').text(),
    optionCount: selectElement.find('option').length,
    selectedCount: Array.isArray(selected) ? selected.length : (selected ? 1 : 0)
  };
}

// Check dropdown state
function isDropdownOpen(selectElement) {
  return selectElement.next('.bootstrap-select').hasClass('show');
}

if (isDropdownOpen($('#mySelect'))) {
  console.log('Dropdown is currently open');
}

// Get comprehensive display state
function getDisplayState(selectElement) {
  const $wrapper = selectElement.next('.bootstrap-select');
  const selected = selectElement.selectpicker('val');
  return {
    isOpen: $wrapper.hasClass('show'),
    buttonText: $wrapper.find('.filter-option-inner-inner').text(),
    optionCount: selectElement.find('option').length,
    selectedCount: Array.isArray(selected) ? selected.length : (selected ? 1 : 0)
  };
}

const state = getDisplayState($('#mySelect'));
console.log('Display state:', state);

// Monitor display changes
$('#mySelect').on('shown.bs.select hidden.bs.select', function() {
  const state = getDisplayState($(this));
  $('#status').text(`Dropdown ${state.isOpen ? 'opened' : 'closed'}`);
});

/**
 * Update display for responsive design
 * Call after window resize or container changes
 */
function updateResponsiveDisplay(): void {
  $('.selectpicker').each(function() {
    $(this).selectpicker('refresh');
  });
}

// Responsive display updates
function updateResponsiveDisplay() {
  $('.selectpicker').each(function() {
    $(this).selectpicker('refresh');
  });
}

// Handle window resize
$(window).on('resize', function() {
  clearTimeout(window.resizeTimer);
  window.resizeTimer = setTimeout(updateResponsiveDisplay, 250);
});

// Handle container visibility changes
$('#myModal').on('shown.bs.modal', function() {
  $(this).find('.selectpicker').selectpicker('refresh');
});

// Update when tabs become visible
$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
  $($(this).attr('href')).find('.selectpicker').selectpicker('refresh');
});