@use 'sass:map';
@use '../base/colors';
@use '../base/opacity';
@use '../base/typography';

@mixin mx-switch-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;
  }

  $handleSize: 18px;
  $handleIconSize: 12px;
  $toggleWidth: 40px;
  $toggleHeight: 24px;

  .mat-mdc-slide-toggle button.mdc-switch {
    width: $toggleWidth;
    height: $toggleHeight;

    .mdc-switch__track {
      height: 100%;
      border-radius: 32px;
      &::before {
        border: 2px solid map.get($color-theme, outline);
      }
    }

    .mdc-switch__handle-track {
      left: 4px;
      top: 3px;
      width: $handleSize;
      height: $handleSize;
      .mdc-switch__handle {
        width: $handleSize;
        height: $handleSize;
        &::before,
        &::after {
          background: map.get($color-theme, outline) !important;
        }
        .mdc-switch__icons {
          svg {
            width: $handleIconSize;
            height: $handleIconSize;
            fill: map.get($color-theme, surfaceContainerHighest);
          }
        }
      }
    }

    &.mdc-switch--selected {
      .mdc-switch__handle-track {
        transform: translate(15px);
      }
      .mdc-switch__handle-track {
        .mdc-switch__handle {
          .mdc-switch__icons {
            svg {
              fill: map.get($color-theme, onPrimaryContainer);
            }
          }
          &::before,
          &::after {
            background: map.get($color-theme, onPrimary) !important;
          }
        }
      }
    }

    &:enabled {
      .mdc-switch__track {
        &::before {
          background-color: map.get($color-theme, surfaceContainerHighest) !important;
        }
        &::after {
          background-color: map.get($color-theme, primary) !important;
        }
      }

      &:hover {
        .mdc-switch__handle-track {
          .mdc-switch__handle {
            &::after {
              background-color: map.get($color-theme, onSurfaceVariant) !important;
            }
          }
        }
      }

      &:active {
        .mdc-switch__handle-track {
          .mdc-switch__handle {
            width: $handleSize;
            height: $handleSize;
            border-radius: 14px;
            &::after {
              background-color: map.get($color-theme, onSurfaceVariant) !important;
            }
          }
        }
      }

      &.mdc-switch--selected {
        &:hover {
          .mdc-switch__handle-track {
            .mdc-switch__handle {
              &::before,
              &::after {
                background-color: map.get($color-theme, primaryContainer) !important;
              }
            }
          }
        }

        &:active {
          .mdc-switch__handle-track {
            transform: translate(15px);
            .mdc-switch__handle {
              &::before,
              &::after {
                background-color: map.get($color-theme, primaryContainer) !important;
              }
            }
          }
        }
      }
    }

    &:disabled {
      .mdc-switch__track {
        &::before {
          background-color: transparent !important;
        }
        &::after {
          background-color: map.get($color-theme, onSurface) !important;
        }
      }
      &:not(.mdc-switch--selected) {
        .mdc-switch__handle-track {
          opacity: opacity.$opacity-38;
        }
      }
      + label {
        color: rgba(map.get($color-theme, onSurface), opacity.$opacity-38);
        .mat-icon {
          color: map.get($color-theme, onSurface);
        }
      }
    }
  }

  .mat-mdc-slide-toggle .mdc-form-field {
    label {
      @extend .gl-body-md;
      color: map.get($color-theme, onSurface);
      display: flex;
      align-items: center;
      padding: 0 8px;
      .mat-icon {
        height: 16px;
        width: 16px;
        margin: 6px;
      }
    }
  }
}