@use "sass:color" as *;
@use "sass:map";

@use "../../../mixins" as *;
@use "../../../utils" as *;
@use "../../palette" as *;

$button-default-accent: (
  "dark": (
    "bg": opacity-button-bg(#fff, false, (0.1, 0.2, 0.25)),
    "fill": filled-button-bg(#fff, "lighten"),
    "fg-invert": rgba(#000, 0.82),
    "fg-main": rgba(#fff, 0.82),
    "fg-op": rgba(#fff, 0.82),
    "fg": rgba(#fff, 0.82),
  ),
  "light": (
    "bg": opacity-button-bg(#000, false, (0.1, 0.2, 0.25)),
    "fill": filled-button-bg(#000, "darken"),
    "fg-invert": rgba(#fff, 0.82),
    "fg-main": rgba(#000, 0.82),
    "fg-op": rgba(#000, 0.82),
    "fg": rgba(#000, 0.82),
  ),
) !default;

@function map-to-button($theme, $accent, $colors) {
  $bg: map.get($colors, "bg");
  $is-dark: $theme == "dark";

  $fg-filled: if(
    $is-dark,
    adjust($bg, $lightness: -25%),
    adjust($bg, $lightness: -15%)
  );

  $fg: if(
    $is-dark,
    adjust($bg, $lightness: 10%),
    adjust($bg, $lightness: -20%)
  );

  $fg-op: if(
    $is-dark,
    adjust($bg, $lightness: 25%),
    adjust($bg, $lightness: 40%)
  );

  $bg-filled: (
    "active": adjust($bg, $lightness: -12%),
    "hover": adjust($bg, $lightness: -7%),
    "main": $bg,
  );

  $bg-default-active: adjust($bg, $lightness: -20%);
  $bg-default-hover: adjust($bg, $lightness: -5%);

  $bg-default: (
    "active": rgba($bg-default-active, 0.8),
    "hover": rgba($bg-default-hover, 0.6),
    "transparent": rgba($bg, 0),
    "main": rgba($bg, 0.4),
  );

  @return (
    "fg-op": $fg-op,
    "fg-filled": $fg-filled,
    "fg": $fg,
    "bg-filled": $bg-filled,
    "bg": $bg-default
  );
}
