
<template>
  <RadioButtonGroup
    group_name="pattern"
    :label_list="['pulse', 'travel', 'strobe']"
    :checked_index="pattern"
    :callback="patternSelectCallback"
  ></RadioButtonGroup>
  <div class="w-100 d-block d-lg-none"></div>
  <RadioButtonGroup
    group_name="channel"
    :label_list="['0', '1', '2', '3', '4', '5', '6', '7', 'all']"
    :checked_index="channel"
    :callback="channelSelectCallback"
  >
    channels
  </RadioButtonGroup>

  <PulsePattern v-if="pattern == 0"></PulsePattern>
  <TravelPattern v-else-if="pattern == 1"></TravelPattern>
  <StrobePattern v-else-if="pattern == 2"></StrobePattern>
</template>

<script>
import RadioButtonGroup from "./ui/RadioButtonGroup.vue";

import PulsePattern from "./patterns/Pulse.vue";
import StrobePattern from "./patterns/Strobe.vue";
import TravelPattern from "./patterns/Travel.vue";

const data = {
  pattern: 1,
  channel: 8,
};

export default {
  name: "AutoMode",
  components: {
    RadioButtonGroup,
    PulsePattern,
    TravelPattern,
    StrobePattern,
  },
  data() {
    return data;
  },
  methods: {
    patternSelectCallback: function (event) {
      if (event.target.nodeName == "INPUT") {
        this.pattern = Number(event.target.value);
        console.log("p:" + this.pattern);
      }
    },
    channelSelectCallback: function (event) {
      if (event.target.nodeName == "INPUT") {
        let selectedChannel = event.target.id.split("-")[0];
        if (selectedChannel == "all") {
          this.channel = 8;
        } else {
          this.channel = Number(selectedChannel);
        }
        console.log("c:" + this.channel);
      }
    },
  },
};
</script>