<template>
  <page-section class="bootstrap-table__section">
    <b-table
      responsive="md"
      show-empty
      class="bootstrap-rounded-table"
      :items="systems"
      :fields="fields"
      :empty-text="$t('global.table.emptyMessage')"
    >
      <template #cell(value)="data">
        <b-row v-if="data.index === 0">
          <b-col>
            <span>
              {{ data.value ? 'Включен' : 'Выключен' }}
            </span>
          </b-col>
          <b-col>
            <b-button
              :id="`popover-choice-${data.index}`"
              class="popover-option-ractive"
              variant="toogle-popover"
            >
              <img :is="iconChevron" class="icon-chevron" />
            </b-button>
            <two-chioce-popover
              :id="data.index"
              fitst-option="Включен"
              second-option="Выключен"
              :chosen-option="chosenOption"
              :first-action="setOn"
              :second-action="setOff"
              placement="leftbottom"
            />
          </b-col>
        </b-row>
        <b-row v-else>
          <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="system-network-table__icon-col">
            <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 icon-edit pointer"
              @click="editCellHandler(data)"
            />
          </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 TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover';
import TableRowExpandMixin, {
  expandRowLabel,
} from '@/components/Mixins/TableRowExpandMixin';

export default {
  components: { PageSection, TwoChiocePopover },
  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
  data() {
    return {
      selectedCell: null,
      isActive: false,
      isIpInvalid: false,
      chosenOption: 'Выключен',
      fields: [
        {
          key: 'param',
          label: 'Параметр',
          formatter: this.dataFormatter,
          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
          class: `bootstrap-rounded-table__column-first
            bootstrap-rounded-table__column-first___ipv-table`,
          tdClass: 'regular-12px bootstrap-rounded-table__td',
        },
        {
          key: 'value',
          label: 'Значение',
          formatter: this.dataFormatter,
          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
          class: `bootstrap-rounded-table__column-center
            bootstrap-rounded-table__ipv-table___center`,
          tdClass: 'regular-12px bootstrap-rounded-table__td',
        },
        {
          key: 'comment',
          label: 'Комментарий',
          formatter: this.dataFormatter,
          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
          class: 'bootstrap-rounded-table__column-last',
          tdClass: 'regular-12px bootstrap-rounded-table__td',
        },
      ],
      expandRowLabel: expandRowLabel,
      iconChevron,
      systems: [
        {
          param: 'DHCP Server (откуда получен IP)',
          value: false,
          comment: 'Когда DHPC Server включен параметры вводятся автоматически',
        },
        {
          param: 'IP-адрес',
          value: '192.168.1.1',
          comment: 'Введите IP адрес',
        },
        {
          param: 'Маска',
          value: '192.168.0.1',
          comment: 'Введите маску сети',
        },
        {
          param: 'Сетевой шлюз',
          value: '192.168.0.1',
          comment: 'Введите сетевой шлюз',
        },
        {
          param: 'DNS',
          value: '8.8.8.8',
          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 /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
        ipCheck
      );
    },
    setOn() {
      this.chosenOption = 'Включен';
      this.systems[0].value = true;
    },
    setOff() {
      this.chosenOption = 'Выключен';
      this.systems[0].value = false;
    },
    DHCPoff() {
      this.systems[0].value = false;
      this.isActive = false;
    },
    DHCPon() {
      this.systems[0].value = true;
      this.isActive = false;
    },
  },
};
</script>
<style lang="scss">
.bootstrap-rounded-table__column-first___ipv-table {
  width: 30%;
}

.bootstrap-rounded-table__ipv-table___center {
  width: 20%;
}

.system-network-table__icon-col {
  max-width: 20%;
}
</style>
<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;

  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;
}

.popover-option-ractive {
  display: block;
  margin: -6px 9px 0 auto;
}
</style>
