<script>

export default {
  name: 'DesmosModal',
  props: {
    desmosExpressions: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      mathField: null,
      selectedTaille: { titre: 'Moyenne', value: { height: 200, width: 200 } },
      items: [
        { titre: 'Petite', value: { height: 100, width: 100 } },
        { titre: 'Moyenne', value: { height: 200, width: 200 } },
        { titre: 'Grande', value: { height: 400, width: 400 } }
      ]
    }
  },
  mounted () {
    this.createDesmos()
  },
  computed: {
  },
  methods: {
    createDesmos () {
      this.calculator = window.Desmos.GraphingCalculator(document.getElementById('desmoswrapper'))
      this.desmosExpressions?.forEach(element => {
        this.calculator.setExpression(element)
      })
    },
    toogleDesmos () {
      this.$emit('toogleDesmos')
    }
  }
}
</script>

<template lang="pug">

.modal-index-desmos
  a.modal-overlay-desmos
  .modal-desmos
    div.modal-scroller-desmos(id='pages-scroller')
      .modal-header-desmos
        span Desmos
        button.close-button-desmos(@click='toogleDesmos')
          font-awesome-icon(:icon="['fas', 'times']", style='font-size: 24px')
      .modal-content__wrapper-desmos
        div(id='desmoswrapper' style="height: 400px;")
</template>

<style lang='sass'>
  @import './css/_modalDesmos.sass'
</style>
