@import '../colors';
@import '../mixins';

$toggle-medium-padding: 2px;
$toggle-medium-width: 32px;
$toggle-medium-height: 20px;

$toggle-large-padding: 3px;
$toggle-large-width: 46px;
$toggle-large-height: 30px;

@function getToggleOvalSize($height, $width, $padding) {
  @return $height - (2 * $padding);
}

@function getToggleOffset($height, $width, $padding) {
  $oval-size: getToggleOvalSize($height, $width, $padding);

  @return $oval-size - ($width / 2);
}

@mixin toggleBackground {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  transition: left 0.5s ease-in-out;
}

@mixin toggleKeyframes($name, $height, $width, $padding) {
  $offset: getToggleOffset($height, $width, $padding);

  @keyframes toggle#{$name}BouncingLeft {
    0% {
      left: calc(50% - #{$padding + $offset});
    }
    25% {
      left: 0;
    }
    50% {
      left: $padding + 1;
    }
    100% {
      left: $padding;
    }
  }

  @keyframes toggle#{$name}BouncingRight {
    0% {
      left: 0;
    }
    25% {
      left: calc(50%);
    }
    50% {
      left: calc(50% - #{$padding + 1});
    }
    100% {
      left: calc(50% - #{$padding + $offset});
    }
  }
}

@mixin toggleWrapper($height, $width) {
  height: $height;
  width: $width;
  border-radius: $height/2;
}

@mixin toggleIcon($height, $width, $padding) {
  $oval-size: getToggleOvalSize($height, $width, $padding);

  left: $padding;
  height: $oval-size;
  width: $oval-size;
}

@mixin toggleIconCheckedLeft($height, $width, $padding) {
  $offset: getToggleOffset($height, $width, $padding);

  left: calc(50% - #{$padding + $offset});
}

.tix-toggle.v4 {
  display: inline-block;
  overflow: hidden;
  position: relative;

  &.large {
    @include toggleWrapper($toggle-large-height, $toggle-large-width);
  }
  &.medium {
    @include toggleWrapper($toggle-medium-height, $toggle-medium-width);
  }

  .tix-toggle-icon {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 100%;
    background-color: $color-N0;
    @include elevation-1;

    @at-root {
      .large#{&} {
        @include toggleIcon(
          $toggle-large-height,
          $toggle-large-width,
          $toggle-large-padding
        );
      }
      .medium#{&} {
        @include toggleIcon(
          $toggle-medium-height,
          $toggle-medium-width,
          $toggle-medium-padding
        );
      }
    }
  }

  &.bouncing-left {
    .tix-toggle-icon {
      animation-duration: 0.5s;

      @at-root {
        .large#{&} {
          animation-name: toggleLargeBouncingLeft;
        }
        .medium#{&} {
          animation-name: toggleMediumBouncingLeft;
        }
      }
    }
  }

  &.bouncing-right {
    .tix-toggle-icon {
      animation-duration: 0.5s;

      @at-root {
        .large#{&} {
          animation-name: toggleLargeBouncingRight;
        }
        .medium#{&} {
          animation-name: toggleMediumBouncingRight;
        }
      }
    }
  }

  &:before {
    @include toggleBackground;
    left: 0;
    transition: background-color 0.3s ease-in-out;
    background-color: $color-N400;
  }

  &.checked {
    .tix-toggle-icon {
      @at-root {
        .large#{&} {
          @include toggleIconCheckedLeft(
            $toggle-large-height,
            $toggle-large-width,
            $toggle-large-padding
          );
        }
        .medium#{&} {
          @include toggleIconCheckedLeft(
            $toggle-medium-height,
            $toggle-medium-width,
            $toggle-medium-padding
          );
        }
      }
    }

    &:before {
      background-color: $color-B400;
    }
  }

  &.disabled {
    &:before {
      background-color: $color-N200;
    }

    .tix-toggle-icon {
      background-color: $color-N100;
    }

    &.checked:before {
      background-color: $color-B200;
    }

    input {
      cursor: not-allowed;
    }
  }

  input {
    @include toggleBackground;
    cursor: pointer;
    z-index: 1; //To make input stay above all
    opacity: 0;
    left: 0;
    right: 0;
  }
}

@include toggleKeyframes(
  'Large',
  $toggle-large-height,
  $toggle-large-width,
  $toggle-large-padding
);
@include toggleKeyframes(
  'Medium',
  $toggle-medium-height,
  $toggle-medium-width,
  $toggle-medium-padding
);