@use '../mixins/var' as *;
@use '../mixins/function' as *;
@use '../common/var' as *;

@mixin button-plain($type) {
  $is-secondary: $type == 'secondary';

  $default-text-color: $type;
  $default-text-variant: '';
  $disabled-text-variant: 'light-9';
  $default-bg-color: 'white';
  $default-border-variant: 'light-5';
  $hover-text-variant: 'light-4';
  $hover-bg-color: 'white';
  $hover-border-variant: 'light-4';
  $active-text-variant: 'light-6';
  $active-bg-color: 'white';
  $active-border-variant: 'light-6';

  @if $is-secondary {
    $default-text-color: $type;
    $default-text-variant: '';
    $disabled-text-variant: 'light-9';
    $default-bg-color: 'white';
    $default-border-variant: 'light-5';
    $hover-text-variant: 'light-4';
    $hover-bg-color: 'white';
    $hover-border-variant: 'light-4';
    $active-text-variant: 'light-6';
    $active-bg-color: 'white';
    $active-border-variant: 'light-6';
  }

  $button-color-types: (
    '': (
      'text-color': (
        'color',
        $default-text-color,
        $default-text-variant,
      ),
      'disabled-text-color': (
        'color',
        $type,
        $disabled-text-variant,
      ),
      'bg-color': (
        'color',
        $default-bg-color,
      ),
      'border-color': (
        'color',
        $type,
        $default-border-variant,
      ),
    ),
    'hover': (
      'text-color': (
        'color',
        $type,
        $hover-text-variant,
      ),
      'bg-color': (
        'color',
        $hover-bg-color,
      ),
      'border-color': (
        'color',
        $type,
        $hover-border-variant,
      ),
    ),
    'active': (
      'text-color': (
        'color',
        $type,
        $active-text-variant,
      ),
      'bg-color': (
        'color',
        $active-bg-color,
      ),
      'border-color': (
        'color',
        $type,
        $active-border-variant,
      ),
    ),
  );

  @each $state, $stateMap in $button-color-types {
    @each $typeColor, $list in $stateMap {
      @include css-var-from-global(('button', $state, $typeColor), $list);
    }
  }

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: getCssVar('color', $type, 'light-2');
      background-color: transparent;
      border-color: getCssVar('color', $type, 'light-2');
    }
  }
}

@mixin button-variant($type) {
  $is-secondary: $type == 'secondary';

  $default-text-color: 'white';
  $default-text-variant: '';
  $default-bg-variant: 'light-5';
  $default-border-variant: '';
  $hover-bg-color: $type;
  $hover-bg-variant: 'light-4';
  $hover-border-variant: 'light-4';
  $active-bg-variant: 'light-6';
  $active-border-variant: 'light-6';

  @if $is-secondary {
    $default-text-color: $type;
    $default-text-variant: 'light-9';
    $default-bg-variant: 'light-1';
    $default-border-variant: 'light-2';
    $hover-bg-color: 'white';
    $hover-bg-variant: '';
    $hover-border-variant: 'light-3';
    $active-bg-variant: 'light-2';
    $active-border-variant: 'light-2';
  }

  $button-color-types: (
    '': (
      'text-color': (
        'color',
        $default-text-color,
        $default-text-variant,
      ),
      'bg-color': (
        'color',
        $type,
        $default-bg-variant,
      ),
      'border-color': (
        'color',
        $type,
        $default-border-variant,
      ),
      'outline-color': (
        'color',
        $type,
        'light-5',
      ),
      'active-color': (
        'color',
        $type,
        'dark-2',
      ),
    ),
    'hover': (
      'text-color': (
        'color',
        $default-text-color,
        $default-text-variant,
      ),
      'link-text-color': (
        'color',
        $type,
        'light-5',
      ),
      'bg-color': (
        'color',
        $hover-bg-color,
        $hover-bg-variant,
      ),
      'border-color': (
        'color',
        $type,
        $hover-border-variant,
      ),
    ),
    'active': (
      'bg-color': (
        'color',
        $type,
        $active-bg-variant,
      ),
      'border-color': (
        'color',
        $type,
        $active-border-variant,
      ),
    ),
    'disabled': (
      'text-color': (
        'color',
        'white',
        // $type,
         //  'light-1',
      ),
      'bg-color': (
        'color',
        $type,
        'light-1',
      ),
      'border-color': (
        'color',
        $type,
        'light-1',
      ),
    ),
    'plain': (),
    'plain-hover': (),
  );

  @each $type, $typeMap in $button-color-types {
    @each $typeColor, $list in $typeMap {
      @include css-var-from-global(('button', $type, $typeColor), $list);
    }
  }

  &.is-plain,
  &.is-text,
  &.is-link {
    @include button-plain($type);
  }
}

@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius: 0, $height: null) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
  @if $height != null {
    height: $height;
  }

  &.is-round {
    padding: $padding-vertical $padding-horizontal;
  }
}