import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { AvatarEditor, Avatar } from 'asc-web-components';
import Section from '../../.storybook/decorators/section';

class AvatarEditorStory extends React.Component  {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false,
      userImage: null
    }

    this.openEditor = this.openEditor.bind(this);
    this.onClose = this.onClose.bind(this);
    this.onSave = this.onSave.bind(this);
    
  }
  onSave(result){
    action('onSave')(result);
    this.setState({
      userImage: result.croppedImage,
      isOpen: false
    })
  }
  openEditor(){
    this.setState({
      isOpen: true
    })
  }
  onClose(){
    action('onClose');
    this.setState({
      isOpen: false
    })
  }
  render(){
    return(
      <div>
        <Avatar
            size='max'
            role='user'
            source={this.state.userImage }
            editing={true}
            editAction={this.openEditor}
        />
        <AvatarEditor
          visible={this.state.isOpen}
          onClose={this.onClose}
          onSave={this.onSave}
        />
      </div>
    )
  }
}

storiesOf('Components|AvatarEditor', module)
  .addDecorator(withKnobs)
  .addDecorator(withReadme(Readme))
  .add('avatar editor', () => {
   
    return (
      <Section>
        <AvatarEditorStory />
    </Section>
    );
  });