<template>
  <ul>
    <div>
      Segmentation Editor:
      <Checkbox v-model="segmentation" />
    </div>
    <div  v-if="segmentation">
      <div class="container">
        <div>
          <li
            class="segment-row"
            v-for="(segment, index) in protein.segmentation.segments.slice(0, Math.ceil(protein.segmentation.segments.length/2))"
            :key="index"
          >
            <div class="name" :class="{custom: segment.customized}">
              <input class="segment-name" type="text" v-model="segment.name" />
            </div>
            <div
              class="segment"
              :class="{custom: segment.customized}"
            >{{segment.from}} - {{segment.to}}</div>
            <div>
              <input class="cancel" type="button" value="✕" @click="cancel(segment)" />
            </div>
          </li>
        </div>
        <div>
          <li
            class="segment-row"
            v-for="(segment, index) in protein.segmentation.segments.slice(Math.ceil(protein.segmentation.segments.length /2))"
            :key="index"
          >
            <div class="name" :class="{custom: segment.customized}">
              <input class="segment-name" type="text" v-model="segment.name" />
            </div>
            <div
              class="segment"
              :class="{custom: segment.customized}"
            >{{segment.from}} - {{segment.to}}</div>
            <div>
              <input class="cancel" type="button" value="✕" @click="cancel(segment)" />
            </div>
          </li>
        </div>
      </div>
      <div class="reset">
        <Button @click="empty" text="Empty" />
        <Button @click="loops" text="Loops" />
        <Button @click="reset" text="Secondary Structures" />

      </div>
    </div>
  </ul>
</template>

<script>
import Checkbox from "../Checkbox";
import Button from "../Button";
export default {
  props: ["protein"],
  components: {
    Checkbox,
    Button
  },

  data() {
    return {
      segmentation: false
    };
  },

  methods: {
    loops() {
      this.protein.segmentation.setLoopSegmentation();
    },
    empty() {
      this.protein.segmentation.empty();
    },
    reset() {
      this.protein.segmentation.setDefaultSegmentation();
    },
    cancel(segment) {
      this.protein.segmentation.removeSegment(segment);
    }
  },

  computed: {
    segmentCount() {
      return this.protein.segmentation.segments.length;
    }
  }
};
</script>

<style scoped>
ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.container {
  border: 1px var(--accent) solid;
  padding: 5px;
  display: flex;
}

li {
  display: flex;
  width: 295px;
}

.name,
.segment {
  padding: 0px 5px;
  background: var(--neutral);
}

.segment {
  font-weight: bold;
  text-align: center;
  flex-grow: 1;
}

.segment-name {
  border: none;
  background: var(--neutral);
  text-align: center;
  width: 100%;
}
.segment-name:focus {
  outline: none;
}

.segment-row {
  margin: 2px;
}
.custom {
  background: var(--accent50);
  color: white;
  font-weight: bolder;
}

.custom input {
  background: var(--accent50);
  color: white;
}

.reset {
  display: flex;
  justify-content: flex-end;
  margin-top: 1ex;
}

.cancel {
  background: var(--neutral);
  border: none;
  margin: 0px 4px;
}

.cancel:hover {
  background: var(--cancel-grey);
}
</style>