<template>
  <div class="container">
    <div class="row">
      <div class="col-12 d-flex justify-content-between align-items-center">
        <div class="text-content">Font Sixe(PX)</div>
        <div class="icon-wrapper">
          <b-form-select
            style="display: inline-block"
            v-model="text_settings.fontSize"
            :options="options"
            size="sm"
            class="mt-3"
          ></b-form-select>
        </div>
      </div>
      <div class="col-12 d-flex justify-content-between align-items-center">
        <div class="text-content">Text Color</div>
        <div class="icon-wrapper">
          <input
            type="color"
            v-model="text_settings.fontColor"
            class="color-picker"
            value="#ff0000"
          />
        </div>
      </div>
      <div class="col-12 d-flex justify-content-between align-items-center">
        <div class="text-content">Text Alignment</div>
        <div class="icon-wrapper">
          <div
            class="icon mr-1"
            :class="{ active: textAlign.left }"
            @click="onSetAlign('left')"
            v-tooltip="'Left Align'"
          >
            <b-icon icon="text-left" aria-hidden="true"></b-icon>
          </div>
          <div
            class="icon mr-1"
            :class="{ active: textAlign.center }"
            @click="onSetAlign('center')"
            v-tooltip="'Center Align'"
          >
            <b-icon icon="text-center" aria-hidden="true"></b-icon>
          </div>
          <div
            class="icon mr-1"
            :class="{ active: textAlign.right }"
            @click="onSetAlign('right')"
            v-tooltip="'Right Align'"
          >
            <b-icon icon="text-right" aria-hidden="true"></b-icon>
          </div>
          <div
            class="icon mr-1"
            :class="{ active: textAlign.top }"
            @click="onSetAlign('top')"
            v-tooltip="'Top Align'"
          >
            <b-icon icon="align-top" aria-hidden="true"></b-icon>
          </div>
        </div>
      </div>
      <div class="col-12 d-flex justify-content-between align-items-center">
        <div class="text-content">Decoration</div>
        <div class="icon-wrapper">
          <div
            class="icon d-flex justify-content-center"
            :class="{ active: text_settings.decorations.isBold }"
            @click="onBold()"
          >
            <strong>B</strong>
          </div>
          <div
            class="icon d-flex justify-content-center ml-2"
            :class="{ active: text_settings.decorations.isItalic }"
            @click="onItalic()"
            style="font-style: italic"
          >
            <strong>I</strong>
          </div>
          <div
            class="icon d-flex justify-content-center ml-2"
            :class="{ active: text_settings.decorations.isUnderline }"
            @click="onUnderline()"
            style="text-decoration: underline"
          >
            <strong>U</strong>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { BIcon } from 'bootstrap-vue'

export default {
  props: ['index', 'defaultSettings'],
  components: { BIcon },
  watch: {
    text_settings: {
      handler () {
        this.$emit('formatter-updated', this.text_settings, this.index)
      },
      deep: true
    }
  },
  data () {
    return {
      options: [
        { value: '10px', text: '10' },
        { value: '12px', text: '12' },
        { value: '14px', text: '14' },
        { value: '16px', text: '16' },
        { value: '18px', text: '18' }
      ],
      text_settings: {
        align: 'left',
        decorations: {
          isBold: false,
          isItalic: false,
          isUnderline: false
        },
        fontColor: '#495057',
        fontSize: '14px'
      },
      textAlign: {
        left: true,
        right: false,
        center: false,
        top: false
      }
    }
  },
  methods: {
    onSetAlign (align) {
      Object.keys(this.textAlign).forEach(key => {
        if (key !== align) {
          this.textAlign[key] = false
        } else {
          this.textAlign[key] = true
        }
      })
      this.text_settings.align = Object.keys(this.textAlign).find(key => this.textAlign[key] === true)
    },
    onBold () {
      this.text_settings.decorations.isBold = !this.text_settings.decorations.isBold
    },
    onItalic () {
      this.text_settings.decorations.isItalic = !this.text_settings.decorations.isItalic
    },
    onUnderline () {
      this.text_settings.decorations.isUnderline = !this.text_settings.decorations.isUnderline
    }
  },
  mounted () {
    if (!this.$_.isEmpty(this.defaultSettings)) {
      this.text_settings = this.$_.merge({}, this.defaultSettings)
      this.onSetAlign(this.text_settings.align)
    }
  }
}
</script>

<style lang="scss" scoped>
.text-content {
  font-size: 12px;
  font-weight: 400;
}
.icon-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;

  .icon {
    height: 20px;
    width: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.active {
  background-color: #d4d9db80;
}
</style>
