<template>
<div>
  <b-modal id="fullScreenModal" ref="fullScreenModalRef" size="lg" hide-footer @hidden="onCancel()" @shown="afterLoadShown()">
    <div class="widget-container">
      <div class="full-screen-header">
        <div class="title">{{title}}</div>
        <div class="fs-hamburger-action">
          <b-dropdown size="sm" variant="link" toggle-class="text-decoration-none" no-caret>
            <template #button-content>
              <svg class="icon hamburger">
                <use xlink:href="/assets/img/mads-common-icons.svg#hamburger"></use>
              </svg>
            </template>
            <b-dropdown-item @click="printChart()">Print Chart</b-dropdown-item>
            <b-dropdown-item @click="downloadPNG()">Download PNG Image</b-dropdown-item>
            <b-dropdown-item @click="downloadJPEG()">Download JPEG Image</b-dropdown-item>
            <b-dropdown-item @click="downloadPDF()">Download PDF Document</b-dropdown-item>
            <b-dropdown-item @click="downloadSVG()">Download SVG Vector Image</b-dropdown-item>
            <b-dropdown-item @click="downloadCSV()">Download CSV</b-dropdown-item>
            <b-dropdown-item @click="downloadXLS()">Download XLS</b-dropdown-item>
            <b-dropdown-item @click="viewData()">{{isViewDataTable ? 'View Data Table' : 'Hide Data Table'}}</b-dropdown-item>
          </b-dropdown>
        </div>
      </div>
      <div id="fullScreenWidget" style="display: flex; justify-content: center;"></div>
    </div>
  </b-modal>
</div>
</template>

<script>
import Highcharts from 'highcharts'
import Exporting from 'highcharts/modules/exporting'
import StockInit from 'highcharts/modules/stock'
import Boost from 'highcharts/modules/boost'
import ExportData from 'highcharts/modules/export-data'

Exporting(Highcharts)
StockInit(Highcharts)
Boost(Highcharts)
ExportData(Highcharts)

export default {
  props: {
    visualProperties: {
      type: Object,
      required: true
    },
    series: {
      type: Array,
      required: true
    },
    timezone: {
      type: String
    },
    category: {
      type: String,
      default: 'highchart'
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      widget: null,
      isViewDataTable: true
    }
  },
  methods: {
    onCancel () {
      this.$refs['fullScreenModalRef'].hide()
    },
    afterLoadShown () {
      this.generateWidget()
    },
    generateWidget () {
      let widgetOptions = this.$_.merge(
        this.visualProperties,
        {
          time: {
            timezone: this.timezone
          },
          series: this.series,
          caption: {
            text: ''
          },
          boost: {
            useGPUTranslations: true
          },
          plotOptions: {
            line: {
              marker: {
                enabled: false
              }
            }
          },
          rangeSelector: {
            enabled: false
          },
          title: {
            style: {
              display: 'none'
            }
          },
          subtitle: {
            style: {
              display: 'none'
            }
          },
          navigation: {
            buttonOptions: {
              enabled: false
            }
          }
        }
      )

      if (this.category === 'stock_chart') {
        this.widget = Highcharts.stockChart('fullScreenWidget', widgetOptions)
      } else {
        this.widget = Highcharts.chart('fullScreenWidget', widgetOptions)
      }
    },
    viewFullScreen () {
      this.$refs.madsModal.$refs.fullScreenModalRef.show()
    },
    downloadCSV () {
      this.widget.downloadCSV()
    },
    viewData () {
      this.isViewDataTable = !this.isViewDataTable
      this.widget.toggleDataTable()
    },
    downloadXLS () {
      this.widget.downloadXLS()
    },
    printChart () {
      this.widget.print()
    },
    downloadPNG () {
      this.widget.exportChart()
    },
    downloadJPEG () {
      this.widget.exportChart({
        type: 'image/jpeg'
      })
    },
    downloadPDF () {
      this.widget.exportChart({
        type: 'application/pdf'
      })
    },
    downloadSVG () {
      this.widget.exportChart({
        type: 'image/svg+xml'
      })
    }
  },
  mounted () {
    // this.generateWidget()
  }
}
</script>

<style lang="scss" scoped>
  .row {
    margin: 0;
    // min-height: 450px;
    flex-wrap: wrap;
    padding: 20px;
  }
.mads-footer {
    width: 100%;
    text-align: right;
    margin-top: 30px;
    .next-btn, .save-btn {
    background-color: #4c92c3 !important;
    color: #ffffff !important;
    }
  }
  .widget-container {
    position: relative;
    background-color: white;
    width: 100%;
    .centered-loader {
      position: absolute;
      top: 50%;
      left: 50%;
    }
  }

  .full-screen-header{
    display: flex;
    justify-content: space-between;
    padding: 0px 38px;
    align-items: center;
    .title {
      font-size: 16px;
    }
    .fs-hamburger-action{
      // width: 185px;
       .hamburger{
        width: 35px;
        height: 35px;
        fill: #3576AB;
        border-radius: 50%;
      }
    }
  }
</style>

<style lang="scss">
  .modal {
    .modal-content {
      .modal-body {
        padding: 0;
        display: flex;
        align-items: center;
      }
    }
  }
  #fullScreenModal{
    .modal-dialog{
      max-width: 100% !important;
      height: 100% !important;
      margin:0 !important;
      #fullScreenModal___BV_modal_content_{
        height: 100% !important;
      }
    }
  }
  .highcharts-caption {
    background-color: #e0e0e0;
  }
  .full-screen-header {
    .fs-hamburger-action {
      // width: 184px;
      .b-dropdown {
        .dropdown-menu {
          // transform: translate3d(80px, 70px, 0px) !important;
        }
      }
      .b-dropdown .dropdown-toggle::after{
        display: none !important;
      }
      .dropdown-item{
        padding: 3px 10px !important;
      }
    }
  }

  .highcharts-data-table table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    min-width: 100%;
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 0.9em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    border: 1px solid silver;
    padding: 0.5em;
}
.highcharts-data-table tr:nth-child(even), .highcharts-data-table thead tr {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #eff;
}
.highcharts-data-table caption {
    border-bottom: none;
    font-size: 1.1em;
    font-weight: bold;
}
</style>
