<template>
  <div :class="tabClassList">
    <div class="tab__title" @click="toggleExpanding">
      <i class="tab__icon" :class="icon" />
      {{ title }}
    </div>
    <div class="tab__body">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: "ProductTabItem",
  computed: {
    tabClassList() {
      return {
        tab: true,
        "tab--active": this.isActive,
        "tab--expanded": this.isExpanded,
      };
    },
  },
  data() {
    return {
      isExpanded: false,
    };
  },
  methods: {
    toggleExpanding() {
      this.isExpanded = !this.isExpanded;
    },
  },
  props: {
    icon: {
      default: "",
      required: true,
      type: String,
    },
    isActive: {
      default: false,
      required: true,
      type: Boolean,
    },
    title: {
      default: "",
      required: true,
      type: String,
    },
  },
};
</script>
<style lang="scss" scoped>
.tab {
  background: $color-white;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
  margin: $padding-default/2 auto;
  padding: 0 $padding-default;
  position: relative;

  &__title {
    color: $color-text;
    display: block;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    position: relative;

    &:after {
      content: "\e91d";
      float: left;
      font-family: "icomoon" !important;
      font-size: 18px;
      transition: all ease-in-out 0.2s;
    }
  }

  &__icon {
    display: inline-block;
    font-size: 20px;
    margin-left: $padding-default/4;
    vertical-align: middle;
  }

  &__body {
    color: $color-text--light;
	  content-visibility: auto;
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    transition: height ease-in 0.2s;
  }

  &--expanded {

    .tab__title::after {
      transform: rotate(90deg);
    }

    .tab__body {
	    content-visibility: none;
      height: auto;
      opacity: 1;
      padding: $padding-default 0;
    }
  }

  @media (min-width: $tablet) {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    margin: 0;

    &__title,
    &__body {
      display: none;
    }

    &--active {
      .tab__body {
        display: block;
        height: auto;
        opacity: 1;
        padding: $padding-default 0;
      }
    }
  }
}

[data-lang="en"] {
  .tab {
    &__title {
      &:after {
        float: right;
      }
    }

    &__icon {
      margin-left: 0;
      margin-right: $padding-default/4;
    }
  }
}
</style>