<i18n>
{
  "en": {
    "SolutionsSearchForm": {
      "searchBy": "Search by",
      "searchNotUsed": "Search not used",
      "searchApplication": "Search application",
      "search": "Search",
      "applications": "Applications",
      "other": "Other",
      "choose": "Choose",
      "create": "Create",
      "title": "Title",
      "description": "Description",
      "roles": "Roles"
    }
  },
  "ru": {
    "SolutionsSearchForm": {
      "searchBy": "Поиск по",
      "searchNotUsed": "Поиск не использовался",
      "searchApplication": "Поиск приложения",
      "search": "Поиск",
      "applications": "Приложения",
      "other": "ещё",
      "choose": "Выбрать",
      "create": "Создать",
      "title": "Название",
      "description": "Описание",
      "roles": "Роли"
    }
  }
}
</i18n>

<template>
  <q-form class="q-gutter-y-md" @submit="submit">
    <div v-if="readonly">
      <div v-if="name" class="row">
        <div class="col text-grey-5">
          {{ $t('SolutionsSearchForm.searchBy') }}*
        </div>
        <div class="col text-grey-7">{{ name }}</div>
      </div>
      <p v-else>
        {{ $t('SolutionsSearchForm.searchNotUsed') }}
      </p>
    </div>
    <div v-else>
      <div class="row q-gutter-y-md">
        <div class="col-12">
          <q-input
            v-model="name"
            filled
            :label="$t('SolutionsSearchForm.searchApplication')"
          >
            <template #append>
              <q-icon name="settings" />
            </template>
          </q-input>
        </div>
      </div>
      <div class="q-mt-lg">
        <q-btn
          color="primary"
          :label="$t('SolutionsSearchForm.search')"
          type="button"
          @click="searchSolution"
        />
      </div>
      <q-table
        v-if="this.inputData && this.inputData.searchResult"
        :title="$t('SolutionsSearchForm.applications')"
        :data="data"
        :columns="columns"
        row-key="id"
        selection="single"
        :selected.sync="selected"
      >
        <template #body-cell="props">
          <q-td :props="props">
            <div v-if="isArray(props.value)">
              <q-chip v-for="item in visibleField(props.value)" :key="item.id">
                {{ item.name }}
              </q-chip>
              <q-chip
                v-if="props.value.length > visibleCellCount"
                clickable
                outline
              >
                ... {{ $t('SolutionsSearchForm.other') }}
                {{ props.value.length - visibleCellCount }}
                <q-popup-proxy>
                  <q-card>
                    <q-card-section>
                      <q-chip
                        v-for="(item, i) in invisibleField(props.value)"
                        :key="i"
                      >
                        {{ item.name }}
                      </q-chip>
                    </q-card-section>
                  </q-card>
                </q-popup-proxy>
              </q-chip>
            </div>
            <div v-else>
              {{ props.value }}
            </div>
          </q-td>
        </template>
      </q-table>
      <q-btn
        v-if="selected.length"
        class="q-mr-md"
        color="primary"
        :label="$t('SolutionsSearchForm.choose')"
        type="button"
        @click="chooseSolution"
      />
      <q-btn
        color="grey-5"
        :label="$t('SolutionsSearchForm.create')"
        type="button"
        @click="createSolution"
      />
    </div>
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
import { v4 } from 'uuid';

export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      visibleCellCount: 3,
      name: '',
      selected: [],
      data: [],
    };
  },
  computed: {
    columns() {
      return [
        {
          name: 'name',
          required: true,
          label: this.$t('SolutionsSearchForm.title'),
          align: 'left',
          field: 'name',
          format: (val) => `${val}`,
          sortable: true,
        },
        {
          name: 'description',
          align: 'left',
          label: this.$t('SolutionsSearchForm.description'),
          field: 'description',
        },
        {
          name: 'roles',
          align: 'left',
          label: this.$t('SolutionsSearchForm.roles'),
          field: 'roles',
        },
      ];
    },
    outputData() {
      return {
        id: v4(),
        name: this.name,
        lowerCaseName: this.name.toLowerCase(),
        formData: {
          name: this.name,
        },
        searchResult: {
          records: this.data,
        },
      };
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (val) {
          const currentData = val.formData;
          this.data = val.searchResult.records || [];

          if (currentData) {
            this.name = currentData.name || '';
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
    createSolution(e) {
      this.$emit('submit', e, {
        transCreate: true,
        transSearch: false,
        transSelect: false,
        solution: this.outputData,
      });
    },
    chooseSolution(e) {
      const solution = this.selected[0] || null;

      this.$emit('submit', e, {
        transCreate: false,
        transSearch: false,
        transSelect: true,
        ...this.outputData,
        solution,
      });
    },
    searchSolution(e) {
      this.$emit('submit', e, {
        transCreate: false,
        transSearch: true,
        transSelect: false,
        ...this.outputData,
      });
    },
    isArray(val) {
      return val instanceof Array;
    },
    visibleField(items) {
      return items.slice(0, this.visibleCellCount);
    },
    invisibleField(items) {
      return items.slice(this.visibleCellCount);
    },
  },
};
</script>
