<template>
  <div class="snt-confirm-dialog">
    <v-dialog
      v-model="dialog"
      width="480px"
      scrollable
      @input="changeDialog($event)">
      <template #activator="{ on }">
        <slot
          name="activator"
          :on="onListener(on)">
        </slot>
      </template>
      <v-card>
        <v-card-title>
          <v-spacer />
          <v-btn
            color="#A9A9A9"
            x-small
            icon
            @click="close()">
            <v-icon small>
              mdi-close
            </v-icon>
          </v-btn>
        </v-card-title>
        <v-card-text>
          <div class="text-center mb-4">
            <v-icon
              size="60"
              :color="iconColor">
              {{ icon }}
            </v-icon>
          </div>
          <div
            :style="{
              fontWeight: 500,
              width: contentWidth
            }"
            class="mx-auto text-body text-center mb-2">
            {{ title }}
          </div>
          <div
            :style="{ width: contentWidth }"
            class="text-description mx-auto field-grey--text text-center mb-7">
            {{ description }}
          </div>
          <v-divider />
        </v-card-text>
        <v-card-actions>
          <v-checkbox
            v-if="notShowAgain"
            v-model="checked"
            class="mt-0 checkbox-grey"
            color="primary"
            dense
            hide-details>
            <template #label>
              <span class="grey--text text-validation">
                ไม่แสดงข้อความอีกในวันนี้
              </span>
            </template>
          </v-checkbox>
          <v-spacer />
          <v-btn
            :color="closeColor"
            class="px-3"
            rounded
            text
            @click="close()">
            {{ closeText }}
          </v-btn>
          <v-btn
            class="px-3"
            :color="confirmColor"
            depressed
            rounded
            @click="submit()">
            {{ confirmText }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  props: {
    title: {
      type: String,
      default: 'Title'
    },
    description: {
      type: String,
      default: 'Description'
    },
    contentWidth: {
      type: String,
      default: '245px'
    },
    confirmText: {
      type: String,
      default: 'ยืนยัน'
    },
    confirmColor: {
      type: String,
      default: 'primary'
    },
    closeText: {
      type: String,
      default: 'ยกเลิก'
    },
    closeColor: {
      type: String,
      default: 'primary'
    },
    icon: {
      type: String,
      default: 'mdi-alert-circle-outline'
    },
    iconColor: {
      type: String,
      default: 'primary'
    },
    messageKey: {
      type: String,
      default: ''
    },
    notShowAgain: Boolean
  },
  data () {
    return {
      dialog: false,
      checked: false
    }
  },
  computed: {
    ...mapGetters({
      showMessageAgain: 'local/showMessageAgain'
    }),
    showMessage () {
      return !this.notShowAgain || this.showMessageAgain(this.messageKey)
    }
  },
  methods: {
    ...mapActions({
      addNotShowMessagesAgain: 'local/addNotShowMessagesAgain'
    }),
    onListener (listener) {
      if (!this.showMessage) {
        return {
          ...listener,
          click: this.submit
        }
      }
      return listener
    },
    submit () {
      if (this.checked) {
        this.addNotShowMessagesAgain(this.messageKey)
      }
      this.$emit('confirm')
      this.dialog = false
    },
    changeDialog (dialog) {
      if (dialog) {
        this.checked = false
      }
    },
    close () {
      this.$emit('close')
      this.dialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .checkbox-grey {
    ::v-deep
      .v-input--selection-controls__input
      .v-icon.mdi-checkbox-blank-outline {
      color: var(--v-field-grey-base) !important;
    }
  }
</style>
