@use "sass:math";

@import "./../scss/sc-variables";

$button-height: 56px;
$sc-gradient-progress-tick-font-size: 12px !default;
$sc-gradient-progress-tick-line-height: 13px !default;
$ease-in-out-duration-md: 400ms;
$ease-in-out-duration-lg: 600ms;
$record-card-sc-gradient-progress-size: 400px;

.sc-gradient-progress {
  --first-tick-value: 25;
  --sc-gradient-progress-value: 100%;

  display: grid;
  grid-template-columns: (88px + $spacer) auto;
  grid-template-rows: auto minmax(0, 1fr) ($button-height + $card-padding);
  grid-template-areas:
    "header   header"
    "axis     graph"
    "footer   footer";
  height: 100%;
  overflow: hidden;

  &.--labeling-right {
    grid-template-columns: auto (88px + $spacer);
    grid-template-areas:
      "header   header"
      "graph    axis"
      "footer   footer";

    .sc-gradient-progress {
      &__axis {
        padding: ($spacer * 1.5 + 4px) $spacer 0 0;
      }

      &__ticks-wrapper {
        align-items: flex-start;
        left: 0;
      }

      &__tick {
        &::before {
          content: " ";
          width: 8px;
          height: 1px;
          background-color: var(--divider-color);
        }

        &::after {
          content: none;
        }
      }

      &__value .value__content {
        margin-left: 12px;
        margin-right: 0;
      }

      &__graph {
        padding: ($spacer * 1.5) ($spacer * 0.75) 0 0;
        margin-left: ($spacer * 1.5);
        margin-right: 0;
      }
    }
  }

  &__header {
    grid-area: header;
    padding: $card-padding $card-padding math.div($card-padding, 2);
    display: flex;
    justify-content: center;
  }

  &__axis {
    grid-area: axis;
    position: relative;
    padding: ($spacer * 1.5 + 4px) 0 0 $spacer;
  }

  &__ticks-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: (28px - math.div($sc-gradient-progress-tick-font-size, 2));
    bottom: (math.div($sc-gradient-progress-tick-font-size, 2) * -1);

    align-items: flex-end;
    right: 0;
  }

  &__tick {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: $sc-gradient-progress-tick-font-size;
    line-height: 13px;

    &::after {
      content: " ";
      width: 8px;
      height: 1px;
    }
  }

  &__value {
    height: calc(100 / (100 - var(--first-tick-value)) * 100%);
    position: relative;
    opacity: 0;
    animation: value-fade $ease-in-out-duration-md $ease-in-out-curve-function $ease-in-out-duration-lg forwards;

    @keyframes value-fade {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    .value {
      position: absolute;
      bottom: calc(var(--sc-gradient-progress-value) - 16px);
      height: 32px;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      align-items: center;
      justify-content: center;

      &__bg {
        grid-column: 1/-1;
        grid-row: 1/-1;
      }

      &__content {
        grid-column: 1/-1;
        grid-row: 1/-1;
        margin-right: 12px;
        margin-left: 0;
        // margin-top: 2px;
        text-align: center;
      }
    }
  }

  &__warning {
    display: none;
    align-items: center;
    gap: $spacer * 0.5;
    padding: 4px $spacer 4px 4px;
    border-radius: 50rem;
    // background-color: var(--fit-score-value-bg-color);
    // font-size: $font-size-base;
    // font-variation-settings: "wght" var(--font-weight-bold);
    // color: var(--danger);
  }

  &__graph {
    grid-area: graph;
    overflow: hidden;

    padding: ($spacer * 1.5) 0 0 ($spacer * 0.75);
    margin-right: ($spacer * 1.5);
    margin-left: 0;
  }

  &__footer {
    grid-area: footer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__title {
    text-align: center;
    text-transform: uppercase;
    margin: 0;
  }

  &__bar {
    position: relative;
    width: 24px;
    height: calc((100 / (100 - var(--first-tick-value)) * 100%));
    border-top-left-radius: 50rem;
    border-top-right-radius: 50rem;
  }

  &__mask {
    clip-path: inset(calc(100% + 4px) 4px 4px 4px round 50rem);
    // transition: all $ease-in-out-duration-md $ease-in-out-curve-function;
    animation: sc-gradient-progress-loading $ease-in-out-duration-lg $ease-in-out-curve-function forwards;
  }

  @keyframes sc-gradient-progress-loading {
    0% {
      clip-path: inset(calc(100% + 4px) 4px 4px 4px round 50rem);
    }
    100% {
      clip-path: inset(calc(100% - var(--sc-gradient-progress-value) + 4px) 4px 4px 4px round 50rem);
    }
  }

  &__bg-gradient {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    // height: calc(200% - 8px);
    // height: calc(100% / (100% - var(--first-tick-value)) * 100% - 8px);
    border-radius: 50rem;
  }

  &.--offset-none {
    grid-template-rows: auto minmax(0, 1fr) (6px + $card-padding);

    .sc-gradient-progress {
      &__graph {
        border-bottom: 0;
      }

      &__bar {
        border-radius: 50rem;
      }

      &__ticks-wrapper {
        bottom: -2px;
      }
    }
  }

  //*
  //* SIZE: MEDIUM
  //*

  &--md {
    @extend .sc-gradient-progress;
    grid-template-rows: auto minmax(0, 1fr) auto !important;

    //? Labeling left
    grid-template-columns: 64px auto;

    .sc-gradient-progress {
      &__header {
        padding: 0 0 8px;
      }

      &__axis {
        padding: 12px 0 0 !important;
      }

      &__value {
        height: calc(100 / (100 - var(--first-tick-value)) * 100%);

        .value {
          bottom: calc(var(--sc-gradient-progress-value) - 16px);
          width: 64px;
          height: 32px;

          &__content {
            // font-size: $font-size-sm;
            // padding: 0 8px;
            line-height: 24px;
            margin-right: 8px;
            margin-left: 0;
          }
        }
      }

      &__ticks-wrapper {
        top: 6px;
      }

      &__footer {
        height: auto;
        padding: 16px 0 0;
        // font-size: $font-size-sm;
        // justify-content: start;
      }

      &__warning {
        // font-size: $font-size-sm;
        line-height: 24px;
        padding: 4px 8px;
      }

      &__bar {
        height: calc((100 / (100 - var(--first-tick-value)) * 100%));
        width: 8px;
      }

      &__mask {
        clip-path: inset(100% 0 0 0 round 50rem 50rem 0 0);
        // transition: all $ease-in-out-duration-md $ease-in-out-curve-function;
        animation: sc-gradient-sm-loading $ease-in-out-duration-lg $ease-in-out-curve-function forwards;
      }

      @keyframes sc-gradient-sm-loading {
        0% {
          clip-path: inset(100% 0 0 0 round 50rem 50rem 0 0);
        }
        100% {
          clip-path: inset(calc(100% - var(--sc-gradient-progress-value)) 0 0 0 round 50rem 50rem 0 0);
        }
      }

      &__graph {
        padding: 12px 0 0 4px;
        margin-right: 0;
        height: auto;
      }
    }

    //? Labeling right
    &.--labeling-right {
      grid-template-columns: auto 64px;

      .sc-gradient-progress {
        &__graph {
          padding: 12px 4px 0 0;
          margin-left: 0;
          height: auto;
        }

        &__value .value__content {
          margin-right: 0;
          margin-left: 8px;
        }

        // &__footer {
        //   justify-content: end;
        // }
      }
    }

    &.--offset-none {
      grid-template-rows: auto minmax(0, 1fr) 6px !important;

      .sc-gradient-progress {
        &__ticks-wrapper {
          bottom: -6px;
        }
      }
    }
  }

  //*
  //* SIZE: SMALL
  //*

  &--sm {
    //? Labeling left
    @extend .sc-gradient-progress--md;
    grid-template-columns: 0 auto;
    grid-template-rows: auto minmax(0, 1fr) 40px !important;

    .sc-gradient-progress {
      &__graph {
        padding: 0 20px 0 20px !important;
      }

      &__axis {
        grid-column: 1/-1;
      }

      &__value {
        .value {
          bottom: calc(50% - 44px);
          width: 48px;

          &__bg {
            display: none;
          }

          &__content {
            border-radius: none;
            // padding: 0;
          }
        }
      }

      &__ticks-wrapper {
        display: none;
      }
    }

    //? Labeling right
    &.--labeling-right {
      grid-template-columns: auto 0;
    }

    &.--offset-none {
      grid-template-rows: auto minmax(0, 1fr) auto !important;
    }
  }
}

//*
//* Radial Fit Score
//*

// .sc-gradient-progress-radial {
//   --sc-gradient-progress-radial-stroke-color-h: clamp(
//     0deg,
//     calc((var(--sc-gradient-progress-value) - 50) * 1.34 * 4 * 1deg),
//     134deg
//   );
//   --sc-gradient-progress-radial-stroke-color-s: 100%;
//   --sc-gradient-progress-radial-stroke-color-l: 50%;
//   --sc-gradient-progress-radial-stroke-color: hsl(
//     var(--sc-gradient-progress-radial-stroke-color-h),
//     var(--sc-gradient-progress-radial-stroke-color-s),
//     var(--sc-gradient-progress-radial-stroke-color-l)
//   );

//   --sc-gradient-progress-radial-diameter: 80px;

//   position: relative;
//   width: var(--sc-gradient-progress-radial-diameter);
//   height: var(--sc-gradient-progress-radial-diameter);
//   background-color: var(--sc-gradient-progress-bg-color);
//   border-radius: 50rem;
//   // padding: 3px;
//   // border: 1px solid var(--divider-color);

//   .mat-progress-spinner {
//     stroke-linecap: round;

//     &::after {
//       content: "";
//       width: 100%;
//       height: 100%;
//       border: 6px solid var(--sc-gradient-progress-bar-bg-color);
//       border-radius: 50rem;
//       position: absolute;
//       top: 0;
//       left: 0;
//       // z-index: 1;
//     }

//     svg {
//       z-index: 100;

//       circle {
//         stroke: var(--sc-gradient-progress-radial-stroke-color) !important;
//       }
//     }
//   }

//   &__label {
//     position: absolute;
//     top: 0;
//     left: 0;
//     width: 100%;
//     height: 100%;
//     display: grid;
//     place-items: center;
//   }

//   &--sm {
//     @extend .sc-gradient-progress-radial;
//     --sc-gradient-progress-radial-diameter: 64px;

//     .mat-progress-spinner::after {
//       border-width: 2px;
//     }
//   }

//   &--md {
//     @extend .sc-gradient-progress-radial;
//     --sc-gradient-progress-radial-diameter: 112px;

//     .mat-progress-spinner::after {
//       border-width: 8px;
//     }
//   }

//   &--lg {
//     @extend .sc-gradient-progress-radial;
//     --sc-gradient-progress-radial-diameter: 160px;

//     .mat-progress-spinner::after {
//       border-width: 16px;
//     }
//   }
// }