#undoManager

import { VBI, VBIChartBuilder } from '@visactor/vbi'
import { DEMO_CONNECTOR_ID, VSeedRender } from '@components'
import { useEffect, useState } from 'react'

export default () => {
  const [result, setResult] = useState<any>(null)

  useEffect(() => {
    const run = async () => {
      const builder = VBI.chart.create({
        ...{
          "connectorId": "demoSupermarket",
          "chartType": "bar",
          "dimensions": [],
          "measures": [
            {
              "field": "sales",
              "alias": "销售额",
              "encoding": "yAxis",
              "aggregate": {
                "func": "sum"
              }
            }
          ],
          "whereFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "havingFilter": {
            "id": "root",
            "op": "and",
            "conditions": []
          },
          "theme": "light",
          "locale": "zh-CN",
          "version": 1,
          "limit": 10
        },
        connectorId: DEMO_CONNECTOR_ID,
      })
      const applyBuilder = (builder: VBIChartBuilder) => {
  builder.measures.add('profit', (node) => {
    node.setAlias('利润').setEncoding('yAxis').setAggregate({ func: 'sum' })
  })
  builder.limit.setLimit(5)

  // 第一步只撤销 limit，新增的利润指标仍然存在。
  builder.undoManager.undo()
  if (builder.limit.getLimit() !== 10 || builder.measures.toJSON().length !== 2) {
    throw new Error('Each chart transaction should be a separate undo step')
  }

  // 第二步撤销整个 add，包括回调内的别名、编码和聚合配置。
  builder.undoManager.undo()
  if (builder.measures.toJSON().length !== 1) {
    throw new Error('Undo should remove only the added measure')
  }

  builder.undoManager.redo()
  builder.undoManager.redo()
  if (builder.limit.getLimit() !== 5 || builder.measures.toJSON().length !== 2) {
    throw new Error('Redo should restore each chart transaction')
  }
}
      await applyBuilder(builder)
      setResult(await builder.buildVSeed())
    }
    run()
  }, [])

  if (!result) return <div>Loading...</div>

  return <VSeedRender vseed={result} />
}