<commit_before><template>
  <div class="data-wrapper">
    <div
      v-for="dataType in dataTypes"
      :class="['data-el', toDisplayType(dataType, true)]"
    >
      <div
        class="data-type selectable-item"
        v-tooltip="dataTypeTooltip"
        @click="toggle(dataType, $event)"
      >
        <span
          class="arrow right"
          :class="{ rotated: isExpanded(dataType) }"
        ></span>
        <span class="key">{{ toDisplayType(dataType) }}</span>
      </div>
      <div v-show="isExpanded(dataType)" class="data-fields">
        <template v-if="Array.isArray(state[dataType])">
          <data-field
            v-for="field in state[dataType]"
            :key="field.key"
            :field="field"
            :depth="0"
            :path="field.key"
            :editable="field.editable">
          </data-field>
        </template>
        <template v-else>
          <data-field
            v-for="(value, key) in state[dataType]"
            :key="key"
            :field="{ value, key }"
            :depth="0"
            :path="key"
            :editable="false">
          </data-field>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import DataField from './DataField.vue'

const keyOrder = {
  undefined: 1,
  props: 2,
  computed: 3,
  state: 1,
  getters: 2
}

export default {
  components: {
    DataField
  },
  props: {
    state: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      expandedState: {}
    }
  },
  computed: {
    dataTypes () {
      return Object.keys(this.state).sort((a, b) => {
        return (
          (keyOrder[a] || (a.charCodeAt(0) + 999)) -
          (keyOrder[b] || (b.charCodeAt(0) + 999))
        )
      })
    },
    dataTypeTooltip () {
      return '<span class="keyboard">Ctrl</span> + <i class="material-icons">mouse</i>: Collapse All<br><span class="keyboard">Shift</span> + <i class="material-icons">mouse</i>: Expand All'
    }
  },
  methods: {
    toDisplayType (dataType, asClass) {
      return dataType === 'undefined'
        ? 'data'
        : asClass
          ? dataType.replace(/\s/g, '-')
          : dataType
    },
    isExpanded (dataType) {
      const value = this.expandedState[dataType]
      return typeof value === 'undefined' || value
    },
    toggle (dataType, event = null) {
      if (event) {
        if (event.ctrlKey) {
          return this.setExpandToAll(false)
        } else if (event.shiftKey) {
          return this.setExpandToAll(true)
        }
      }
      Vue.set(this.expandedState, dataType, !this.isExpanded(dataType))
    },
    setExpandToAll (value) {
      this.dataTypes.forEach(key => {
        Vue.set(this.expandedState, key, value)
      })
    }
  }
}
</script>

<style lang="stylus">
@import "../variables"

.data-el
  font-size 14px

  &:not(:last-child)
    border-bottom rgba($grey, .4) solid 1px

    .dark &
      border-bottom-color rgba($grey, .07)

  .dark &<commit_msg>Fix collapse all on Mac OS<commit_after><template>
  <div class="data-wrapper">
    <div
      v-for="dataType in dataTypes"
      :class="['data-el', toDisplayType(dataType, true)]"
    >
      <div
        class="data-type selectable-item"
        v-tooltip="dataTypeTooltip"
        @click="toggle(dataType, $event)"
      >
        <span
          class="arrow right"
          :class="{ rotated: isExpanded(dataType) }"
        ></span>
        <span class="key">{{ toDisplayType(dataType) }}</span>
      </div>
      <div v-show="isExpanded(dataType)" class="data-fields">
        <template v-if="Array.isArray(state[dataType])">
          <data-field
            v-for="field in state[dataType]"
            :key="field.key"
            :field="field"
            :depth="0"
            :path="field.key"
            :editable="field.editable">
          </data-field>
        </template>
        <template v-else>
          <data-field
            v-for="(value, key) in state[dataType]"
            :key="key"
            :field="{ value, key }"
            :depth="0"
            :path="key"
            :editable="false">
          </data-field>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import DataField from './DataField.vue'

const keyOrder = {
  undefined: 1,
  props: 2,
  computed: 3,
  state: 1,
  getters: 2
}

export default {
  components: {
    DataField
  },
  props: {
    state: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      expandedState: {}
    }
  },
  computed: {
    dataTypes () {
      return Object.keys(this.state).sort((a, b) => {
        return (
          (keyOrder[a] || (a.charCodeAt(0) + 999)) -
          (keyOrder[b] || (b.charCodeAt(0) + 999))
        )
      })
    },
    dataTypeTooltip () {
      let ctrlKey = navigator.platform === 'MacIntel' ? '&#8984;' : 'Ctrl'
      return `<span class="keyboard">${ctrlKey}</span> + <i class="material-icons">mouse</i>: Collapse All<br><span class="keyboard">Shift</span> + <i class="material-icons">mouse</i>: Expand All`
    }
  },
  methods: {
    toDisplayType (dataType, asClass) {
      return dataType === 'undefined'
        ? 'data'
        : asClass
          ? dataType.replace(/\s/g, '-')
          : dataType
    },
    isExpanded (dataType) {
      const value = this.expandedState[dataType]
      return typeof value === 'undefined' || value
    },
    toggle (dataType, event = null) {
      if (event) {
        if (event.ctrlKey || event.metaKey) {
          return this.setExpandToAll(false)
        } else if (event.shiftKey) {
          return this.setExpandToAll(true)
        }
      }
      Vue.set(this.expandedState, dataType, !this.isExpanded(dataType))
    },
    setExpandToAll (value) {
      this.dataTypes.forEach(key => {
        Vue.set(this.expandedState, key, value)
      })
    }
  }
}
</script>

<style lang="stylus">
@import "../variables"

.data-el
  font-size 14px

  &:not(:last-child)
    border-bottom rgba($grey, .4) solid 1px

    .dark &
      border-bottom-color rgba($grey, .07)

  .dark &
{'fraction_non_alphanumeric': 0.16212689610177786, 'fraction_numerical': 0.007502854346762356, 'mean_word_length': 1.991219512195122, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 75, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2000448', 'n_tokens_mistral': 2089, 'n_tokens_neox': 2032, 'n_words': 386}