<template>
  <v-card flat class="adapters">
    <v-row class="justify-center">
      <v-col cols="12" sm="6">
        <v-text-field
          v-model="filterText"
          dense
          rounded
          outlined
          clearable
          hide-details
          label="搜索适配器"
        >
          <template v-slot:prepend-inner>
            <div class="v-input__icon v-input__icon--prepend-inner">
              <v-icon small>fa-filter</v-icon>
            </div>
          </template>
        </v-text-field>
      </v-col>
      <v-col cols="12" sm="6">
        <v-dialog v-model="dialog" max-width="600px">
          <template v-slot:activator="{ on, attrs }">
            <v-btn dark block color="primary" v-bind="attrs" v-on="on"
              >发布适配器
            </v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="headline">适配器信息</span>
            </v-card-title>
            <v-card-text>
              <v-form ref="newAdapterForm" v-model="valid" lazy-validation>
                <v-container>
                  <v-row>
                    <v-col cols="12">
                      <v-text-field
                        v-model="newAdapter.name"
                        label="协议名称"
                        required
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12">
                      <v-text-field
                        v-model="newAdapter.desc"
                        label="协议介绍"
                        required
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12">
                      <v-text-field
                        v-model="newAdapter.link"
                        label="PyPI 项目名"
                        required
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12">
                      <v-text-field
                        v-model="newAdapter.id"
                        label="协议 import 包名"
                        required
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12">
                      <v-text-field
                        v-model="newAdapter.repo"
                        label="仓库/主页链接"
                        required
                      ></v-text-field>
                    </v-col>
                  </v-row>
                </v-container>
              </v-form>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="dialog = false">
                关闭
              </v-btn>
              <v-btn
                :disabled="!valid"
                color="blue darken-1"
                text
                @click="
                  dialog = false;
                  publishAdapter();
                "
              >
                发布
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <v-pagination
          v-model="page"
          :length="pageNum"
          prev-icon="fa-caret-left"
          next-icon="fa-caret-right"
        ></v-pagination
      ></v-col>
    </v-row>
    <v-row>
      <v-col
        cols="12"
        sm="6"
        v-for="(adapter, index) in displayAdapters"
        :key="index"
      >
        <PublishCard
          :name="adapter.name"
          :desc="adapter.desc"
          :id="adapter.id"
          :author="adapter.author"
          :link="adapter.repo"
        ></PublishCard>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <v-pagination
          v-model="page"
          :length="pageNum"
          prev-icon="fa-caret-left"
          next-icon="fa-caret-right"
        ></v-pagination>
      </v-col>
    </v-row>
  </v-card>
</template>

<script>
import PublishCard from "./PublishCard.vue";
import adapters from "../public/adapters.json";

export default {
  name: "Adapters",
  components: {
    PublishCard,
  },
  data() {
    return {
      adapters: adapters,
      filterText: "",
      page: 1,
      dialog: false,
      valid: false,
      newAdapter: {
        name: null,
        desc: null,
        id: null,
        link: null,
        repo: null,
      },
    };
  },
  computed: {
    pageNum() {
      return Math.ceil(this.filteredAdapters.length / 10);
    },
    filteredAdapters() {
      return this.adapters.filter((adapter) => {
        return (
          adapter.id.indexOf(this.filterText || "") != -1 ||
          adapter.name.indexOf(this.filterText || "") != -1 ||
          adapter.desc.indexOf(this.filterText || "") != -1 ||
          adapter.author.indexOf(this.filterText || "") != -1
        );
      });
    },
    displayAdapters() {
      return this.filteredAdapters.slice((this.page - 1) * 10, this.page * 10);
    },
    publishAdapter() {
      if (!this.$refs.newAdapterForm.validate()) {
        return;
      }
      const title = encodeURIComponent(
        `Adapter: ${this.newAdapter.name}`
      ).replace(/%2B/gi, "+");
      const body = encodeURIComponent(
        `
**协议名称：**

${this.newAdapter.name}

**协议功能：**

${this.newAdapter.desc}

**PyPI 项目名：**

${this.newAdapter.link}

**协议 import 包名：**

${this.newAdapter.id}

**协议项目仓库/主页链接：**

${this.newAdapter.repo}

<!-- DO NOT EDIT ! -->
<!--
- id: ${this.newAdapter.id}
- link: ${this.newAdapter.link}
- name: ${this.newAdapter.name}
- desc: ${this.newAdapter.desc}
- repo: ${this.newAdapter.repo}
-->
`.trim()
      ).replace(/%2B/gi, "+");
      window.open(
        `https://github.com/nonebot/nonebot2/issues/new?title=${title}&body=${body}&labels=Adapter`
      );
    },
  },
};
</script>