import { Box } from '@tidbcloud/uikit'

import { ChartStore } from '../ChartStore'
import { Field, ChartFormData, ColumnLevelEnum } from '../type'

import { AddColumn } from './Components/AddColumn'
import { Appearance } from './Components/Appearance'
import { ChartTypeSelector } from './Components/ChartTypeSelector'
import { ColumnPicker } from './Components/ColumnPicker'
export default class Generator {
  renderChartTypeSelect(store: ChartStore) {
    return <ChartTypeSelector store={store} />
  }

  renderColumns(formData: ChartFormData, fields: Field[], store: ChartStore) {
    return Object.entries(formData.columnData).map(([key, columnData], idx) => {
      return (
        <Box key={idx} mb={5}>
          {columnData.necessary && columnData.value.length === 0 ? (
            <AddColumn
              formData={formData}
              fields={fields}
              uses={columnData.uses}
              level={key as ColumnLevelEnum}
              store={store}
            />
          ) : (
            columnData.value.map((column, index) => (
              <div key={index}>
                <ColumnPicker
                  column={column}
                  formData={formData}
                  fields={fields}
                  store={store}
                  index={index}
                  level={key as ColumnLevelEnum}
                />
              </div>
            ))
          )}
        </Box>
      )
    })
  }

  renderAddColumn(formData: ChartFormData, fields: Field[], store: ChartStore) {
    return <AddColumn formData={formData} fields={fields} store={store} />
  }

  renderAppearance(formData: ChartFormData, store: ChartStore) {
    return <Appearance formData={formData} store={store} />
  }
}