<template>
  <reco-modal 
    v-on:backButtonClicked="backButtonClicked" 
    v-on:doneButtonClicked="doneButtonClicked" 
    :withBackButton="withBackButton" 
    :withDoneButton="withDoneButton" 
    :doneButtonText="doneButtonText" 
    :isNextButton="isNextButton" 
    :title="title">

    <ion-content class="content" slot="content">
      <div class="skip-wrapper" v-if="skipOption">
        <div class="skip-button" v-if="!isFilterSelect" @click="onSelectOption(skipOption)">{{ skipOption.display_name }}</div>
        <div class="skip-button" v-else @click="onSelectOption(skipOption)">{{ skipOption.display_name }}</div>
        <div class="skip-or-text">or select topic of interest</div>
      </div>
      <div class="wrapper">
        <div class="item" v-for="option in options" :key="option.value" v-if="option.value !== 'no-category' && option.value !== 'all'"
          @click="onSelectOption(option)" :style="'background: '+option.color">
          <span v-if="option.icon" slot="start" class="icon-container" :class="selected && selected.value == option.value ? 'selected' : ''">
            <span :class="'icon icon-'+option.icon"></span>
          </span>
          <span class="label">{{ option.display_name }}</span>
        </div>
      </div>
    </ion-content>

  </reco-modal>
</template>

<script>
import RecoModal from '@/components/complex/RecoModal.vue';

export default {
  name: 'ModalWithPadding',
  components: {
    RecoModal
  },
  props: {
  	title: {
  		type: String,
  		default: "Select an Option"
  	},
    options: {
      type: Array,
    },
    selected: {
      type: Object,
    },
    backButtonClicked: {
      type: Function,
      default: () => { return }
    },
    doneButtonClicked: {
      type: Function,
      default: () => { return }
    },
    withBackButton: {
      type: Boolean,
      default: true,
    },
    withDoneButton: {
      type: Boolean,
      default: false,
    },
    doneButtonText: {
      type: String,
      default: "Done",
    },
    isNextButton: {
      type: Boolean,
      default: false,
    },
    isFilterSelect: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    skipOption() {
      return this.options.find(o => o.value === 'no-category') || this.options.find(o => o.value === 'all');
    }
  }
}
</script>

<style scoped lang="css">
  .content {
    position: relative;
  }
  .wrapper {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 4vw;
  }
  .item {
    position: relative;
    box-sizing: border-box;
    padding: 10px;
    float: left;
    margin: 4vw 0 0 4vw;
    width: 44vw;
    height: 44vw;
    border-radius: 8px;
    color: #fff;
  }
  .item.selected {
    box-shadow: 0 0 10px rgba(0,0,0, .8);
  }
  .item:active {
    top: 2px;
  }
  .icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60%;
    text-align: center;
  }
  .icon {
    font-size: 15vw;
  }
  .label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40%;
    text-align: center;
    font-size: 4.5vw;
    font-weight: bold;
    line-height: 130%;
    text-transform: uppercase;
  }
  .skip-button {
    width: calc(100% - 8vw);
    line-height: 40px;
    text-align: center;
    margin: 4vw 0 0 4vw;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    background: var(--actiways-primary-color);
    border-radius: 8px;
  }
  .skip-button:active {
    position: relative;
    top: 2px;
  }
  .skip-or-text {
    margin: 20px 0 0 4vw;
    font-size: 16px;
    font-weight: bold;
    color: #303030 ;
  }
</style>