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 rows = []
    return (
      <Group className='augmentationGrid'>
        <ButtonGrid 
          x={this.props.make}
          y={this.props.take}
          max={5000}
          onHover={(x, y) => this.setState({ x, y })}
          onClick={(x, y) => {
            this.setState({ sum: this.state.sum + x * y })
            this.props.onAugment(y, x)
          }}
        />
        <Param title='Take'>{this.state.y}</Param>
        <Param title='Make'>{this.state.x}</Param>
        <Param title='Will add to dataset'>{this.state.x * this.state.y}</Param>
        <Param title='Total added this epoch'>{this.state.sum}</Param>
        <Button onClick={() => {
          this.setState({ sum: 0 })
          this.props.onTrain()
        }}>Train</Button>
      </Group>
    )
  }
}