@import "./_colors";

@mixin rect-button($type: primary, $fill: filled) {
  display: flex;
  transition: 0.3s ease;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  border-radius: var(--border-radius-sm);

  @if $fill == filled {
    padding: var(--typography-fontSize-sm) var(--spacing-lg);
    border: none;

    $button-color-content: var(--text-onFill);
    $button-color-content-disabled: var(--text-onFillDisabled);

    $button-color-base: var(--surface-neutralPrimary);
    $button-color-hover: var(--surface-neutralSecondary);
    $button-color-disabled: var(--surface-neutralLight);
    @if $type == primary {
      $button-color-base: var(--surface-brandPrimary);
      $button-color-hover: var(--surface-brandSecondary);
      $button-color-disabled: var(--surface-brandLight);
    } @else if $type == success {
      $button-color-base: var(--surface-successPrimary);
      $button-color-hover: var(--surface-successSecondary);
      $button-color-disabled: var(--surface-successLight);
    } @else if $type == warning {
      $button-color-base: var(--surface-warningPrimary);
      $button-color-hover: var(--surface-warningSecondary);
      $button-color-disabled: var(--surface-warningLight);
    } @else if $type == error {
      $button-color-base: var(--surface-errorPrimary);
      $button-color-hover: var(--surface-errorSecondary);
      $button-color-disabled: var(--surface-errorLight);
    } @else {
      $button-color-content: var(--text-inverse);
      $button-color-content-disabled: var(--text-disabled);
    }

    color: $button-color-content;
    background: $button-color-base;

    &:hover {
      background: $button-color-hover;
    }

    &:disabled {
      color: $button-color-content-disabled;
      background: $button-color-disabled;
      &:hover {
        background: $button-color-disabled;
      }
    }
  } @else {
    padding: var(--typography-fontSize-sm)
      calc(var(--spacing-lg) - var(--spacing-micro));
    color: var(--text-primary);
    background: var(--surface-transparent);

    $button-border: var(--border-neutral);
    $button-color-hover: var(--surface-neutralLight);
    $button-border-disabled: var(--border-neutralDisabled);

    // TODO: Hover state up for debate
    @if $type == primary {
      $button-border: var(--border-brand);
      $button-color-hover: var(--surface-brandLight);
      $button-border-disabled: var(--border-brandDisabled);
    } @else if $type == success {
      $button-border: var(--border-success);
      $button-color-hover: var(--surface-successLight);
      $button-border-disabled: var(--border-successDisabled);
    } @else if $type == warning {
      $button-border: var(--border-warning);
      $button-color-hover: var(--surface-warningLight);
      $button-border-disabled: var(--border-warningDisabled);
    } @else if $type == error {
      $button-border: var(--border-error);
      $button-color-hover: var(--surface-errorLight);
      $button-border-disabled: var(--border-errorDisabled);
    }
    border: var(--spacing-micro) solid $button-border;

    &:hover {
      background: $button-color-hover;
    }

    &:disabled {
      color: var(--text-disabled);
      border-color: $button-border-disabled;
      &:hover {
        background: var(--surface-transparent);
      }
    }
  }
}

// Designed to handle all instances of round-style buttons, supporting notification dots with the "notif-dot" selector on filled buttons
// Expected values:
// type: "primary" | "secondary" | "error" | "warning" | "success"
// active: "inactive" | "active"
// fill: "filled" | "outline"
@mixin round-button($type: primary, $active: inactive, $fill: filled) {
  display: flex;
  transition: 0.3s ease;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-width: var(--spacing-micro);

  cyg-rs-icon-default {
    height: 50%;
    width: 50%;
  }

  @if $fill == filled {
    $button-color-content: var(--text-onFill);
    $button-color-base: var(--surface-neutralPrimary);
    $button-color-hover: var(--surface-neutralSecondary);
    $button-color-disabled: var(--surface-neutralLight);
    $button-color-content-disabled: var(--text-onFillDisabled);

    @if $active == inactive {
      @if $type == primary {
        $button-color-base: var(--surface-brandPrimary);
        $button-color-hover: var(--surface-brandSecondary);
        $button-color-disabled: var(--surface-brandLight);
      } @else if $type == success {
        $button-color-base: var(--surface-successPrimary);
        $button-color-hover: var(--surface-successSecondary);
        $button-color-disabled: var(--surface-successLight);
      } @else if $type == warning {
        $button-color-base: var(--surface-warningPrimary);
        $button-color-hover: var(--surface-warningSecondary);
        $button-color-disabled: var(--surface-warningLight);
      } @else if $type == error {
        $button-color-base: var(--surface-errorPrimary);
        $button-color-hover: var(--surface-errorSecondary);
        $button-color-disabled: var(--surface-errorLight);
      } @else {
        $button-color-content: var(--text-inverse);
        $button-color-content-disabled: var(--text-disabled);
      }
    } @else {
      color: var(--text-primary);

      @if $type == primary {
        $button-color-base: var(--surface-brandSecondary);
        $button-color-hover: var(--surface-brandTertiary);
        $button-color-disabled: var(--surface-brandLight);
      } @else if $type == success {
        $button-color-base: var(--surface-successSecondary);
        $button-color-hover: var(--surface-successTertiary);
        $button-color-disabled: var(--surface-successLight);
      } @else if $type == warning {
        $button-color-base: var(--surface-warningSecondary);
        $button-color-hover: var(--surface-warningTertiary);
        $button-color-disabled: var(--surface-warningLight);
      } @else if $type == error {
        $button-color-base: var(--surface-errorSecondary);
        $button-color-hover: var(--surface-errorTertiary);
        $button-color-disabled: var(--surface-errorLight);
      } @else {
        $button-color-base: var(--surface-neutralSecondary);
        $button-color-hover: var(--surface-neutralTertiary);
        $button-color-disabled: var(--surface-neutralLight);
        $button-color-content: var(--text-inverse);
        $button-color-content-disabled: var(--text-disabled);
      }
    }
    color: $button-color-content;
    border-color: $button-color-content;
    background: $button-color-base;

    .notif-dot {
      border-color: $button-color-base;
      transition: inherit;
    }

    &:hover {
      background: $button-color-hover;

      .notif-dot {
        border-color: $button-color-hover;
      }
    }

    &:disabled {
      background: $button-color-disabled;
      color: $button-color-content-disabled;
      border-color: $button-color-content-disabled;

      .notif-dot {
        border-color: $button-color-disabled;
      }

      &:hover {
        background: $button-color-disabled;

        .notif-dot {
          border-color: $button-color-disabled;
        }
      }
    }
  } @else {
    background: var(--surface-transparent);
    color: var(--text-primary);

    $button-border: var(--border-neutral);
    $button-color-hover: var(--surface-neutralLight);
    $button-border-disabled: var(--border-neutralDisabled);
    $button-border-disabled: var(--border-neutralDisabled);

    // TODO: Hover state up for debate
    @if $type == primary {
      $button-border: var(--border-brand);
      $button-color-hover: var(--surface-brandLight);
      $button-border-disabled: var(--border-brandDisabled);
    } @else if $type == success {
      $button-border: var(--border-success);
      $button-color-hover: var(--surface-successLight);
      $button-border-disabled: var(--border-successDisabled);
    } @else if $type == warning {
      $button-border: var(--border-warning);
      $button-color-hover: var(--surface-warningLight);
      $button-border-disabled: var(--border-warningDisabled);
    } @else if $type == error {
      $button-border: var(--border-error);
      $button-color-hover: var(--surface-errorLight);
      $button-border-disabled: var(--border-errorDisabled);
    }
    border-color: $button-border;

    &:hover {
      background: $button-color-hover;
    }

    &:disabled {
      color: var(--text-disabled);
      border-color: $button-border-disabled;
      &:hover {
        background: var(--surface-transparent);
      }
    }
  }
}

@mixin tr-button($type: primary) {
  display: flex;
  transition: 0.3s ease;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0;
  border: none;

  $button-color-base: var(--surface-neutralPrimary);
  $button-color-hover: var(--surface-neutralSecondary);
  $button-color-disabled: var(--surface-neutralLight);
  @if $type == primary {
    $button-color-base: var(--surface-brandPrimary);
    $button-color-hover: var(--surface-brandSecondary);
    $button-color-disabled: var(--surface-brandLight);
  } @else if $type == success {
    $button-color-base: var(--surface-successPrimary);
    $button-color-hover: var(--surface-successSecondary);
    $button-color-disabled: var(--surface-successLight);
  } @else if $type == warning {
    $button-color-base: var(--surface-warningPrimary);
    $button-color-hover: var(--surface-warningSecondary);
    $button-color-disabled: var(--surface-warningLight);
  } @else if $type == error {
    $button-color-base: var(--surface-errorPrimary);
    $button-color-hover: var(--surface-errorSecondary);
    $button-color-disabled: var(--surface-errorLight);
  }

  color: $button-color-base;
  background: var(--surface-transparent);

  &:hover {
    color: $button-color-hover;
  }

  &:disabled {
    color: $button-color-disabled;
    &:hover {
      color: $button-color-disabled;
    }
  }
}