<template>
  <div class="stepper">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="flex items-center"
      :class="{
        'stepper-active': modelValue == item,
        'stepper-done': indexActive > index || allDone,
      }"
    >
      <div class="wrap-step">
        <div
          v-if="indexActive <= index && !allDone"
          class="icon-number"
          :class="indexActive >= index ? 'body-1-bold' : 'body-1-regular'"
        >
          {{ index + 1 }}
        </div>
        <base-icon
          v-if="indexActive > index || allDone"
          iconName="check"
          color="#fff"
          height="16"
          width="16"
        />
        <div
          :class="
            indexActive >= index || allDone ? 'body-1-bold' : 'body-1-regular'
          "
          @click="clickStep(index)"
        >
          {{ item }}
        </div>
      </div>
      <div
        v-if="index != list.length - 1"
        class="stepper-line line-default"
        :class="{
          'line-done': indexActive > index + 1 || allDone,
          'line-active': indexActive == index + 1 && !allDone,
        }"
      />
    </div>
  </div>
</template>

<script>
import BaseIcon from "@/components/Base/BaseIcon";

export default {
  components: {
    BaseIcon,
  },
  props: {
    list: {
      type: [Array],
    },
    modelValue: {
      type: [String],
    },
    allDone: {
      type: [Boolean],
    },
  },
  computed: {
    indexActive() {
      let checkIndex = this.list.indexOf(this.modelValue);
      return checkIndex;
    },
  },
  methods: {
    clickStep(index) {
      if (this.indexActive > index) {
        this.$emit("backClick")
      } else if (this.indexActive < index) {
        this.$emit("nextClick")
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@use "@/assets/style/_color.scss" as *;

.stepper {
  display: flex;
  transition: all 0.3s;

  .wrap-step {
    display: flex;
    align-items: center;
  }

  .body-1-bold {
    font-weight: 700;
    font-size: 14px;
  }

  .body-1-regular {
    font-weight: 400;
    font-size: 14px;
  }

  svg {
    background: $success-4;
    border-radius: 50%;
    padding: 2px;
  }

  .icon-number {
    border-radius: 50%;
    background: $neutral-0;
    border: 1px solid $neutral-2;
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
  }

  .body-1-regular {
    color: $neutral-4;
  }

  .body-1-bold,
  .body-1-regular {
    margin-left: 6px;
  }

  &-active {
    color: $dark-blue-4;

    .icon-number {
      color: $neutral-0;
      background: $dark-blue-4;
    }
  }

  &-done {
    color: $success-4;
  }

  &-line {
    width: 28px;
    margin: 0 8px;
    transition: all 0.3s;
  }

  .line-default {
    border: 1px solid $neutral-3;
  }

  .line-done {
    border: 1px solid $success-4;
  }

  .line-active {
    border: 1px solid $dark-blue-4;
  }
}
</style>
