<template>
  <f7-page name="specs">
    <f7-navbar :sliding="false" back-link="Back">
      <f7-nav-title sliding>Tech Specs</f7-nav-title>
    </f7-navbar>
    <f7-block style="display: flex; flex-direction: column; align-items: stretch;">
      <div style="display: flex; flex-direction: column; align-items: center;">
        <f7-block-title medium>Details</f7-block-title>
        <f7-list>
          <f7-list-item title="Version" :after="alvinnVersion"></f7-list-item>
          <f7-list-item title="Build" :after="alvinnBuild"></f7-list-item>
          <f7-list-item title="Workers" :after="useWorkers ? 'Enabled' : 'Disabled'"></f7-list-item>
        </f7-list>
        <f7-block-title medium>Models</f7-block-title>
        <f7-list style="width: 100%;">
          <f7-list-item :class="otherSettings.mini ? 'unused-model' : ''" title="Thorax" :after="thoraxDetails.version"></f7-list-item>
          <f7-list-item title="Thorax-m" :after="miniThoraxDetails.version"></f7-list-item>
          <f7-list-item :class="otherSettings.mini ? 'unused-model' : ''" title="Abdomen/Pelvis" :after="abdomenDetails.version"></f7-list-item>
          <f7-list-item title="Abd/Pel-m" :after="miniAbdomenDetails.version"></f7-list-item>
          <f7-list-item :class="otherSettings.mini ? 'unused-model' : ''" title="Limbs" :after="limbsDetails.version"></f7-list-item>
          <f7-list-item title="Limbs-m" :after="miniLimbsDetails.version"></f7-list-item>
          <f7-list-item :class="otherSettings.mini ? 'unused-model' : ''" title="Head/Neck" :after="headneckDetails.version"></f7-list-item>
          <f7-list-item title="Head-m" :after="miniHeadneckDetails.version"></f7-list-item>
        </f7-list>
      </div>
    </f7-block>
  </f7-page>
</template>

<style>
  .unused-model {
    opacity: .75;
  }
  .unused-model .item-title {
    color: var(--f7-list-item-after-text-color)
  }
</style>

<script>
  import store from '../js/store'

  export default {
    data () {
      return {
        thoraxDetails: {},
        miniThoraxDetails: {},
        abdomenDetails: {},
        miniAbdomenDetails: {},
        //limbsDetails: { "version": "N/A" },
        //headneckDetails: { "version": "N/A" },
        limbsDetails: {},
        miniLimbsDetails: {},
        headneckDetails: {},
        miniHeadneckDetails: {},
        alvinnVersion: store().getVersion,
        alvinnBuild: store().getBuild,
        isCordova: !!window.cordova,
        useWorkers: store().useWorkers,
        otherSettings: {}
      }
    },
    setup() {
      return store()
    },
    created () {
      var loadOtherSettings = localStorage.getItem('otherSettings')
      if (loadOtherSettings) this.otherSettings = JSON.parse(loadOtherSettings)
        fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/thorax/descript.json`)
          .then((mod) => { return mod.json() })
          .then((desc) => { this.thoraxDetails = desc })
        fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/thorax-mini/descript.json`)
          .then((mod) => { return mod.json() })
          .then((desc) => { this.miniThoraxDetails = desc })
        fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/abdomen/descript.json`)
          .then((mod) => { return mod.json() })
          .then((desc) => { this.abdomenDetails = desc })
        fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/abdomen-mini/descript.json`)
          .then((mod) => { return mod.json() })
          .then((desc) => { this.miniAbdomenDetails = desc })
        fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/limbs/descript.json`)
          .then((mod) => { return mod.json() })
          .then((desc) => { this.limbsDetails = desc })
        fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/limbs-mini/descript.json`)
          .then((mod) => { return mod.json() })
          .then((desc) => { this.miniLimbsDetails = desc })
        fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/head/descript.json`)
          .then((mod) => { return mod.json() })
          .then((desc) => { this.headneckDetails = desc })
        fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/head-mini/descript.json`)
          .then((mod) => { return mod.json() })
          .then((desc) => { this.miniHeadneckDetails = desc })
    },
    methods: {
    }
  }
</script>