<template>
  <div id="my-container">
    <span
      v-if="!microcode"
      :id="id"
      ref="button"
      class="regular-12px underline pointer"
      variant="primary"
    >
      {{ $t(description) }}
    </span>
    <div v-else :id="id" ref="button" variant="primary" class="pointer">
      <img src="@/assets/images/icon-reload-red.svg" />
      <span class="regular-12px microcode-reload-font">{{
        $t(description)
      }}</span>
    </div>

    <!-- Our popover title and content render container -->
    <b-popover
      ref="popover"
      :target="id"
      triggers="click"
      :show.sync="popoverShow"
      placement="auto"
      container="my-container"
      @show="onShow"
      @shown="onShown"
      @hidden="onHidden"
    >
      <template #title>
        <div class="popup-title">
          <span class="bold-16px__caps">{{ $t(popup) }}</span>
          <b-button class="popup-title__button_close" @click="onClose">
            <img src="@/assets/images/popups/x-icon.svg" />
          </b-button>
        </div>
      </template>

      <div class="popup-body">
        <div>
          <label class="light-12px" for="username">{{ 'HEX для ввода' }}</label>
          <img
            id="popover-target-1"
            src="@/assets/images/popups/red-sign.svg"
          />
          <popover-info
            id="popover-target-1"
            description="Введите HEX в поле для подтверждения действия"
          />
          <div class="hex-form">
            <span class="medium-12px"> 9c1735b3f819142393146a5d03314f0a </span>
          </div>
        </div>
        <div class="popup-body__input-container">
          <span class="regular-12px tretiatry">Поле для ввода</span>
          <b-form-input
            id="popover-input-1"
            v-model="input1"
            class="medium-12px"
          ></b-form-input>
        </div>
        <b-button class="popover-button" variant="primary" @click="onClose">
          {{ $t(button) }}
        </b-button>
      </div>
    </b-popover>
  </div>
</template>

<script>
import PopoverInfo from './PopoverInfo';

export default {
  components: {
    PopoverInfo,
  },
  props: {
    description: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      default: '',
    },
    button: {
      type: String,
      default: 'global.action.reload',
    },
    popup: {
      type: String,
      default: '',
    },
    microcode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      input1: '',
      input1state: null,
      input1Return: '',
      popoverShow: false,
    };
  },
  watch: {
    input1(val) {
      if (val) {
        this.input1state = true;
      }
    },
  },
  methods: {
    onClose() {
      this.popoverShow = false;
    },
    onOk() {
      if (!this.input1) {
        this.input1state = false;
      }
      if (this.input1) {
        this.onClose();
        // Return our popover form results
        this.input1Return = this.input1;
      }
    },
    onShow() {
      this.$root.$emit('bv::hide::popover');
      // This is called just before the popover is shown
      // Reset our popover form variables
      this.input1 = '';
      this.input1state = null;
      this.input1Return = '';
    },
    onShown() {
      // Called just after the popover has been shown
      // Transfer focus to the first input
      this.focusRef(this.$refs.input1);
    },
    onHidden() {
      // Called just after the popover has finished hiding
      // Bring focus back to the button
      this.focusRef(this.$refs.button);
    },
    focusRef(ref) {
      // Some references may be a component, functional component, or plain element
      // This handles that check before focusing, assuming a `focus()` method exists
      // We do this in a double `$nextTick()` to ensure components have
      // updated & popover positioned first
      this.$nextTick(() => {
        this.$nextTick(() => {
          (ref.$el || ref).focus();
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.form-group {
  margin: 0;
}

.popup-title {
  display: flex;
  flex-flow: row nowrap;
  align-items: baseline;
}

.popup-title__button_close {
  margin: 0 28px 0 auto;
  background: none;
  border: none;
  &:active {
    background-color: $faint-secondary-primary-5-hover !important;
    box-shadow: none !important;
    border-radius: 8px;
  }
  &:focus-visible {
    border: none !important;
    border-radius: 8px;
  }
  &:focus {
    box-shadow: none;
    border-radius: 8px;
  }
}

.popup-body {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

.form-control {
  width: 341px;
  height: 52px;
  background: rgba(26, 62, 91, 0.05);
  border-radius: 8px;
  border: none;
  margin: -25px auto;
  padding-top: 30px;
}

.hex-form {
  height: 32px;
  width: 341px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(26, 62, 91, 0.05);
  border-radius: 8px;
  border: none;
  margin: 0 auto;
}

.popover-button {
  width: 341px;
  height: 40px;
  margin: 0 auto 10px;
}

.popup-body__input-container {
  height: 52px;
  margin: 24px auto 16px auto;
}

.tretiatry {
  margin-left: 12px;
}

.light-12px {
  margin: 0px 5px 0px 15px;
}

.pointer {
  cursor: pointer;
}

.popover-info {
  background-color: #040a0f;
  width: 168px;
  height: 76px;
  &.arrow {
    display: block;
  }
}

.microcode-reload-font {
  padding-left: 5px;
  color: $red-brand-primary;
}
</style>
