import {
  nStoriesOfWithDefault,
  action,
  boolean,
  text,
  color,
  array
} from "./storybase.js"

import LineChart from "~/components/LineChart"

nStoriesOfWithDefault({ LineChart })
  .add("with some data", () => ({
    components: { LineChart },
    template: `
<div>
  <line-chart :data="{
    labels: [1,2,3],
    datasets: [
      {
        label: 'Sample',
        backgroundColor: 'green',
        data: ['1','2','3']
      }
    ]
  }" :options="{ maintainAspectRatio: false, responsive:true}"/>
</div>`
  }))
  .add("with knobs demo", () => {
    const maintainAspectRatio = boolean("Aspect Ratio", false)
    const responsive = boolean("Responsive", true)
    const title = text("Title", "Sample chart")
    const myColor = color("Background Color", "darkred")

    const defaultValue = array("Values", [1, 2, 3, 6, 3, 8])
    const defaultLabel = array("Labels", [
      "'a'",
      "'b'",
      "'c'",
      "'d'",
      "'e'",
      "'f'"
    ])

    return {
      components: { LineChart },
      methods: { onResize: action("resized") },
      template: `
        <div  style="position: relative; height:40vh; width:80vw">
        <line-chart :data="{
            labels: [${defaultLabel}],
          datasets: [
            {
              label: '${title}',
              backgroundColor: '${myColor}',
              data: [${defaultValue}]
            }
          ]
        }" :options="{ maintainAspectRatio: ${maintainAspectRatio}, responsive:${responsive}, onResize }"/>
      </div>
      `
    }
  })
  .addVT("with Vuetify", () => {
    const data = { "'a'": 1, "'b'": 2, "'c'": 3 }
    return `
        <line-chart :data="{
          labels: [${Object.keys(data)}],
          datasets: [
            {
              label: 'list 1',
              backgroundColor: '#41b883',
              data: [${Object.values(data)}]
            }
          ]
        }" :options="{ maintainAspectRatio: false, responsive:true}"/>
  `
  })
  .addVT(
  "with Vuetify2",
  `<line-chart :data="{
          labels: [1,2,3],
          datasets: [
            {
              label: 'list 2',
              backgroundColor: '#41b883',
              data: ['1','2','3']
            }
          ]
        }" :options="{ maintainAspectRatio: false, responsive:true}"/>
  `
  )