<template>
  <page-section class="bootstrap-table__section">
    <b-table
      responsive="md"
      show-empty
      no-border-collapse
      :items="systems"
      :fields="fields"
      :empty-text="$t('global.table.emptyMessage')"
    >
      <template #cell(value)="data">
        <b-row v-if="!(typeof data.value === 'boolean')">
          <b-form-input
            v-if="systems[data.index].isEdit"
            ref="input"
            v-model="selectedCell"
            class="regular-12px"
            :class="{ validateIP: isIpInvalid }"
            type="text"
            @keydown.enter="clickOk(data)"
            @keydown.escape="clickCancel(data)"
          ></b-form-input>
          <b-col v-else>{{ data.value }}</b-col>
          <b-col class="table-network__icon">
            <b-row v-if="systems[data.index].isEdit">
              <img
                src="@/assets/images/edit-ok.svg"
                class="system-network-table__icon pointer"
                @click="clickOk(data)"
              />
              <img
                src="@/assets/images/edit-no.svg"
                class="system-network-table__icon close_icon pointer"
                @click="clickCancel(data)"
              />
            </b-row>
            <img
              v-else
              src="@/assets/images/icon-edit.svg"
              class="system-network-table__icon pointer"
              @click="editCellHandler(data)"
            />
          </b-col>
        </b-row>
        <b-row v-else class="popup-container">
          <b-col v-if="data.value">{{ 'Включен' }}</b-col>
          <b-col v-else>{{ 'Выключен' }}</b-col>
          <div
            v-if="isActive"
            class="popup"
            :class="{ popup_active: isActive }"
          >
            <button class="popup-button popup-on medium-12px" @click="DHCPon">
              <span class="popup-text">Включен</span>
            </button>
            <button class="popup-button popup-off medium-12px" @click="DHCPoff">
              <span class="popup-text">Выключен</span>
            </button>
          </div>
          <b-col class="table-network__icon">
            <img
              :is="iconChevron"
              class="pointer"
              @click="isActive = !isActive"
            />
          </b-col>
        </b-row>
      </template>
    </b-table>
  </page-section>
</template>

<script>
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import PageSection from '@/components/Global/PageSection';
import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
import TableRowExpandMixin, {
  expandRowLabel,
} from '@/components/Mixins/TableRowExpandMixin';

export default {
  components: { PageSection },
  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
  data() {
    return {
      isBusy: true,
      selectedCell: null,
      isIpInvalid: false,
      isActive: false,
      fields: [
        {
          key: 'param',
          label: 'Параметр',
          formatter: this.dataFormatter,
          thStyle: { width: '30%' },
        },
        {
          key: 'value',
          label: 'Значение',
          formatter: this.dataFormatter,
          thStyle: { width: '20%' },
        },
        {
          key: 'comment',
          label: 'Комментарий',
          formatter: this.dataFormatter,
        },
      ],
      expandRowLabel: expandRowLabel,
      iconChevron,
      systems: [
        {
          param: 'DHCP Server (откуда получен IP)',
          value: false,
          comment: 'Когда DHPC Server включен параметры вводятся автоматически',
        },
        {
          param: 'IP-адрес',
          value: 'fe80::1ff:fe23:4567:890a',
          comment: 'Введите IP адрес',
        },
        {
          param: 'Маска',
          value: 'fe80::1ff:fe23:4567:890a',
          comment: 'Введите маску сети',
        },
        {
          param: 'Сетевой шлюз',
          value: 'fe80::1ff:fe23:4567:890a',
          comment: 'Введите сетевой шлюз',
        },
        {
          param: 'DNS',
          value: 'fe80::1ff:fe23:4567:890a',
          comment: 'Введите DNS',
        },
      ],
    };
  },
  methods: {
    editCellHandler(data) {
      this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
      this.systems[data.index].isEdit = true;
      this.selectedCell = this.systems[data.index].value;
      this.$nextTick(() => this.$refs.input.focus());
    },
    clickOk(data) {
      const EDIT_VALUE = this.selectedCell.trim();
      if (this.validateIP(EDIT_VALUE)) {
        this.systems[data.index].value = EDIT_VALUE;
        this.isIpInvalid = false;
        this.selectedCell = null;
        this.systems[data.index].isEdit = false;
      } else {
        this.isIpInvalid = true;
      }
    },
    clickCancel(data) {
      this.isIpInvalid = false;
      this.selectedCell = null;
      this.systems[data.index].isEdit = false;
    },
    validateIP(ipCheck) {
      return /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/gi.test(
        ipCheck
      );
    },
    DHCPoff() {
      this.systems[0].value = false;
      this.isActive = false;
    },
    DHCPon() {
      this.systems[0].value = true;
      this.isActive = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.row {
  align-items: baseline;
  flex-wrap: nowrap;
}
.icon-expand {
  margin: 0 !important;
}

.close_icon {
  margin-left: 5px;
}

.form-control {
  max-height: 16px;
  width: 60%;
  background-color: transparent;
  &:focus {
    box-shadow: none;
  }
  &.validateIP {
    color: $red-brand-primary;
  }
}

.popup-container {
  position: relative;
}

.popup {
  position: absolute;
  top: -12px;
  left: 3px;
  width: 97%;
  background: $white;
  z-index: 1000;
  border: 1px solid rgba(26, 62, 91, 0.1);
  box-sizing: border-box;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  visibility: hidden;
}

.popup-button {
  width: 96%;
  height: 50px;
  margin: 4px;
  border-radius: 8px;
  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  &.popup-on {
    color: $red-brand-primary;
    border-radius: 8px;
    &:hover {
      background-color: $faint-secondary-primary-5-hover;
    }
    &:active {
      background-color: $faint-secondary-primary-20;
    }
  }

  &.popup-off {
    background-color: $red-brand-primary;
    color: $white;
    &:hover {
      background-color: $red-brand-primary-hover;
    }
    &:active {
      background-color: $red-brand-primary-active;
    }
  }
}

.popup-text {
  margin-left: 20px;
}

.popup_active {
  visibility: visible;
}
</style>
