@use 'sass:map';

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

@use '../webex/mixins/function.scss' as *;

$theme: 'webex' !default;

@mixin button-plain($type) {
  $button-color-types: (
    '': (
      'text-color': (
        'color',
        $type,
      ),
      'bg-color': (
        'color',
        $type,
        'light-9',
      ),
      'border-color': (
        'color',
        $type,
        'light-5',
      ),
      'border-style': (
        'button',
        'plain',
        'border',
        'style'
      ),
    ),
    'hover': (
      'text-color': (
        'color',
        'white',
      ),
      'bg-color': (
        'color',
        $type,
      ),
      'border-color': (
        'color',
        $type,
      ),
    ),
    'active': (
      'text-color': (
        'color',
        'white',
      ),
    ),
  );

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

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

@mixin button-outline($type) {
  $button-color-types: (
    '': (
      'border-style': (
        'button',
        map.get($typeMap, $type),
        'outline',
        'border',
        'style'
      ),
      'text-color': (
        'button',
        map.get($typeMap, $type),
        'outline',
        'text',
      ),
      'bg-color': (
        'button',
        map.get($typeMap, $type),
        'outline',
        'background'
      ),
      'border-color': (
        'button',
        map.get($typeMap, $type),
        'outline',
        'border-color'
      ),
    ),
    'hover': (
      'text-color': (
        'button',
        map.get($typeMap, $type),
        'outline',
        'text-hovered',
      ),
      'link-text-color': (
        'el',
        'color',
        map.get($typeMap, $type),
        'light-5',
      ),
      'bg-color': (
        'button',
        map.get($typeMap, $type),
        'background',
        'hovered',
      ),
      'border-color': (
        'button',
        map.get($typeMap, $type),
        'outline',
        'border-style',
      ),
    ),
    'active': (
      'bg-color': (
        'button',
        map.get($typeMap, $type),
        'background-pressed',
      ),
      'border-color': (
        'button',
        map.get($typeMap, $type),
        'border-style',
      ),
    ),
  );

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

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

@mixin button-ghost($type) {
  $button-color-types: (
    '': (
      'border-style': (
        'button',
        map.get($typeMap, $type),
        'ghost',
        'border',
        'style'
      ),
      'text-color': (
        'button',
        map.get($typeMap, $type),
        'ghost',
        'text',
      ),
      'bg-color': (
        'button',
        map.get($typeMap, $type),
        'ghost',
        'background'
      ),
      'border-color': (
        'button',
        map.get($typeMap, $type),
        'outline',
        'border-color'
      ),
    ),
    'hover': (
      'text-color': (
        'button',
        map.get($typeMap, $type),
        'ghost',
        'text-hovered',
      ),
      'link-text-color': (
        'el',
        'color',
        map.get($typeMap, $type),
        'light-5',
      ),
      'bg-color': (
        'button',
        map.get($typeMap, $type),
        'background',
        'hovered',
      ),
      'border-color': (
        'button',
        map.get($typeMap, $type),
        'ghost',
        'border-style',
      ),
    ),
    'active': (
      'bg-color': (
        'button',
        map.get($typeMap, $type),
        'background-pressed',
      ),
      'border-color': (
        'button',
        map.get($typeMap, $type),
        'border-style',
      ),
    ),
  );

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

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: getCssVarWebex('button', map.get($typeMap, $type), 'ghost','text', 'disabled');
      background-color: getCssVarWebex('button', map.get($typeMap, $type), 'ghost','background', 'disabled');
    }
  }
}

@mixin button-variant($type) {
  $textColorMap: ();
  $textColorMap: map.set(
    $textColorMap,
    $type,
    if($theme != webex or $type ==primary, 'white', 'black')
  );

  $button-color-types: (
    '': (
      'text-color': (
        'button',
        map.get($typeMap, $type),
        'text',
      ),
      'bg-color': (
        'button',
        map.get($typeMap, $type),
      'background'
      ),
      'border-color': (
        'button',
        map.get($typeMap, $type),
      'border-color'
      ),
    ),
    'hover': (
      'text-color': (
        'button',
        map.get($typeMap, $type),
        'text-hovered',
      ),
      'link-text-color': (
        'el',
        'color',
        map.get($typeMap, $type),
        'light-5',
      ),
      'bg-color': (
        'button',
        map.get($typeMap, $type),
        'background',
        'hovered',
      ),
      'border-color': (
        'button',
        map.get($typeMap, $type),
        'border-style',
      ),
    ),
    'active': (
      'bg-color': (
        'button',
        map.get($typeMap, $type),
        'background-pressed',
      ),
      'border-color': (
        'button',
        map.get($typeMap, $type),
        'border-style',
      ),
    ),
    'disabled': (
      'text-color': (
        'button',
        map.get($typeMap, $type),
        'text-disabled',
      ),
      'bg-color': (
        'button',
        map.get($typeMap, $type),
        'background-disabled',
      ),
      'border-color': (
        'button',
        map.get($typeMap, $type),
        'border-color-disabled',
      ),
    ),
  );

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

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

    &:hover,
    &:focus {
      color: getCssVar('button', 'hover', 'text-color');
      background-color: getCssVarWebex('button', map.get($typeMap, $type), 'ghost','background', 'hovered');
    }

    &:active {
      color: getCssVar('button', 'active', 'text-color');
      background-color: getCssVarWebex('button', map.get($typeMap, $type), 'ghost','background', 'pressed');
    }

    &:focus-visible {
      border-color: transparent;
    }
  }
}

@mixin button-size(
  $padding-vertical,
  $padding-horizontal,
  $font-size,
  $border-radius
) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;

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