const PCBRender = (props) => {
  const updateImage = async () => {
    const fw = props.store.get('frameworks')
    const data = await fw.PCBApi.render({
      project_key: props.project_key,
      username: props.username,
      side: props.side,
    })
    return 'data:image/jpeg;base64,' + data
  }

  const {value, loading} = usePromise(updateImage())
  if (loading) return null
  return <div>{value}</div>
}

class ChangeProject extends React.Component {
  render() <ChangeProjectWidget onChange="this.props.updateProject" />
}

class ProjectPage extends React.Component {
  const updateProject = async () => {
    const fw = props.store.get('frameworks')
    const data = await fw.PCBApi.render({
      project_key: props.project_key,
      username: props.username,
      side: props.side,
    })
    this.setState('projectImage', 'data:image/jpeg;base64,' + data);
  }
  
  render() 
    <div>
       <ChangeProject updateProject="this.updateProject" />
       <PCBRender projectImage={this.state.projectImage} />
    </div>
}

class PCBRender extends React.Component {
  render() {
    return 
      {!this.props.projectImage && <div>loading...</div>}
      {this.props.projectImage && <div><img src={this.props.projectImage}/></div>}
  }
}

class PCBRender extends React.Component {
  loading_color = '#555888'
  
  constructor(props) {
    super(props);
    this.state = {
      img: '',
    };
  };

  componentDidMount() {
    this.updateImage()
  }

  async updateImage() {
    const fw = this.props.store.get('frameworks')
    const data = await fw.PCBApi.render({
      project_key: this.props.project_key,
      username: this.props.username,
      side: this.props.side,
    })
    this.setState({img: 'data:image/jpeg;base64,' + data})
  }

  render() {
    let { classes } = this.props
    return (!this.state.img.length)
      ? <div className={classes.loadingDiv}><ReactLoading className={classes.loading} type={'spinningBubbles'} color={this.loading_color} height={50} width={50} /></div>
      : <img src={this.state.img}/>
  }
}