import { h, Component } from 'preact'

import Group from './group.component'
import Param from './param.component'
import Button from './button.component'
import ButtonGrid from './buttonGrid.component'

export default class AugmentationGrid extends Component {
  state = {
    x: 0, y: 0, sum: 0,
  }
  render() {
    let {
      make, take, checkpoint,
      onTrain, onAugment,
    } = this.props
    let {
      x, y, sum
    } = this.state
    let rows = []
    return (
      <Group className='augmentationGrid'>
        <ButtonGrid 
          x={make}
          y={take}
          max={5000}
          onHover={(x, y) => this.setState({ x, y })}
          onClick={(x, y) => {
            this.setState({ sum: sum + x * y })
            onAugment(y, x)
          }}
        />
        <Param title='Name'>{checkpoint.name}</Param>
        <Param title='Take'>{y}</Param>
        <Param title='Make'>{x}</Param>
        <Param title='Will add to dataset'>{x * y}</Param>
        <Param title='Total added this epoch'>{sum}</Param>
        <Param title='Sequence length'>{checkpoint.sequenceCount}</Param>
        <Param title='Dataset size'>{checkpoint.datasetCount}</Param>
        <Button onClick={() => {
          this.setState({ sum: 0 })
          onTrain()
        }}>Train</Button>
      </Group>
    )
  }
}