<template>
  <h2 class="tool-title">humans.txt generator</h2>
  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label>Team
      <button @click="addTeamGroup">＋</button>
    </label>
    <div class="humans-group" v-for="(group, groupIndex) in toolData.team" :key="groupIndex">
      <div v-for="(field, fieldIndex) in group" :key="fieldIndex">
        <input class="input" v-model="field.key" v-on:keyup="result" placeholder="Key" type="text">
        <input class="input" v-model="field.value" v-on:keyup="result" placeholder="Value" type="text">
        <button @click="removeTeamField(groupIndex, fieldIndex)">🞩</button>
        <button @click="moveTeamFieldUp(groupIndex, fieldIndex)" v-show="fieldIndex !== 0">↑</button>
        <button @click="moveTeamFieldDown(groupIndex, fieldIndex)" v-show="fieldIndex !== group.length - 1">↓</button>
      </div>

      <button @click="addTeamField(groupIndex)">＋</button>
      <button @click="removeTeamGroup(groupIndex)">🞩</button>
      <button @click="moveTeamGroupUp(groupIndex)" v-show="groupIndex !== 0">↑</button>
      <button @click="moveTeamGroupDown(groupIndex)" v-show="groupIndex !== toolData.team.length - 1">↓</button>
    </div>
  </div>

  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label>Thanks
      <button @click="addThanksGroup">＋</button>
    </label>
    <div class="humans-group" v-for="(group, groupIndex) in toolData.thanks" :key="groupIndex">
      <div v-for="(field, fieldIndex) in group" :key="fieldIndex">
        <input class="input" v-model="field.key" v-on:keyup="result" placeholder="Key" type="text">
        <input class="input" v-model="field.value" v-on:keyup="result" placeholder="Value" type="text">
        <button @click="removeThanksField(groupIndex, fieldIndex)">🞩</button>
        <button @click="moveThanksFieldUp(groupIndex, fieldIndex)" v-show="fieldIndex !== 0">↑</button>
        <button @click="moveThanksFieldDown(groupIndex, fieldIndex)" v-show="fieldIndex !== group.length - 1">↓</button>
      </div>

      <button @click="addThanksField(groupIndex)">＋</button>
      <button @click="removeThanksGroup(groupIndex)">🞩</button>
      <button @click="moveThanksGroupUp(groupIndex)" v-show="groupIndex !== 0">↑</button>
      <button @click="moveThanksGroupDown(groupIndex)" v-show="groupIndex !== toolData.thanks.length - 1">↓</button>
    </div>
  </div>

  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label>Site info
      <button @click="addSite">＋</button>
    </label>
    <div v-for="(info, fieldIndex) in toolData.site" :key="fieldIndex">
      <input class="input" v-model="info.key" v-on:keyup="result" placeholder="Key" type="text">
      <input class="input" v-model="info.value" v-on:keyup="result" placeholder="Value" type="text">
      <button @click="removeSiteField(fieldIndex)">🞩</button>
      <button @click="moveSiteUp(fieldIndex)" v-show="fieldIndex !== 0">↑</button>
      <button @click="moveSiteDown(fieldIndex)" v-show="fieldIndex !== toolData.site.length - 1">↓</button>
    </div>
  </div>

  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label>Import humans.txt
      <button @click="importHumans">Import</button>
    </label>
    <textarea v-model="toolData.importedHumansTxt" style="height: 250px"></textarea>
  </div>

  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label for="result">Result</label>
    <MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
  </div>
</template>

<script>
import MonacoEditor from "@/components/MonacoEditor.vue";

export default {
  components: {
    MonacoEditor
  },
  data() {
    return {
      toolData: {
        team: [
          [
            { key: "", value: "" }
          ]
        ],
        thanks: [
          [
            { key: "", value: "" }
          ]
        ],
        site: [
          { key: "", value: "" }
        ],
        importedHumansTxt: ""
      },
      toolResult: ""
    };
  },
  mounted() {
    this.importHumans();
    this.result();
  },
  methods: {
    /**
     * Team
     */
    addTeamGroup() {
      this.toolData.team.push([{ key: "", value: "" }]);
    },
    addTeamField(groupIndex) {
      this.toolData.team[groupIndex].push({ key: "", value: "" });
    },
    removeTeamField(groupIndex, fieldIndex) {
      this.toolData.team[groupIndex].splice(fieldIndex, 1);

      if (this.toolData.team[groupIndex].length == 0) {
        this.removeTeamGroup(groupIndex);
      }

      this.result();
    },
    removeTeamGroup(groupIndex) {
      this.toolData.team.splice(groupIndex, 1);
      this.result();
    },
    moveTeamGroupUp(groupIndex) {
      if (groupIndex > 0) {
        const temp = this.toolData.team[groupIndex];
        this.toolData.team[groupIndex] = this.toolData.team[groupIndex - 1];
        this.toolData.team[groupIndex - 1] = temp;
      }

      this.result();
    },
    moveTeamGroupDown(groupIndex) {
      if (groupIndex < this.toolData.team.length - 1) {
        const temp = this.toolData.team[groupIndex];
        this.toolData.team[groupIndex] = this.toolData.team[groupIndex + 1];
        this.toolData.team[groupIndex + 1] = temp;
      }

      this.result();
    },
    moveTeamFieldUp(groupIndex, fieldIndex) {
      if (fieldIndex > 0) {
        const temp = this.toolData.team[groupIndex][fieldIndex];
        this.toolData.team[groupIndex][fieldIndex] = this.toolData.team[groupIndex][fieldIndex - 1];
        this.toolData.team[groupIndex][fieldIndex - 1] = temp;
      }

      this.result();
    },
    moveTeamFieldDown(groupIndex, fieldIndex) {
      if (fieldIndex < this.toolData.team[groupIndex].length - 1) {
        const temp = this.toolData.team[groupIndex][fieldIndex];
        this.toolData.team[groupIndex][fieldIndex] = this.toolData.team[groupIndex][fieldIndex + 1];
        this.toolData.team[groupIndex][fieldIndex + 1] = temp;
      }

      this.result();
    },

    /**
     * Thank
     */
    addThanksGroup() {
      this.toolData.thanks.push([{ key: "", value: "" }]);
    },
    addThanksField(groupIndex) {
      this.toolData.thanks[groupIndex].push({ key: "", value: "" });
    },
    removeThanksField(groupIndex, fieldIndex) {
      this.toolData.thanks[groupIndex].splice(fieldIndex, 1);

      if (this.toolData.thanks[groupIndex].length == 0) {
        this.removeThanksGroup(groupIndex);
      }

      this.result();
    },
    removeThanksGroup(groupIndex) {
      this.toolData.thanks.splice(groupIndex, 1);
      this.result();
    },
    moveThanksGroupUp(groupIndex) {
      if (groupIndex > 0) {
        const temp = this.toolData.thanks[groupIndex];
        this.toolData.thanks[groupIndex] = this.toolData.thanks[groupIndex - 1];
        this.toolData.thanks[groupIndex - 1] = temp;
      }

      this.result();
    },
    moveThanksGroupDown(groupIndex) {
      if (groupIndex < this.toolData.thanks.length - 1) {
        const temp = this.toolData.thanks[groupIndex];
        this.toolData.thanks[groupIndex] = this.toolData.thanks[groupIndex + 1];
        this.toolData.thanks[groupIndex + 1] = temp;
      }

      this.result();
    },
    moveThanksFieldUp(groupIndex, fieldIndex) {
      if (fieldIndex > 0) {
        const temp = this.toolData.thanks[groupIndex][fieldIndex];
        this.toolData.thanks[groupIndex][fieldIndex] = this.toolData.thanks[groupIndex][fieldIndex - 1];
        this.toolData.thanks[groupIndex][fieldIndex - 1] = temp;
      }

      this.result();
    },
    moveThanksFieldDown(groupIndex, fieldIndex) {
      if (fieldIndex < this.toolData.thanks[groupIndex].length - 1) {
        const temp = this.toolData.thanks[groupIndex][fieldIndex];
        this.toolData.thanks[groupIndex][fieldIndex] = this.toolData.thanks[groupIndex][fieldIndex + 1];
        this.toolData.thanks[groupIndex][fieldIndex + 1] = temp;
      }

      this.result();
    },
    /**
     * Site
     */
    addSite() {
      this.toolData.site.push({ label: "", value: "" });
    },
    removeSiteField(fieldIndex) {
      this.toolData.site.splice(fieldIndex, 1);

      this.result();
    },
    moveSiteUp(index) {
      if (index > 0) {
        const temp = this.toolData.site[index];
        this.toolData.site[index] = this.toolData.site[index - 1];
        this.toolData.site[index - 1] = temp;
      }

      this.result();
    },
    moveSiteDown(index) {
      if (index < this.toolData.site.length - 1) {
        const temp = this.toolData.site[index];
        this.toolData.site[index] = this.toolData.site[index + 1];
        this.toolData.site[index + 1] = temp;
      }

      this.result();
    },

    /**
     * Import
     */
    importHumans() {
      const lines = this.toolData.importedHumansTxt.split("\n");
      let currentSection = null;

      this.toolData.team = [];
      this.toolData.thanks = [];
      this.toolData.site = [];

      let currentGroup = [];

      for (const line of lines) {
        if (line.toLowerCase().startsWith("/* TEAM */".toLowerCase())) {
          currentSection = "team";
        } else if (line.toLowerCase().startsWith("/* THANKS */".toLowerCase())) {
          currentSection = "thanks";
        } else if (line.toLowerCase().startsWith("/* SITE */".toLowerCase())) {
          currentSection = "site";
        } else if (line.trim() !== "") {
          if (currentSection === "team") {
            const [key, value] = line.split(":");
            currentGroup.push({ key: key.trim(), value: value.trim() });
          } else if (currentSection === "thanks") {
            const [key, value] = line.split(":");
            currentGroup.push({ key: key.trim(), value: value.trim() });
          } else if (currentSection === "site") {
            const [key, value] = line.split(":");
            this.toolData.site.push({ key: key.trim(), value: value.trim() });
          }
        } else if (line.trim() === "" && currentSection === "team") {
          if (currentGroup.length > 0) {
            this.toolData.team.push(currentGroup);
            currentGroup = [];
          }
        } else if (line.trim() === "" && currentSection === "thanks") {
          if (currentGroup.length > 0) {
            this.toolData.thanks.push(currentGroup);
            currentGroup = [];
          }
        }
      }

      if (currentGroup.length > 0) {
        this.toolData.team.push(currentGroup);
      }
    },

    /**
     * Generate
     */
    result() {
      let output = "";

      if (this.toolData.team.length) {
        output += "/* TEAM */\n";

        for (const group of this.toolData.team) {
          let groupOutput = "";
          for (const field of group) {
            if (field.key.trim() !== "" && field.value.trim() !== "") {
              groupOutput += `\t${field.key.trim()}: ${field.value.trim()}\n`;
            }
          }
          if (groupOutput !== "") {
            output += groupOutput + "\n";
          }
        }
      }

      if (this.toolData.thanks.length) {
        output += "/* THANKS */\n";

        for (const group of this.toolData.thanks) {
          let groupOutput = "";
          for (const field of group) {
            if (field.key.trim() !== "" && field.value.trim() !== "") {
              groupOutput += `\t${field.key.trim()}: ${field.value.trim()}\n`;
            }
          }
          if (groupOutput !== "") {
            output += groupOutput + "\n";
          }
        }
      }

      if (this.toolData.site.length) {
        output += "/* SITE */\n";
        for (const info of this.toolData.site) {
          if (info.key.trim() !== "" && info.value.trim() !== "") {
            output += `\t${info.key.trim()}: ${info.value.trim()}\n`;
          }
        }
      }

      this.toolResult = output;
    }
  }
};
</script>

<style lang="scss">
.humans-group {
  padding: 10px 0;
}

.humans-group:nth-child(odd) {
  background-color: #f7f7f7;
}


</style>