@use 'sass:map';
@use 'config/colors';
@use 'config/fonts';
@use 'functions/color';
@use 'mixins/flex';
@use 'mixins/font';
@use 'mixins/position';
@use 'mixins/spacing';
@use 'mixins/transition';

$padding-x: 5px;
$padding-y: 2px;

// $background-color-light: color.alpha(colors.$white, 0.5);
// $background-color-dark: color.alpha(colors.$white, 0.05);
// $background-color-light-hover: color.alpha(colors.$black, 0.05);
// $background-color-dark-hover: color.alpha(colors.$white, 0.075);
// $background-color-light-active: color.alpha(colors.$black, 0.1);
// $background-color-dark-active: color.alpha(colors.$white, 0.1);

$background-color: (
  default: (
    light: color.alpha(colors.$white, 0.3),
    dark: color.alpha(colors.$white, 0.05),
  ),

  hover: (
    light: color.alpha(color.shade(colors.$blue, 15%), 0.05),
    dark: color.alpha(colors.$blue, 0.05),
  ),

  active: (
    light: color.alpha(colors.$white, 0.9),
    dark: color.alpha(colors.$white, 0.1),
  ),

  highlight: (
    light: color.alpha(colors.$blue, 0.2),
    dark: color.alpha(colors.$blue, 0.15),
  ),
);

// $border-width: 0.5px;
// $border-color-light: color.alpha(colors.$black, 0.15);
// $border-color-dark: color.alpha(colors.$white, 0.15);
$border-radius: 5px;

$box-shadow: (
  default: (
    light: (
      0 0 1px color.alpha(colors.$black, 0.3),
      0 0 2px color.alpha(colors.$gray-darker, 0.15),
    ),

    dark: (
      0 0 1px color.alpha(colors.$white, 0.5),
      0 0 2px color.alpha(colors.$black, 0.3),
    ),
  ),

  hover: (
    light: (
      0 0 1px color.alpha(color.shade(colors.$blue, 15%), 0.85),
      0 0 2px color.alpha(colors.$blue, 0.3),
    ),

    dark: (
      0 0 1px color.alpha(colors.$blue, 0.85),
      0 0 2px color.alpha(colors.$blue, 0.3),
    ),
  ),

  highlight: (
    light: (
      0 0 1px color.alpha(color.shade(colors.$blue, 15%), 0.95),
      0 0 3px color.alpha(colors.$blue, 0.5),
    ),

    dark: (
      0 0 1px color.alpha(colors.$blue, 0.95),
      0 0 3px color.alpha(colors.$blue, 0.5),
    ),
  ),
);

/// @todo finish cleaning this up lol
$opacity-disabled: 0.3;

// $value-font-size: 10px;
// $value-light-color: colors.$black;
// $value-dark-color: colors.$white;
// $value-light-color-hover: color.shade(colors.$blue, 15%);
// $value-dark-color-hover: colors.$blue;
// $value-light-color-active: color.alpha(colors.$black, 0.5);
// $value-dark-color-active: color.alpha(colors.$white, 0.5);

$value: (
  font-size: 10px,

  color: (
    default: (
      light: colors.$black,
      dark: colors.$white,
    ),

    hover: (
      light: color.alpha(color.shade(colors.$blue, 15%), 0.75),
      dark: color.alpha(colors.$blue, 0.75),
    ),

    active: (
      light: color.alpha(colors.$black, 0.5),
      dark: color.alpha(colors.$white, 0.5),
    ),

    highlight: (
      light: color.shade(colors.$blue, 15%),
      dark: colors.$blue,
    ),
  ),
);

$multi-value-padding-x: 2px;
$multi-value-padding-y: 1px;
$multi-value-light-border-color: color.alpha(colors.$black, 0.15);
$multi-value-dark-border-color: color.alpha(colors.$white, 0.15);

$placeholder-light-color: color.alpha(colors.$black, 0.3);
$placeholder-dark-color: color.alpha(colors.$white, 0.3);
$placeholder-light-color-hover: map.get($value, color, hover, light);
$placeholder-dark-color-hover: map.get($value, color, hover, dark);
$placeholder-light-color-active: color.alpha(colors.$black, 0.5);
$placeholder-dark-color-active: color.alpha(colors.$white, 0.5);

$icon-size: 10px; // used for the close and chevron icons
$icon-light-color: color.alpha(colors.$black, 0.3);
$icon-dark-color: color.alpha(colors.$white, 0.3);
$icon-light-color-hover: color.alpha(color.shade(colors.$blue, 15%), 0.95);
$icon-dark-color-hover: color.alpha(colors.$blue, 0.95);

$loading-indicator-light-color: color.alpha(colors.$black, 0.3);
$loading-indicator-dark-color: color.alpha(colors.$white, 0.3);

$indicator-separator-width: 1px;
$indicator-separator-margin-x: 3px;
$indicator-separator-light-color: colors.$transparent;
$indicator-separator-dark-color: colors.$transparent;

$menu-gutter: 2px; // distance between control and menu
$menu-light-background-color: color.alpha(colors.$white, 0.975);
$menu-dark-background-color: color.alpha(colors.$black, 0.975);
// $menu-border-width: 1px;
// $menu-light-border-color: color.alpha(colors.$black, 0.15);
// $menu-dark-border-color: color.alpha(colors.$white, 0.15);
$menu-z-index: 10;

/// @todo disgusting lol
$option-padding-x: 3px;
$option-padding-y: 2px;
$option-light-color: colors.$black;
$option-dark-color: colors.$white;
$option-light-color-selected: colors.$white; // might as well add to the steaming pile of poo
$option-dark-color-selected: colors.$white; // lolol
$option-light-background-color: colors.$transparent;
$option-dark-background-color: colors.$transparent;
$option-light-background-color-hover: color.alpha(colors.$black, 0.15);
$option-dark-background-color-hover: color.alpha(colors.$white, 0.15);
$option-light-background-color-focused: color.alpha(colors.$blue, 0.2);
$option-dark-background-color-focused: color.alpha(colors.$blue, 0.25);
$option-light-background-color-focused-hover: color.alpha(colors.$blue, 0.5);
$option-dark-background-color-focused-hover: color.alpha(colors.$blue, 0.5);
$option-light-background-color-selected: color.alpha(color.shade(colors.$blue, 15%), 0.9);
$option-dark-background-color-selected: color.alpha(colors.$blue, 0.9);
$option-light-background-color-selected-hover: color.alpha(color.shade(colors.$blue, 10%), 0.75);
$option-dark-background-color-selected-hover: color.alpha(color.shade(colors.$blue, 5%), 0.75);

$option-right-label-spacing: 3px; // basically margin-left
$option-right-label-font-size: 8px;
$option-right-label-light-color: color.alpha($option-light-color, 0.75);
$option-right-label-dark-color: color.alpha($option-dark-color, 0.75);

$option-sub-label-font-size: 8px;
$option-sub-label-light-color: color.alpha($option-light-color, 0.75);
$option-sub-label-dark-color: color.alpha($option-dark-color, 0.75);

$notice-padding-x: $option-padding-x;
$notice-padding-y: $option-padding-y;
$notice-light-color: color.alpha(colors.$black, 0.5);
$notice-dark-color: color.alpha(colors.$white, 0.5);

$group-padding-x: 1px;

$group-heading-padding-x: $option-padding-x + 2px;
$group-heading-padding-y: $option-padding-y + 2px;
$group-heading-font-weight: 500;
$group-heading-font-size: 8px;
$group-heading-letter-spacing: 0.5px;
$group-heading-light-color: color.alpha(colors.$black, 0.85);
$group-heading-dark-color: color.alpha(colors.$white, 0.85);
$group-heading-light-background-color: colors.$gray-lighter;
$group-heading-dark-background-color: colors.$gray-darker;

.container {
  position: relative;
}

// SelectContainer

.selectContainer {
  position: relative;
  @include flex.row;
  // border: $border-width solid colors.$transparent;
  border-radius: $border-radius;
  @include transition.apply(background-color, box-shadow);

  .light & {
    background-color: map.get($background-color, default, light);
    // border-color: $border-color-light;
    box-shadow: map.get($box-shadow, default, light);
  }

  .dark & {
    background-color: map.get($background-color, default, dark);
    // border-color: $border-color-dark;
    box-shadow: map.get($box-shadow, default, dark);
  }

  &:not(.active):hover {
    .light & {
      background-color: map.get($background-color, hover, light);
      box-shadow: map.get($box-shadow, hover, light);
    }

    .dark & {
      background-color: map.get($background-color, hover, dark);
      box-shadow: map.get($box-shadow, hover, dark);
    }
  }

  &.active {
    .light & {
      background-color: map.get($background-color, active, light);
    }

    .dark & {
      background-color: map.get($background-color, active, dark);
    }
  }

  &.highlight {
    .light & {
      background-color: map.get($background-color, highlight, light);
      box-shadow: map.get($box-shadow, highlight, light);
    }

    .dark & {
      background-color: map.get($background-color, highlight, dark);
      box-shadow: map.get($box-shadow, highlight, dark);
    }
  }

  &.rtl {
    direction: rtl;
  }

  &.disabled {
    opacity: $opacity-disabled;
    pointer-events: none;
  }
}

// SelectControl

.control {
  position: relative;
  @include flex.row-between;
  // flex-wrap: wrap;
  width: 100%;
  @include spacing.padding-xy($padding-x, $padding-y);
  outline: none;

  i:global(.fa) {
    font-size: $icon-size;
    line-height: $icon-size + 1px;
  }
}

// SelectValueContainer

.valueContainer {
  position: relative;
  @include flex.row($align: center);
  flex: 1;
  flex-wrap: wrap;
  @include transition.apply(color);
  cursor: text;

  .light & {
    color: map.get($value, color, default, light);
  }

  .dark & {
    color: map.get($value, color, default, dark);
  }

  .selectContainer:not(.active):hover & {
    .light & {
      color: map.get($value, color, hover, light);
    }

    .dark & {
      color: map.get($value, color, hover, dark);
    }
  }

  .selectContainer.active &.menuOpen {
    .light & {
      color: map.get($value, color, active, light);
    }

    .dark & {
      color: map.get($value, color, active, dark);
    }
  }

  .selectContainer.highlight & {
    .light & {
      color: map.get($value, color, highlight, light);
    }

    .dark & {
      color: map.get($value, color, highlight, dark);
    }
  }
}

.value {
  position: relative;
  width: 100%;

  // &.single {
  //   width: 100%;
  // }

  &.multi {
    @include flex.row;
    flex-wrap: wrap;
  }
}

// SelectPlaceholder

.placeholder {
  @include position.absolute-anchor($y: 50%);
  font-size: map.get($value, font-size);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  @include transition.apply(color);
  user-select: none;
  pointer-events: none;

  .light & {
    color: $placeholder-light-color;
  }

  .dark & {
    color: $placeholder-dark-color;
  }

  .selectContainer:not(.active):hover & {
    .light & {
      color: $placeholder-light-color-hover;
    }

    .dark & {
      color: $placeholder-dark-color-hover;
    }
  }

  .selectContainer.active & {
    .light & {
      color: $placeholder-light-color-active;
    }

    .dark & {
      color: $placeholder-dark-color-active;
    }
  }
}

// SelectInput

.inputContainer {
  display: inline-grid;
  grid-template-columns: 0 1fr;

  &::after {
    content: attr(data-value) ' ';
    grid-area: 1 / 2;
    min-width: 2px;
    @include spacing.margin-none;
    @include spacing.padding-none;
    border: none;
    outline: none;
    white-space: nowrap;
    visibility: hidden;
  }

  &.disabled {
    visibility: hidden;
  }
}

.input {
  grid-area: 1 / 2;
  min-width: 2px;
  @include spacing.margin-none;
  @include spacing.padding-none;
  @include font.apply(fonts.$mono);
  font-size: map.get($value, font-size);
  background: none;
  border: none;
  outline: none;
  opacity: 1;

  .light & {
    color: map.get($value, color, default, light);
  }

  .dark & {
    color: map.get($value, color, default, dark);
  }

  &.hidden {
    opacity: 0;
  }
}

// SelectGroup

.group {
  position: sticky;
  top: 0;
}

// SelectGroupHeading

.groupHeading {
  display: block;
  // @include spacing.margin($x: -1px);
  @include spacing.padding($x: $group-heading-padding-x, $y: $group-heading-padding-y);
  @include font.apply(fonts.$primary, ( font-weight: $group-heading-font-weight ));
  font-size: $group-heading-font-size;
  letter-spacing: $group-heading-letter-spacing;
  text-indent: $group-heading-letter-spacing;
  text-transform: uppercase;
  user-select: none;
  cursor: default;

  .light & {
    color: $group-heading-light-color;
    background-color: $group-heading-light-background-color;
  }

  .dark & {
    color: $group-heading-dark-color;
    background-color: $group-heading-dark-background-color;
  }
}

// SelectSingleValue

.singleValue {
  @include position.absolute-anchor($y: 50%);
  max-width: 100%;
  font-size: map.get($value, font-size);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  // pointer-events: none; // strangely causes the dropdown to close on mouse up in the Calcdex overlay

  .highlight & {
    font-weight: 500;
  }
}

// SelectMultiValue

.mutliValue {
  @include flex.row-center;
  @include spacing.margin-xy($multi-value-padding-x, $multi-value-padding-y);
  font-size: map.get($value, font-size) - ($multi-value-padding-y * 2);
  border: 1px solid colors.$transparent;

  .light & {
    border-color: $multi-value-light-border-color;
  }

  .dark & {
    border-color: $multi-value-dark-border-color;
  }
}

.valueLabel {
  @include spacing.padding-xy($multi-value-padding-x, $multi-value-padding-y);
  font-size: map.get($value, font-size) - ($multi-value-padding-y * 2);
  white-space: nowrap;
  overflow: hidden;

  &.crop {
    text-overflow: ellipsis;
  }
}

.remove {
  @include flex.row-center;
  @include spacing.padding($right: $multi-value-padding-x);
  @include transition.apply(color);
  cursor: pointer;

  .light & {
    color: $icon-light-color;
  }

  .dark & {
    color: $icon-dark-color;
  }

  &:hover {
    .light & {
      color: $icon-light-color-hover;
    }

    .dark & {
      color: $icon-dark-color-hover;
    }
  }
}

// SelectIndicatorsContainer

.indicatorsContainer {
  @include flex.row($align: center);
  flex-shrink: 0;
  align-self: stretch;
}

.indicator {
  display: flex;
  @include transition.apply(color);
  cursor: pointer;

  .light & {
    color: $icon-light-color;
  }

  .dark & {
    color: $icon-dark-color;
  }

  &:hover {
    .light & {
      color: $icon-light-color-hover;
    }

    .dark & {
      color: $icon-dark-color-hover;
    }
  }
}

// SelectDropdownIndicator

.dropdownIndicator {
  .selectContainer:not(.active):hover &:not(:hover) {
    .light & {
      color: color.alpha($icon-light-color-hover, 0.48);
    }

    .dark & {
      color: color.alpha($icon-dark-color-hover, 0.48);
    }
  }

  i {
    @include transition.apply(transform);

    .menuOpen & {
      transform: rotate(-180deg);
    }
  }
}

// SelectLoadingIndicator

.loadingIndicator {
  @include flex.row;
  align-self: center;
  vertical-align: middle;
  line-height: 1;
  text-align: center;
  @include transition.apply(color);

  .light & {
    color: $loading-indicator-light-color;
  }

  .dark & {
    color: $loading-indicator-dark-color;
  }
}

@keyframes loadingIndicatorDotAnimation {
  0%, 80%, 100% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }
}

.loadingIndicatorDot {
  display: inline-block;
  vertical-align: top;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  border-radius: 1em;
  animation: loadingIndicatorDotAnimation 1s ease-in-out infinite;

  &.offset {
    @include spacing.margin($left: 1em);
  }
}

// SelectIndicatorSeparator

.indicatorSeparator {
  align-self: stretch;
  width: $indicator-separator-width;
  @include spacing.margin($x: $indicator-separator-margin-x);

  .light & {
    background: $indicator-separator-light-color;
  }

  .dark & {
    background: $indicator-separator-dark-color;
  }
}

// SelectMenu

.menu {
  position: absolute;
  width: 100%;
  @include spacing.margin($x: 0, $y: $menu-gutter);
  border-radius: $border-radius;
  // border: $menu-border-width solid colors.$transparent;
  overflow: hidden;
  z-index: $menu-z-index;

  .light & {
    background-color: $menu-light-background-color;
    // border-color: $menu-light-border-color;
    box-shadow: map.get($box-shadow, default, light);
  }

  .dark & {
    background-color: $menu-dark-background-color;
    // border-color: $menu-dark-border-color;
    box-shadow: map.get($box-shadow, default, dark);
  }

  &.placementTop {
    bottom: 100%;
  }

  &.placementBottom {
    top: 100%;
  }
}

// SelectMenuList

.menuList {
  position: relative;
  // overflow-y: auto;
  overflow: hidden scroll;
}

// SelectOption

.option {
  @include flex.column;
  width: 100%;
  @include spacing.padding($x: $option-padding-x, $y: $option-padding-y);
  font-size: map.get($value, font-size);
  @include transition.apply(background-color);
  user-select: none;
  cursor: pointer;

  .light & {
    background-color: $option-light-background-color;
  }

  .dark & {
    background-color: $option-dark-background-color;
  }

  &:hover {
    .light & {
      background-color: $option-light-background-color-hover;
    }

    .dark & {
      background-color: $option-dark-background-color-hover;
    }
  }

  &.focused {
    .light & {
      background-color: $option-light-background-color-focused;

      &:hover {
        background-color: $option-light-background-color-focused-hover;
      }
    }

    .dark & {
      background-color: $option-dark-background-color-focused;

      &:hover {
        background-color: $option-dark-background-color-focused-hover;
      }
    }
  }

  &.selected {
    .light & {
      background-color: $option-light-background-color-selected;

      &:hover {
        background-color: $option-light-background-color-selected-hover;
      }
    }

    .dark & {
      background-color: $option-dark-background-color-selected;

      &:hover {
        background-color: $option-dark-background-color-selected-hover;
      }
    } // end .dark &
  } // end &.selected

  &.disabled {
    opacity: $opacity-disabled;
    pointer-events: none;
  }
}

.optionRow {
  @include flex.row-between;
  width: 100%;

  .light & {
    color: $option-light-color;
  }

  .dark & {
    color: $option-dark-color;
  }

  .selected & {
    .light & {
      color: $option-light-color-selected;
    }

    .dark & {
      color: $option-dark-color-selected;
    }
  }
}

// .optionLabel {
//   flex: 2 0;
// }

.optionRightLabel {
  // flex: 1;
  @include spacing.margin($left: $option-right-label-spacing);
  font-size: $option-right-label-font-size;
  text-align: right;

  .light & {
    color: $option-right-label-light-color;
  }

  .dark & {
    color: $option-right-label-dark-color;
  }

  .selected & {
    .light & {
      color: inherit;
    }

    .dark & {
      color: inherit;
    }
  }
}

.optionSubLabel {
  font-size: $option-sub-label-font-size;

  .light & {
    color: $option-sub-label-light-color;
  }

  .dark & {
    color: $option-sub-label-dark-color;
  }

  // note: .optionSubLabel is not inside .optionRow, so it's not possible
  // to inherit .optionRow's color here (like in .optionRightLabel)
  .selected & {
    .light & {
      color: $option-light-color-selected;
    }

    .dark & {
      color: $option-dark-color-selected;
    }
  }
}

.optionItem {
  &:first-child {
    border-radius: $border-radius $border-radius 0 0;
  }

  &:last-child {
    border-radius: 0 0 $border-radius $border-radius;
  }
}

// SelectNotice

.notice {
  @include spacing.padding($x: $notice-padding-x, $y: $notice-padding-y);
  font-size: map.get($value, font-size);
  text-align: center;
  user-select: none;

  .light & {
    color: $notice-light-color;
  }

  .dark & {
    color: $notice-dark-color;
  }
}
