<template>
  <h3>Rail System: <em>{{railSystem.name}}</em></h3>
  <SegmentsView :segments="railSystem.segments" v-if="railSystem.segments"/>
  <div class="dropdown d-inline-block me-2">
    <button class="btn btn-success btn-sm dropdown-toggle" type="button" id="railSystemAddComponentsToggle" data-bs-toggle="dropdown" aria-expanded="false">
      Add Component
    </button>
    <ul class="dropdown-menu" aria-labelledby="railSystemAddComponentsToggle">
      <li>
        <button
            type="button"
            class="dropdown-item"
            data-bs-toggle="modal"
            data-bs-target="#addSegmentModal"
        >
          Add Segment
        </button>
      </li>
      <li v-if="addSignalAllowed()">
        <button
            type="button"
            class="dropdown-item"
            data-bs-toggle="modal"
            data-bs-target="#addSignalModal"
        >
          Add Signal
        </button>
      </li>
      <li v-if="addSegmentBoundaryAllowed()">
        <button
            type="button"
            class="dropdown-item"
            data-bs-toggle="modal"
            data-bs-target="#addSegmentBoundaryModal"
        >
          Add Segment Boundary
        </button>
      </li>
      <li v-if="addSwitchAllowed()">
        <button
            type="button"
            class="dropdown-item"
            data-bs-toggle="modal"
            data-bs-target="#addSwitchModal"
        >
          Add Switch
        </button>
      </li>
    </ul>
  </div>
  <div v-if="createLinkTokenAllowed()" class="d-inline-block">
    <button
      class="btn btn-success btn-sm"
      type="button"
      data-bs-toggle="modal"
      data-bs-target="#createLinkTokenModal"
    >
      Create Link Token
    </button>
    <CreateLinkTokenModal :railSystem="railSystem" />
  </div>
  <AddSegmentModal />
  <AddSignalModal v-if="addSignalAllowed()" />
  <AddSegmentBoundaryModal v-if="addSegmentBoundaryAllowed()" />
  <AddSwitchModal v-if="addSwitchAllowed()" />
</template>

<script>
import SegmentsView from "./SegmentsView.vue";
import AddSegmentModal from "./AddSegmentModal.vue";
import AddSignalModal from "./component/AddSignalModal.vue";
import AddSegmentBoundaryModal from "./component/AddSegmentBoundaryModal.vue";
import AddSwitchModal from "./component/AddSwitchModal.vue";
import CreateLinkTokenModal from "./CreateLinkTokenModal.vue";
import {RailSystem} from "../../api/railSystems";

export default {
  name: "RailSystemPropertiesView",
  components: {
    CreateLinkTokenModal,
    AddSwitchModal,
    AddSegmentBoundaryModal,
    AddSignalModal,
    AddSegmentModal,
    SegmentsView
  },
  props: {
    railSystem: {
      type: RailSystem,
      required: true
    }
  },
  methods: {
    addSignalAllowed() {
      return this.railSystem.segments && this.railSystem.segments.length > 0;
    },
    addSegmentBoundaryAllowed() {
      return this.railSystem.segments && this.railSystem.segments.length > 1;
    },
    addSwitchAllowed() {
      return this.railSystem.components && this.railSystem.components.length > 1;
    },
    createLinkTokenAllowed() {
      return this.railSystem.components && this.railSystem.components.length > 0;
    }
  }
}
</script>

<style scoped>

</style>