/* 
For licensing see accompanying LICENSE file.
Copyright (C) 2023 Apple Inc. All Rights Reserved.
*/

@import '../../define.scss';

$timeline-height: 55px;
$embedding-width: 600px;

$challenge-point-train-color: $orange-500;
$challenge-point-log-color: $teal-500;

.embedding-wrapper {
  position: relative;

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.embedding {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.embedding-svg {
  background-color: white;
  width: 100%;
  height: 100%;
  cursor: grab;

  :global(g.daily-point) {
    fill: $blue-600;
    fill-opacity: 0.5;
  }

  :global(g.challenge-point) {
    fill: $challenge-point-log-color;
    stroke: white;
    stroke-opacity: 0.8;
    fill-opacity: 0.7;
    cursor: default;
  }

  :global(g.challenge-point.hide) {
    display: none;
  }

  :global(g.challenge-point.train-sample) {
    fill: $challenge-point-train-color;
    stroke: white;
    stroke-opacity: 0.8;
    fill-opacity: 0.7;
  }

  &:active {
    cursor: grabbing;
  }
}

$background-color: change-color(
  $color: white,
  $alpha: 0.5
);

.embedding-title {
  position: absolute;
  left: 50%;
  top: 15px;
  line-height: 1;
  transform: translateX(-50%);
  pointer-events: none;

  background-color: $background-color;
  padding: 2px 5px;
  border-radius: 5px;
}

.legend-panel {
  position: absolute;
  right: 10px;
  bottom: 5px;

  pointer-events: none;
  width: 100%;
  display: flex;
  flex-direction: row-reverse;

  .legend-grid {
    display: grid;
    grid-template-columns: auto auto;
    min-width: 125px;
    column-gap: 3px;
    background-color: $background-color;
    border-radius: 10px;

    .grid-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      &.center {
        justify-content: center;
      }
    }

    .label {
      font-size: 12px;
      color: $gray-700;
    }

    .svg-icon.train {
      width: 20px;
      height: 20px;

      :global(#path-3) {
        fill: change-color($color: $gray-600, $alpha: 0.25);
      }
      :global(#path-2) {
        fill: change-color($color: $gray-600, $alpha: 0.5);
      }
      :global(#path-1) {
        fill: change-color($color: $gray-600, $alpha: 0.8);
      }
    }

    .svg-icon.log {
      width: 20px;
      height: 20px;

      // :global(#path-3) {
      //   fill: change-color($color: $blue-600, $alpha: 0.25);
      // }
      // :global(#path-2) {
      //   fill: change-color($color: $blue-600, $alpha: 0.5);
      // }
      // :global(#path-1) {
      //   fill: change-color($color: $blue-600, $alpha: 0.8);
      // }

      :global(#path-3) {
        fill: change-color($color: $teal-600, $alpha: 0.25);
      }
      :global(#path-2) {
        fill: change-color($color: $teal-600, $alpha: 0.5);
      }
      :global(#path-1) {
        fill: change-color($color: $teal-600, $alpha: 0.8);
      }
    }

    .circle {
      border-radius: 100%;
      background-color: currentColor;
      width: 8px;
      height: 8px;

      &.train {
        background-color: $challenge-point-train-color;
      }

      &.log {
        background-color: $challenge-point-log-color;
      }
    }
  }
}

.svg-icon {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $gray-50;

  :global(svg) {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
}
