//
// Button mixins.
//

@use 'sass:map';
@use 'sass:math';

@mixin ct-button-type($type, $map: false) {
  @if type-of($map) != 'map' {
    // SASS does not allow variables interpolation, so we are creating a local
    // map to easily generate rules.
    $map: (
      'primary': (
        'light': (
          'normal': (
            'color': var(--ct-button-light-primary-color),
            'background-color': var(--ct-button-light-primary-background-color),
            'border-color': var(--ct-button-light-primary-border-color),
            'outline-color': false,
          ),
          'hover': (
            'color': var(--ct-button-light-primary-hover-color),
            'background-color': var(--ct-button-light-primary-hover-background-color),
            'border-color': var(--ct-button-light-primary-hover-border-color),
            'outline-color': false,
          ),
          'visited': (
            'color': var(--ct-button-light-primary-visited-color),
            'background-color': var(--ct-button-light-primary-visited-background-color),
            'border-color': var(--ct-button-light-primary-visited-border-color),
            'outline-color': false,
          ),
          'active': (
            'color': var(--ct-button-light-primary-active-color),
            'background-color': var(--ct-button-light-primary-active-background-color),
            'border-color': var(--ct-button-light-primary-active-border-color),
            'outline-color': false,
          ),
          'focus': (
            'color': $ct-button-light-primary-focus-color,
            'background-color': $ct-button-light-primary-focus-background-color,
            'border-color': $ct-button-light-primary-focus-border-color,
            'outline-color': var(--ct-button-light-primary-focus-outline-color),
          ),
        ),
        'dark': (
          'normal': (
            'color': var(--ct-button-dark-primary-color),
            'background-color': var(--ct-button-dark-primary-background-color),
            'border-color': var(--ct-button-dark-primary-border-color),
            'outline-color': false,
          ),
          'hover': (
            'color': var(--ct-button-dark-primary-hover-color),
            'background-color': var(--ct-button-dark-primary-hover-background-color),
            'border-color': var(--ct-button-dark-primary-hover-border-color),
            'outline-color': false,
          ),
          'visited': (
            'color': var(--ct-button-dark-primary-visited-color),
            'background-color': var(--ct-button-dark-primary-visited-background-color),
            'border-color': var(--ct-button-dark-primary-visited-border-color),
            'outline-color': false,
          ),
          'active': (
            'color': var(--ct-button-dark-primary-active-color),
            'background-color': var(--ct-button-dark-primary-active-background-color),
            'border-color': var(--ct-button-dark-primary-active-border-color),
            'outline-color': false,
          ),
          'focus': (
            'color': $ct-button-dark-primary-focus-color,
            'background-color': $ct-button-dark-primary-focus-background-color,
            'border-color': $ct-button-dark-primary-focus-border-color,
            'outline-color': var(--ct-button-dark-primary-focus-outline-color),
          ),
        )
      ),
      'secondary': (
        'light': (
          'normal': (
            'color': var(--ct-button-light-secondary-color),
            'background-color': var(--ct-button-light-secondary-background-color),
            'border-color': var(--ct-button-light-secondary-border-color),
            'outline-color': false,
          ),
          'hover': (
            'color': var(--ct-button-light-secondary-hover-color),
            'background-color': var(--ct-button-light-secondary-hover-background-color),
            'border-color': var(--ct-button-light-secondary-hover-border-color),
            'outline-color': false,
          ),
          'visited': (
            'color': var(--ct-button-light-secondary-visited-color),
            'background-color': var(--ct-button-light-secondary-visited-background-color),
            'border-color': var(--ct-button-light-secondary-visited-border-color),
            'outline-color': false,
          ),
          'active': (
            'color': var(--ct-button-light-secondary-active-color),
            'background-color': var(--ct-button-light-secondary-active-background-color),
            'border-color': var(--ct-button-light-secondary-active-border-color),
            'outline-color': false,
          ),
          'focus': (
            'color': $ct-button-light-secondary-focus-color,
            'background-color': $ct-button-light-secondary-focus-background-color,
            'border-color': $ct-button-light-secondary-focus-border-color,
            'outline-color': var(--ct-button-light-secondary-focus-outline-color),
          ),
        ),
        'dark': (
          'normal': (
            'color': var(--ct-button-dark-secondary-color),
            'background-color': var(--ct-button-dark-secondary-background-color),
            'border-color': var(--ct-button-dark-secondary-border-color),
            'outline-color': false,
          ),
          'hover': (
            'color': var(--ct-button-dark-secondary-hover-color),
            'background-color': var(--ct-button-dark-secondary-hover-background-color),
            'border-color': var(--ct-button-dark-secondary-hover-border-color),
            'outline-color': false,
          ),
          'visited': (
            'color': var(--ct-button-dark-secondary-visited-color),
            'background-color': var(--ct-button-dark-secondary-visited-background-color),
            'border-color': var(--ct-button-dark-secondary-visited-border-color),
            'outline-color': false,
          ),
          'active': (
            'color': var(--ct-button-dark-secondary-active-color),
            'background-color': var(--ct-button-dark-secondary-active-background-color),
            'border-color': var(--ct-button-dark-secondary-active-border-color),
            'outline-color': false,
          ),
          'focus': (
            'color': $ct-button-dark-secondary-focus-color,
            'background-color': $ct-button-dark-secondary-focus-background-color,
            'border-color': $ct-button-dark-secondary-focus-border-color,
            'outline-color': var(--ct-button-dark-secondary-focus-outline-color),
          ),
        )
      ),
      'tertiary': (
        'light': (
          'normal': (
            'color': var(--ct-button-light-tertiary-color),
            'background-color': var(--ct-button-light-tertiary-background-color),
            'border-color': var(--ct-button-light-tertiary-border-color),
            'outline-color': false,
          ),
          'hover': (
            'color': var(--ct-button-light-tertiary-hover-color),
            'background-color': var(--ct-button-light-tertiary-hover-background-color),
            'border-color': var(--ct-button-light-tertiary-hover-border-color),
            'outline-color': false,
          ),
          'visited': (
            'color': var(--ct-button-light-tertiary-visited-color),
            'background-color': var(--ct-button-light-tertiary-visited-background-color),
            'border-color': var(--ct-button-light-tertiary-visited-border-color),
            'outline-color': false,
          ),
          'active': (
            'color': var(--ct-button-light-tertiary-active-color),
            'background-color': var(--ct-button-light-tertiary-active-background-color),
            'border-color': var(--ct-button-light-tertiary-active-border-color),
            'outline-color': false,
          ),
          'focus': (
            'color': $ct-button-light-tertiary-focus-color,
            'background-color': $ct-button-light-tertiary-focus-background-color,
            'border-color': $ct-button-light-tertiary-focus-border-color,
            'outline-color': var(--ct-button-light-tertiary-focus-outline-color),
          ),
        ),
        'dark': (
          'normal': (
            'color': var(--ct-button-dark-tertiary-color),
            'background-color': var(--ct-button-dark-tertiary-background-color),
            'border-color': var(--ct-button-dark-tertiary-border-color),
            'outline-color': false,
          ),
          'hover': (
            'color': var(--ct-button-dark-tertiary-hover-color),
            'background-color': var(--ct-button-dark-tertiary-hover-background-color),
            'border-color': var(--ct-button-dark-tertiary-hover-border-color),
            'outline-color': false,
          ),
          'visited': (
            'color': var(--ct-button-dark-tertiary-visited-color),
            'background-color': var(--ct-button-dark-tertiary-visited-background-color),
            'border-color': var(--ct-button-dark-tertiary-visited-border-color),
            'outline-color': false,
          ),
          'active': (
            'color': var(--ct-button-dark-tertiary-active-color),
            'background-color': var(--ct-button-dark-tertiary-active-background-color),
            'border-color': var(--ct-button-dark-tertiary-active-border-color),
            'outline-color': false,
          ),
          'focus': (
            'color': $ct-button-dark-tertiary-focus-color,
            'background-color': $ct-button-dark-tertiary-focus-background-color,
            'border-color': $ct-button-dark-tertiary-focus-border-color,
            'outline-color': var(--ct-button-dark-tertiary-focus-outline-color),
          ),
        )
      ),
    );
  }

  $types: map.keys($map);

  @if not index($types, $type) {
    @error '"#{$type}" is not one of allowed #{$types}.';
  }

  & {
    display: inline-block;
    text-decoration: none;
    outline-offset: var(--ct-button-outline-offset);
    outline-width: var(--ct-button-outline-width);
  }

  @if $ct-animation-enabled {
    & {
      transition: all var(--ct-button-animation-duration) ease;
    }
  }

  &:focus-visible,
  &:hover,
  &:active {
    text-decoration: none;
  }

  &[disabled] {
    text-decoration: none;
    pointer-events: none;
    user-select: none;
    opacity: 50%;
  }

  input {
    @include ct-visually-hidden();
  }

  $map-per-type: map.get($map, $type);

  @each $theme, $type-kinds in $map-per-type {
    &.ct-theme-#{$theme} {
      @each $type-kind, $type-kind-values in $type-kinds {
        @if $type-kind == 'normal' {
          @include _ct-button-print-rules($type-kind-values);
        }
        @else if $type-kind == 'hover' {
          &:hover {
            @include _ct-button-print-rules($type-kind-values);
          }
        }
        @else if $type-kind == 'active' {
          &:active,
          &.active {
            @include _ct-button-print-rules($type-kind-values);
          }
        }
        @else if $type-kind == 'active-hover' {
          &.active:hover {
            @include _ct-button-print-rules($type-kind-values);
          }
        }
        @else if $type-kind == 'focus' {
          &:focus-visible,
          &.focus {
            @include _ct-button-print-rules($type-kind-values);
          }
        }
        @else if $type-kind == 'selected' {
          &.selected,
          &.selected:hover,
          &.selected:active,
          &.selected:hover:active {
            @include _ct-button-print-rules($type-kind-values);
          }
        }
      }
    }
  }
}

@mixin ct-button-size($size, $with-padding: true) {
  // stylelint-disable-next-line scss/dollar-variable-pattern
  $sizes: ('large', 'regular', 'small');

  @if $size == 'large' {
    @include ct-typography('label-large');

    @if $with-padding {
      & {
        padding: ct-spacing(2) ct-spacing(6);
      }
    }
  }
  @else if $size == 'regular' {
    @include ct-typography('label-regular');

    @if $with-padding {
      & {
        padding: ct-spacing(1.75) ct-spacing(5);
      }
    }
  }
  @else if $size == 'small' {
    @include ct-typography('label-extra-small');

    & {
      border-width: calc(var(--ct-button-border-width) / 2);
    }

    @if $with-padding {
      & {
        padding: ct-spacing() ct-spacing(4);
      }
    }
  }
  @else {
    @error '"#{$size}" is not one of allowed #{$sizes}.';
  }
}

@mixin _ct-button-print-rules($rules) {
  $map: (
    'background-color',
    'border-color',
    'color',
    'outline-color',
  );

  @each $property in $map {
    $value: map.get($rules, $property);

    @if $value {
      #{$property}: $value;
    }
  }

  @if map.get($rules, 'outline-color') {
    outline-style: solid;
  }
}
