@use 'sass:map';

@use './shared' as *;
@use './design' as *;

/* stylelint-disable length-zero-no-unit */
$timeline: () !default;
$timeline: map.merge(
  (
    item-span: 20px,
    item-span-pending: 36px,
    pointer-color: value('color-primary-base'),
    pointer-bg-color: value('color-white'),
    pointer-b-width: 2px,
    pointer-b-color: value('color-primary-base'),
    pointer-b-color-disabled: value('content-color-disabled'),
    pointer-size: 12px,
    line-width: 2px,
    line-style: solid,
    line-style-pending: dashed,
    line-color: value('border-color-light-2'),
    line-inset-start: 0px,
    line-inset-end: 0px
  ),
  $timeline
);
/* stylelint-enable */

.#{$namespace}-timeline {
  &-vars {
    @include define-preset-values('timeline', $timeline);
  }

  @mixin define-timeline-style($style-map) {
    @include define-preset-style('timeline', $style-map);
  }

  $side-pad: calc(#{value('timeline-pointer-size')} * 0.5);

  @include basis {
    display: inline-flex;
    flex-direction: column;
    padding-inline-start: $side-pad;
  }

  &--horizontal {
    flex-direction: row;
    padding-inline-start: 0;
    padding-top: $side-pad;
  }

  &--flip {
    padding-inline: 0 $side-pad;
  }

  &--horizontal#{&}--flip {
    padding-inline-end: 0;
    padding-top: 0;
    padding-bottom: $side-pad;
  }

  &--alternate,
  &--alternate#{&}--flip {
    padding: 0;
  }

  &__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-bottom: value('timeline-item-span');

    &:last-child {
      padding-bottom: 0;
    }

    @each $type in $types {
      @if $type != 'primary' {
        &--#{$type} {
          @include define-timeline-style(
            (
              pointer-color: 'color' $type 'base',
              pointer-b-color: 'color' $type 'base'
            )
          );
        }
      }
    }
  }

  &--horizontal &__item {
    padding-inline-end: value('timeline-item-span');
    padding-bottom: 0;
  }

  &--alternate &__item {
    align-self: flex-end;
    width: 50%;
  }

  &--horizontal#{&}--alternate &__item {
    width: 100%;
    height: 50%;
  }

  &--alternate:not(&--flip) &__item {
    &:nth-child(even) {
      align-self: flex-start;
    }
  }

  &--alternate#{&}--flip &__item {
    &:nth-child(odd) {
      align-self: flex-start;
    }
  }

  $pointer-size: value('timeline-pointer-size');

  &__signal {
    position: absolute;
    inset-inline-start: calc($pointer-size * -0.5);
    top: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: $pointer-size;
    height: $pointer-size;
  }

  &--horizontal &__signal {
    inset-inline-start: 0;
    top: calc($pointer-size * -0.5);
  }

  &--flip &__signal {
    inset-inline-start: calc($pointer-size * -0.5 + 100%);
  }

  &--horizontal#{&}--flip &__signal {
    inset-inline-start: 0;
    top: calc($pointer-size * -0.5 + 100%);
  }

  &--alternate:not(&--flip) &__item:nth-child(even) &__signal {
    inset-inline-start: calc($pointer-size * -0.5 + 100%);
  }

  &--alternate#{&}--flip &__item:nth-child(even) &__signal {
    inset-inline-start: calc($pointer-size * -0.5);
  }

  &--horizontal#{&}--alternate:not(&--flip) &__item:nth-child(even) &__signal {
    inset-inline-start: 0;
    top: calc($pointer-size * -0.5 + 100%);
  }

  &--horizontal#{&}--alternate#{&}--flip &__item:nth-child(even) &__signal {
    inset-inline-start: 0;
    top: calc($pointer-size * -0.5);
  }

  &--signal-click &__signal {
    cursor: pointer;
  }

  &__pointer {
    width: 100%;
    height: 100%;
    color: value('timeline-pointer-color');
    background-color: value('timeline-pointer-bg-color');
    border: value('timeline-pointer-b-width') solid value('timeline-pointer-b-color');
    border-radius: 50%;
  }

  &__item--disabled &__pointer {
    border-color: value('timeline-pointer-b-color-disabled');
  }

  $line-width: value('timeline-line-width');

  &__line {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 0;
    padding-top: calc($pointer-size + value('timeline-line-inset-start'));
    padding-bottom: value('timeline-line-inset-end');

    &::after {
      height: 100%;
      content: '';
      border: 0 value('timeline-line-style') value('timeline-line-color');
      border-inline-start-width: $line-width;
      transition: value('transition-border');
    }
  }

  &--horizontal &__line {
    bottom: auto;
    flex-direction: row;
    width: 100%;
    height: 0;
    padding: 0;
    padding-inline: calc($pointer-size + value('timeline-line-inset-start'))
      value('timeline-line-inset-end');

    &::after {
      width: 100%;
      height: 0;
      border-inline-start-width: 0;
      border-top-width: $line-width;
    }
  }

  &--flip &__line {
    inset-inline-start: 100%;
  }

  &--horizontal#{&}--flip &__line {
    inset-inline-start: 0;
    top: 100%;
  }

  &--alternate:not(&--flip) &__item:nth-child(even) &__line {
    inset-inline-start: 100%;
  }

  &--alternate#{&}--flip &__item:nth-child(even) &__line {
    inset-inline-start: 0;
  }

  &--horizontal#{&}--alternate:not(&--flip) &__item:nth-child(even) &__line {
    inset-inline-start: 0;
    top: 100%;
  }

  &--horizontal#{&}--alternate#{&}--flip &__item:nth-child(even) &__line {
    inset-inline-start: 0;
    top: 0;
  }

  $content-pad: calc($pointer-size * 0.5 + 8px);

  &__content {
    position: relative;
    top: -5px;
    display: flex;
    flex-direction: column;
    padding-inline-start: $content-pad;
  }

  &--horizontal &__content {
    top: 0;
    padding-inline-start: 0;
    padding-top: $content-pad;
  }

  &--flip &__content {
    padding: {
      inline-end: $content-pad;
      inline-start: 0;
    }
  }

  &--horizontal#{&}--flip &__content {
    padding: {
      top: 0;
      inline-end: 0;
      bottom: $content-pad;
    }
  }

  &--alternate:not(&--flip) &__item:nth-child(even) &__content {
    align-items: flex-end;
    padding: {
      inline-end: $content-pad;
      inline-start: 0;
    }
  }

  &--alternate#{&}--flip &__item:nth-child(even) &__content {
    padding: {
      inline-end: 0;
      inline-start: $content-pad;
    }
  }

  &--alternate#{&}--flip &__item:nth-child(odd) &__content {
    align-items: flex-end;
    padding: {
      inline-end: $content-pad;
    }
  }

  &--horizontal#{&}--alternate:not(&--flip) &__item:nth-child(even) &__content {
    align-self: flex-end;
    padding: {
      top: 0;
      inline-end: 0;
      bottom: $content-pad;
    }
  }

  &--horizontal#{&}--alternate#{&}--flip &__item:nth-child(even) &__content {
    padding: $content-pad 0 0;
  }

  &--horizontal#{&}--alternate#{&}--flip &__item:nth-child(odd) &__content {
    padding-inline-end: 0;
  }

  &__item:last-child &__line::after {
    display: none;
  }

  $line: #{&}__line;

  &--pending &__item:nth-last-child(2) {
    padding-bottom: value('timeline-item-span-pending');

    #{$line}::after {
      border-style: value('timeline-line-style-pending');
    }
  }

  &--horizontal#{&}--pending &__item:nth-last-child(2) {
    padding-inline-end: value('timeline-item-span-pending');
    padding-bottom: 0;
  }
}