<template lang="pug">
  .flex.box-border.px-4.items-center.w-full(:style="{ width: width + 'px'}")
    .flex.gap-x-1
      .text-xl.icon.relative(
        v-for="network in getNetworks",
        :class="settings.settings.find((el) => el.network === network.kind)?.icon || ''"
      )
        .absolute.icon-cancel-mini.delete.flex.w-4.h-4.justify-center.items-center.bottom-4.left-2(
          v-if="isOpenChange",
          :id="network.kind",
          @click.stop="(e) => deleteNetwork(e)"
        )
    .flex.relative
      q-btn(
        icon="add",
        size="14px",
        class="add-button"
        v-if="isOpenChange && settings.settings.length !== getNetworks.length",
        @click.stop="openPopupAdding",
        round,
        dense,
        no-caps,
        padding="1px"
      )
      base-popup.right-3.top-6.z-20(
        v-if="isOpenPopupAdding",
        @click.stop,
        v-click-outside="closePopup",
        :width="485"
      )
        base-adding-network(
          :value="network",
          :selected-option="getSelectedIcon",
          :list-adding-networks="getAddingNetworks",
          :choose-network="chooseNetwork"
        )
        .w-fit
          q-btn(
            color="primary",
            label="Добавить",
            no-caps,
            @click="saveNetwork",
            padding="8px 24px"
          )
</template>

<script>
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
import BasePopup from "@/components/base/BasePopup";
import { column } from "@/pages/clients/utils/tableConfig";
export default {
  name: "TableCellBodyNetworks",
  components: {
    BasePopup,
    BaseAddingNetwork,
  },
  props: {
    networks: {
      default: [
        {
          kind: "TELEGRAM",
          username: "",
        },
      ],
    },
    width: Number,
    isOpenChange: Boolean,
    deleteNetwork: Function,
    addNetwork: Function,
  },
  data() {
    return {
      isOpenPopupAdding: false,
      network: {
        kind: "TELEGRAM",
        username: "",
      },
      settings: column.find((el) => el.name === "networks"),
    };
  },
  computed: {
    getNetworks() {
      return this.networks.filter(
        (el) => el.kind !== "EMAIL" && el.kind !== "PHONE"
      );
    },
    getSelectedIcon() {
      return this.settings.settings.find(
        (el) => el.network === this.network.kind
      ).icon;
    },
    getAddingNetworks() {
      let kinds = this.networks.map((el) => el.kind);
      return this.settings.settings.filter((el) => !kinds.includes(el.network));
    },
  },
  methods: {
    chooseNetwork(e) {
      this.network.kind = e.target.id;
    },
    closePopup() {
      this.isOpenPopupAdding = false;
    },
    saveNetwork() {
      this.addNetwork(this.network);
      this.isOpenPopupAdding = false;
      this.network = {
        kind: "TELEGRAM",
        username: "",
      };
    },
    openPopupAdding() {
      this.isOpenPopupAdding = true;
    },
  },
};
</script>

<style lang="sass" scoped>
.icon
  color: var(--btn-blue-color)
  &:last-child
    padding-right: 46px
.delete
  border-radius: 50%
  background-color: var(--btn-red-color)
  color: var(--default-white)
  font-size: 8px
.add-button
  border: 2px solid var(--btn-blue-color)
  color: var(--btn-blue-color)
  &:hover
    background-color: var(--btn-blue-color)
    color: var(--default-white)
</style>
