<template lang="pug">
  .flex.box-border.px-4.items-center.w-full(:style="{ width: width + 'px'}")
    .flex.gap-x-1
      q-icon(
        v-for="network in getNetworks",
        :name="settings.find((el) => el.id === network.kind)?.icon || ''",
        size="20px", 
        class="icon",
        :id="`icon-${network.kind}`"
      )
        q-badge.delete(
          v-if="isOpenChange",
          floating,
          rounded
        )
          q-btn(
            icon="app:icon-cancel",
            size="5px"
            font-color="white",
            padding="5px 5px",
            :id="network.kind",
            @click.stop="(e) => deleteNetwork(e)"
          )
    .flex.relative
      q-btn(
        icon="add",
        size="14px",
        class="add-button"
        v-if="isOpenChange && settings.length !== getNetworks.length",
        @click.stop
        round,
        dense,
        no-caps,
        padding="1px"
      )
        q-menu(v-model="isOpenPopupAdding", anchor="bottom left", self="top right")
          .menu-wrapper.flex.flex-col.gap-y-3.p-4
            base-adding-network(
              :items="getAddingNetworks",
              :network="network",
            )
            .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: {},
      settings: column.find((el) => el.name === "networks")?.settings,
    };
  },
  computed: {
    getNetworks() {
      return this.networks.filter(
        (el) => el.kind !== "EMAIL" && el.kind !== "PHONE"
      );
    },
    getAddingNetworks() {
      let kinds = this.networks.map((el) => el.kind);
      return this.settings.filter((el) => !kinds.includes(el.id));
    },
  },
  methods: {
    closePopup() {
      this.isOpenPopupAdding = false;
    },
    saveNetwork() {
      this.addNetwork(this.network);
      this.isOpenPopupAdding = false;
    },
  },
  watch: {
    isOpenPopupAdding(newValue) {
      if (newValue === true && this.getAddingNetworks[0]) {
        this.network = {
          kind: {
            id: this.getAddingNetworks[0]?.id,
            icon: this.getAddingNetworks[0]?.icon,
          },
          username: "",
        };
      }
    },
  },
};
</script>

<style lang="sass" scoped>
.icon
  color: var(--btn-blue-color)
  &:last-child
    padding-right: 0
    margin-right: 46px
.delete
  background-color: var(--btn-red-color)
.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)
.menu-wrapper
  width: 484px
.q-badge
  padding: 0
.q-badge--floating
  top: -8px
  right: -6px
</style>
