import './index.less';
import $ from 'jquery';
import '@backset/ui/src/components/Tooltip/index.less';
// import '@backset/ui/src/components/Dropdown/index.scss';

$('select[data-menu]').each(function () {
  let select = $(this);
  let options = select.find('option');
  let menu = $('<div />').addClass('bs-select-menu');
  let button = $('<div />').addClass('button');
  let list = $('<ul />');
  $('<em />').prependTo(button);

  options.each(function (i) {
    let option = $(this);
    list.append($('<li />').text(option.text()));
  });

  menu.css('--t', select.find(':selected').index() * -36.5 + 'px');

  select.wrap(menu);

  button.append(list).insertAfter(select);

  list.clone().insertAfter(button);
});

$(document).on('click', '.bs-select-menu', function (e) {
  let menu = $(this);
  if (!menu.hasClass('open')) menu.addClass('open');
});

$(document).on('click', '.bs-select-menu > ul > li', function (e) {
  let li = $(this);
  let menu = li.parent().parent();
  let select = menu.children('select');
  let selected = select.find('option:selected');
  let index = li.index();

  menu.css('--t', index * -36.5 + 'px');
  selected.removeAttr('selected');
  select.find('option').eq(index).attr('selected', 'selected');

  menu.addClass(index > selected.index() ? 'tilt-down' : 'tilt-up');

  setTimeout(() => {
    menu.removeClass('open tilt-up tilt-down');
  }, 500);
});

$(document).on('click', function (e: any) {
  e.stopPropagation();
  if ($('.bs-select-menu').has(e.target).length === 0) {
    $('.bs-select-menu').removeClass('open');
  }
});