<script>
export default {
  props: {
    product: Object
  },
  data() {
    return {
      flipped: false,
    }
  },
  methods: {
    toggle() {
      this.flipped = !this.flipped;
    },
  }
}
</script>

<template>
  <div class="flip-card" :class="{flipped}" @click="toggle">
    <div v-if="product" class="flip-card-inner" :class="(product && product.kind) || 'no-product'">
      <div class="flip-card-front">
        <img class="logo" :src="$helper.getImage(product.kind.getImageimage)" />
        <div>
          <h3 class="title">{{ $t(product.kind.localized)}}</h3> 
          <h3 class="slogan">{{ $t(product.slogan) }}</h3>
        </div>
        <div class="description">{{  $t(product.description) }}</div>    
      </div>
      <div class="flip-card-back">
        <div class="info">
          <div class="info-header">
            <h3 class="title centered">{{ $t(product.name) }}</h3>
            <h3>- {{ $t(product.farm) }} -</h3>
            <p class="strain">{{ $t(product.strain) }}</p>
          </div>
          <div class="info-data">
            <div class="info-data-left">
              <img class="logo" :src="$helper.getImage(product.kind.image)" />
              <p class="kind">{{ $t(product.kind.localized) }}</p>
              <p class="slogan">{{ $t(product.slogan) }}</p>
            </div>
            <div class="info-data-right">
              <div class="info-data-row">
                <div class="info-data-box land">
                  <div class="info-data-box-label">{{ $t('labels.country') }}</div>
                  <div class="info-data-box-value">
                    {{ $t(product.country) }}
                  </div>
                </div>
                <div class="info-data-box height">
                  <div class="info-data-box-label">{{ $t('labels.height') }}</div>
                  <div class="info-data-box-value">
                    <div class="text-overflow">
                      {{ $t(product.height) }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="info-data-row">
                <div class="info-data-box revision">
                  <div class="info-data-box-label">{{ $t('labels.revision') }}</div>
                  <div class="info-data-box-value">
                    <div class="text-overflow">
                      {{ $t(product.revision) }}
                    </div>
                  </div>
                </div>
                <div class="info-data-box harvest">
                  <div class="info-data-box-label">{{ $t('labels.harvest') }}</div>
                  <div class="info-data-box-value">
                    <div class="text-overflow">
                      {{ $t(product.harvest) }}
                    </div>
                  </div>
                </div>
                <div class="info-data-box profile">
                  <div class="info-data-box-label">{{ $t('labels.profile') }}</div>
                  <div class="info-data-box-value">
                    <div class="text-overflow">
                      {{ $t(product.profile) }}
                    </div>
                  </div>
                </div>
                
              </div>
              <div class="info-data-row">
                <div class="info-data-box taste">
                  <div class="info-data-box-label">{{ $t('labels.taste') }}</div>
                  <div class="info-data-box-value">
                    <div class="text-overflow">
                      {{ $t(product.taste) }}
                    </div>
                  </div>
                </div>                
                <div class="info-data-box mouthfeel">
                  <div class="info-data-box-label">{{ $t('labels.texture') }}</div>
                  <div class="info-data-box-value">
                    <div class="text-overflow">
                      {{ $t(product.texture) }}
                    </div>
                  </div>
                </div>                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      No product
    </div>
  </div>
</template>

<style lang="scss" scoped>
h3 {
    font-weight: 300;
    font-size: 36px;
    line-height: 50px;
    text-align: left;

}

.description {
  white-space: pre-line;
}
.flip-card {
  cursor: pointer; 
  height: 444px;
  width: 600px;
  color: #000;
  font-size: 20px;
  border-radius: 40px;
  perspective: 1000px;

  &.flipped &-inner {
    transform: rotateY(180deg);
  }  

  &-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    border-radius: 40px;

    &.earth {
      background-color: #A6AF94;
    }
    &.water {
      background-color: #889CA7;
    }
    &.air {
      background-color: #F4EEB0;
    }
    &.fire {
      background-color: #D58C83;
    }
    &.no-product {
      background-color: #fff;
    }
  }

&-front {
  display: grid;
  grid-template-columns: 180px auto;
  grid-template-rows: 160px auto;
  justify-items: start;
  align-items: center;
  
  .description {
    grid-column-start: 1;
    grid-column-end: 3;
    font-weight: 500;
    font-size: 22px;
    line-height: 35px;
    text-align: justify;
    padding: 0 44px;
    align-self: flex-start;
  }
  .logo {
    height: 184px;
    width: 147px;
  }
}

  &-front, &-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  &-back {
    transform: rotateY(180deg);
    border-radius: 40px;
    padding-top: 16px;

    h3, h4 {
      font-family: 'Righteous', cursive;
      text-align: center;
    }

    .info {
      height: 100%;
      width: 100%;
      display: grid;
      grid-template-rows: 35% 65%;

      h3.title {
        text-transform: uppercase;
      }

      .strain {
        text-align: center;
        font-family: 'Cormorant Garamond', serif;
        font-size: 24px;
      }

      &-data {
        display: grid;
        grid-template-columns: 30% 70%;
        margin: 20px;
        border-style: solid;
        border-width: 2px;

        &-left {
          padding-top: 16px;
        }

        &-right {
          display: grid;
          grid-template-rows: repeat(3, 1fr);
          height: 100%;
          width: 100%;

          .earth & {
            background-color: #babfa9;
          }
          .water & {
            background-color: #92a7b1;
          }
          .air & {
            background-color: #f4f4cc;
          }
          .fire & {
            background-color: #d59c95;
          }          
        }

        &-row {            
          border-top-style: solid;
          border-top-width: 2px;
          border-bottom-style: solid;
          border-bottom-width: 2px;
          display: inline-flex;
          // flex-wrap: nowrap;
          // justify-content: space-around;
          min-width: 100%;
          height: 100%;

          &:first-child {
            border-top: none;
          }

          &:last-child {
            border-bottom: none;
          }

          .earth & {
            border-color: #A6AF94;
          }
          
          .water & {
            border-color: #889CA7;
          }
          .air & {
            border-color: #F4EEB0;
          }
          .fire & {
            border-color: #D58C83;
          }
        }

        &-box {
          padding: 4px 0 0 8px;
          border-right-style: solid;
          border-right-width: 3px;
          min-width: 100px;
          flex-basis: 0px;
          flex-grow: 1;

          .text-overflow {
            // width: 98%;
            // text-overflow: ellipsis;
            // overflow: hidden;
            // white-space: nowrap;
          }

          &:last-child {
            border-right: none;
          }


          .earth & {
            border-color: #A6AF94;
          }
          
          .water & {
            border-color: #889CA7;
          }
          .air & {
            border-color: #F4EEB0;
          }
          .fire & {
            border-color: #D58C83;
          }

          &-label{
            font-family: 'Righteous', cursive;
            font-size: 18px;
            text-transform: uppercase;
          }
          &-value{
            font-family: 'Cormorant Garamond', serif;
            font-size: 18px;
          }
        }

        p {
          &.kind {
            font-family: 'Righteous', cursive;
            text-align: left;
            line-height: 20px;
            margin-left: 20px;
            text-transform: uppercase;
            letter-spacing: 1.3px;
          }
          &.slogan {
            font-family: 'Cormorant Garamond', serif;
            font-size: 90%;
            text-align: left;
            line-height: 25px;
            margin-left: 20px;
          }
        }

        .earth & {
          border-color: #babfa9;
        }
        .water & {
          border-color: #92a7b1;
        }
        .air & {
          border-color: #f4f4cc;
        }
        .fire & {
          border-color: #d59c95;
        }
      }
    }
  }
}
</style>