/**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

// stylelint-disable selector-class-pattern --
// Selector '.mdc-*' should only be used in this project.

@use 'sass:map';
@use 'sass:string';
@use 'sass:selector';
@use '@material/elevation/elevation-theme';
@use '@material/theme/css';
@use '@material/theme/keys';
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
@use '@material/theme/theme-color';
@use '@material/theme/custom-properties';
@use '@material/theme/shadow-dom';
@use '@material/theme/theme';
@use '@material/tokens/resolvers';
@use '@material/fab/variables' as fab-variables;
@use '@material/fab/fab-theme';
@use '@material/mwc-ripple/ripple-theme';

// TODO(b/153370936): replace with theme.resolve()
$light-theme-deprecated: (
  ink-color: theme-color.prop-value(on-secondary),
  ink-color-hover: theme-color.prop-value(on-secondary),
  ink-color-focus: theme-color.prop-value(on-secondary),
  ink-color-press: theme-color.prop-value(on-secondary),
  container-color: theme-color.prop-value(secondary),
  container-color-hover: theme-color.prop-value(secondary),
  container-color-focus: theme-color.prop-value(secondary),
  container-color-press: theme-color.prop-value(secondary),
  icon-size: 24px,
  extended-icon-padding: fab-variables.$extended-icon-padding,
  extended-label-padding: fab-variables.$extended-label-padding,
  ripple: (
    state: currentcolor,
    opacity-hover: 0.04,
    opacity-focus: 0.12,
    opacity-press: 0.1,
  ),
  elevation-shadow-color: elevation-theme.$baseline-color,
  icon-font-family: 'Material Icons',
  outline-color-focus: initial,
  outline-width-focus: initial,
);

@mixin theme-deprecated($theme: $light-theme-deprecated) {
  $container-color: map.get($theme, container-color);
  @if $container-color {
    @include css.declaration(--mdc-theme-secondary, $container-color);
  }

  $icon-font-family: map.get($theme, icon-font-family);
  @if $icon-font-family {
    @include css.declaration(--mdc-icon-font, $icon-font-family);
  }

  $ink-color: map.get($theme, ink-color);
  @if $ink-color {
    @include css.declaration(--mdc-theme-on-secondary, $ink-color);
  }

  $elevation-shadow-color: map.get($theme, elevation-shadow-color);
  @if $elevation-shadow-color {
    @include css.declaration(
      --mdc-fab-box-shadow,
      elevation-theme.elevation-box-shadow(6, $color: $elevation-shadow-color)
    );
  }

  @include shadow-dom.host-aware(selector.append(&, ':hover')) {
    $hover-container-color: map.get($theme, container-color-hover);
    @if $hover-container-color {
      @include css.declaration(--mdc-theme-secondary, $hover-container-color);
    }

    $hover-ink-color: map.get($theme, ink-color-hover);
    @if $hover-ink-color {
      @include css.declaration(--mdc-theme-on-secondary, $hover-ink-color);
    }
  }

  @include shadow-dom.host-aware(selector.append(&, ':focus,:focus-within')) {
    $focus-container-color: map.get($theme, container-color-focus);
    @if $focus-container-color {
      @include css.declaration(--mdc-theme-secondary, $focus-container-color);
    }

    $focus-ink-color: map.get($theme, ink-color-focus);
    @if $focus-ink-color {
      @include css.declaration(--mdc-theme-on-secondary, $focus-ink-color);
    }
  }

  @include shadow-dom.host-aware(
    selector.append(&, ':hover,:focus,:focus-within')
  ) {
    @if $elevation-shadow-color {
      @include css.declaration(
        --mdc-fab-box-shadow,
        elevation-theme.elevation-box-shadow(8, $color: $elevation-shadow-color)
      );
    }
  }

  @include shadow-dom.host-aware(selector.append(&, ':active')) {
    $press-container-color: map.get($theme, container-color-press);
    @if $press-container-color {
      @include css.declaration(--mdc-theme-secondary, $press-container-color);
    }

    $press-ink-color: map.get($theme, ink-color-press);
    @if $press-ink-color {
      @include css.declaration(--mdc-theme-on-secondary, $press-ink-color);
    }

    @if $elevation-shadow-color {
      @include css.declaration(
        --mdc-fab-box-shadow,
        elevation-theme.elevation-box-shadow(
          12,
          $color: $elevation-shadow-color
        )
      );
    }
  }

  $icon-size: map.get($theme, icon-size);
  @if $icon-size {
    @include css.declaration(--mdc-icon-size, $icon-size);
  }

  $extended-icon-padding: map.get($theme, extended-icon-padding);
  @if $extended-icon-padding {
    @include css.declaration(
      --mdc-fab-extended-icon-padding,
      $extended-icon-padding
    );
  }

  $extended-label-padding: map.get($theme, extended-label-padding);
  @if $extended-label-padding {
    @include css.declaration(
      --mdc-fab-extended-label-padding,
      $extended-label-padding
    );
  }

  $ripple: map.get($theme, ripple);
  @if $ripple {
    @include ripple-theme.theme-deprecated($ripple);
  }

  $outline-color-focus: map.get($theme, outline-color-focus);
  @if $outline-color-focus {
    @include css.declaration(
      --mdc-fab-focus-outline-color,
      $outline-color-focus
    );
  }

  $outline-width-focus: map.get($theme, outline-width-focus);
  @if $outline-width-focus {
    @include css.declaration(
      --mdc-fab-focus-outline-width,
      $outline-width-focus
    );
  }
}

@mixin theme-styles($theme, $resolvers: resolvers.$material) {
  .mdc-fab {
    @include fab-theme.theme-styles($theme, $resolvers);
  }

  $theme: keys.create-theme-properties($theme, $prefix: 'fab');

  .mdc-fab {
    &:not(.mdc-fab--extended) .ripple {
      @include theme.property(border-radius, map.get($theme, container-shape));
    }
  }

  @include mdc-ripple-theme.theme(
    (
      hover-state-layer-color: map.get($theme, hover-state-layer-color),
      focus-state-layer-color: map.get($theme, focus-state-layer-color),
      pressed-state-layer-color: map.get($theme, pressed-state-layer-color),
      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
      focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),
      pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),
    )
  );
}

///
/// Applies the given theme as custom properties without any selectors.
///
@mixin theme($theme, $resolvers: resolvers.$material) {
  @include fab-theme.theme($theme, $resolvers: $resolvers);
}