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

$container: (
  padding-x: 3px,
  padding-y: 3px,
  border-radius: 8px,
  opacity-disabled: 0.3,

  background-color: (
    default: (
      light: colors.$transparent,
      dark: colors.$transparent,
    ),

    hover: (
      light: color.alpha(colors.$black, 0.06),
      dark: color.alpha(colors.$white, 0.08),
    ),
  ),
);

$options-tooltip: (
  grid-columns: 3,
  column-gap: 4px,
  row-gap: 4px,
);

$options-tooltip-title: (
  spacing: 3px,
  spacing-offset: -3px,
  font-weight: 600,
  font-size: 8px,

  color: (
    light: color.alpha(colors.$white, 0.64),
    dark: color.alpha(colors.$black, 0.64),
  ),
);

$options-tooltip-usage-types: (
  padding-y: 3px,
);

// note: color schemes are reversed for tooltips!
$type-option-button: (
  padding-x: 2px,
  padding-y: 2px,
  border-radius: 7px,

  background-color: (
    default: (
      light: colors.$transparent,
      dark: colors.$transparent,
    ),

    hover: (
      light: color.alpha(colors.$white, 0.08),
      dark: color.alpha(colors.$black, 0.06),
    ),

    selected: (
      light: color.alpha(colors.$blue, 0.16),
      dark: color.alpha(colors.$blue, 0.24),
    ),
  ),

  box-shadow: (
    selected: (
      light: (
        0 0 1px color.alpha(colors.$blue, 0.94),
        0 0 3px color.alpha(colors.$blue, 0.76),
      ),

      dark: (
        0 0 1px color.alpha(color.shade(colors.$blue, 15%), 0.94),
        0 0 3px color.alpha(colors.$blue, 0.76),
      ),
    ),
  ),

  opacity: (
    default: 0.9,
    hover: 0.95,
    selected: 1,
    disabled: 0.5,
  ),
);

$type-option-type: (
  color: (
    default: (
      light: color.alpha(colors.$white, 0.8),
      dark: color.alpha(colors.$black, 0.8),
    ),
  ),

  background-color: (
    default: (
      light: color.alpha(colors.$white, 0.16),
      dark: color.alpha(colors.$black, 0.16),
    ),

    // note: confusingly not named after the `highlight` PokeType prop,
    // but rather refers to a subtle blue background applied to the PokeType
    // in order to draw the user's attention to it
    highlighted: (
      light: color.alpha(colors.$blue, 0.32),
      dark: color.alpha(color.tint(colors.$blue, 30%), 0.32),
    ),
  ),
);

$type-option-usage: (
  padding-top: 1px,
  padding-bottom: 3px,
  font-size: 8px,

  color: (
    light: color.alpha(colors.$white, 0.76),
    dark: color.alpha(colors.$black, 0.76),
  ),
);

$type-value: (
  spacing: 2px,
);

$revealed-types: (
  spacing: 6px,

  title: (
    spacing: 2px,
  ),

  content: (
    padding-x: 2px,
    padding-y: 2px,
    border-radius: 7px,

    border-color: (
      light: color.alpha(colors.$white, 0.15),
      dark: color.alpha(colors.$black, 0.15),
    ),
  ),
);

.container {
  position: relative;
  @include transition.apply(opacity);

  &::before {
    content: '';
    @include position.absolute($x: -(map.get($container, padding-x)), $y: -(map.get($container, padding-y)));
    border-radius: map.get($container, border-radius);
    @include transition.apply(background-color);
    user-select: none;
    pointer-events: none;
  }

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

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

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

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

  &.readOnly, &.disabled {
    user-select: none;
    pointer-events: none;
  }

  &.disabled {
    opacity: map.get($container, opacity-disabled);
  }
}

.optionsTooltip {
  @include spacing.padding($x: map.get($options-tooltip, column-gap) * 2, $y: map.get($options-tooltip, row-gap) * 2);
}

.optionsTooltipTitle {
  @include spacing.margin(
    $top: map.get($options-tooltip-title, spacing-offset),
    $bottom: map.get($options-tooltip-title, spacing),
  );
  font-weight: map.get($options-tooltip-title, font-weight);
  font-size: map.get($options-tooltip-title, font-size);
  text-align: center;
  text-transform: uppercase;
  @include transition.apply(color);
  user-select: none;

  .light & {
    color: map.get($options-tooltip-title, color, light);
  }

  .dark & {
    color: map.get($options-tooltip-title, color, dark);
  }
}

.optionsTooltipContent {
  display: grid;
  grid-template-columns: repeat(map.get($options-tooltip, grid-columns), minmax(0, 1fr));
  column-gap: map.get($options-tooltip, column-gap);
  row-gap: map.get($options-tooltip, row-gap);

  .spanAllColumns {
    grid-area: span 1 / span #{map.get($options-tooltip, grid-columns)};

    .typeOption {
      width: 100%;
    }
  }
}

.usageTypes {
  @include spacing.padding($y: map.get($options-tooltip-usage-types, padding-y));
}

.typeOption {
  @include flex.column-center;
}

.typeOptionButton {
  position: relative;
  opacity: map.get($type-option-button, opacity, default);
  @include transition.apply(opacity);
  z-index: 1;

  &::before {
    content: '';
    @include position.absolute($x: -(map.get($type-option-button, padding-x)), $y: -(map.get($type-option-button, padding-y)));
    border-radius: map.get($type-option-button, border-radius);
    @include transition.apply(background-color, box-shadow);
    user-select: none;
    pointer-events: none;
  }

  .light &::before {
    background-color: map.get($type-option-button, background-color, default, light);
  }

  .dark &::before {
    background-color: map.get($type-option-button, background-color, default, dark);
  }

  &:hover {
    opacity: map.get($type-option-button, opacity, hover);

    .light &::before {
      background-color: map.get($type-option-button, background-color, hover, light);
    }

    .dark &::before {
      background-color: map.get($type-option-button, background-color, hover, dark);
    }
  }

  &.selected {
    opacity: map.get($type-option-button, opacity, selected);

    .light &::before {
      background-color: map.get($type-option-button, background-color, selected, light);
      box-shadow: map.get($type-option-button, box-shadow, selected, light);
    }

    .dark &::before {
      background-color: map.get($type-option-button, background-color, selected, dark);
      box-shadow: map.get($type-option-button, box-shadow, selected, dark);
    }
  }

  &.disabled {
    opacity: map.get($type-option-button, opacity, disabled);
  }
}

.typeOptionLabel {
  .typeOptionButton:not(.selected):not(.withUsage) & {
    & > span {
      background-image: none;
      background-clip: border-box;
    }

    .light & {
      &, & > span {
        color: map.get($type-option-type, color, default, light);
      }
    }

    .dark & {
      &, & > span {
        color: map.get($type-option-type, color, default, dark);
      }
    }
  }

  .typeOptionButton:not(.selected):not(.withUsage):not(:hover) & {
    .light & {
      background-color: map.get($type-option-type, background-color, default, light);
    }

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

  .typeOptionButton:not(.selected):not(.withUsage):not(:hover).highlighted & {
    .light & {
      background-color: map.get($type-option-type, background-color, highlighted, light);
    }

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

.typeOptionUsage {
  @include spacing.padding(
    $top: map.get($type-option-usage, padding-top),
    $bottom: map.get($type-option-usage, padding-bottom),
  );
  @include font.apply(fonts.$mono);
  font-size: map.get($type-option-usage, font-size);
  text-align: center;
  user-select: none;
  @include transition.apply(color);

  .light & {
    color: map.get($type-option-usage, color, light);
  }

  .dark & {
    color: map.get($type-option-usage, color, dark);
  }
}

.typeValue {
  &:not(:last-child) {
    @include spacing.margin($right: map.get($type-value, spacing));
  }
}

.revealedTypes {
  @include flex.column($justify: center);
  @include spacing.margin($top: map.get($revealed-types, spacing));
}

.revealedTypesTitle {
  @include spacing.margin(
    $top: 0,
    $bottom: map.get($revealed-types, title, spacing),
  );
}

.revealedTypesContent {
  width: 100%;
  @include flex.row-between;
  @include spacing.padding(
    $x: map.get($revealed-types, content, padding-x),
    $y: map.get($revealed-types, content, padding-y),
  );
  border: 1px solid colors.$transparent;
  border-radius: map.get($revealed-types, content, border-radius);

  .light & {
    border-color: map.get($revealed-types, content, border-color, light);
  }

  .dark & {
    border-color: map.get($revealed-types, content, border-color, dark);
  }
}

.revealedTypesValue {
  @include flex.row-start;
}

button.revealedTypesReset {
  font-size: 8px;
}
