import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import Widget from '../../components/Widget/Widget';
import {
  Row,
  Col,
  Button,
  Form,
  FormGroup,
  Label,
} from 'reactstrap';

class Subject extends PureComponent {
  constructor(props) {
    super(props);
    this.onChangeInputImage = this.onChangeInputImage.bind(this);
    this.onClickSaveImage = this.onClickSaveImage.bind(this);
    this.state = {
      imageFiles: [],
    };
  }

  onChangeInputImage(e) {
    const files = [];
    const reader = new FileReader();
    files.push(e.target.files[0]);
    reader.onloadend = () => {
      files[0].preview = reader.result;
      files[0].toUpload = true;
      this.setState({
        imageFiles: files,
      });
    };
    reader.readAsDataURL(e.target.files[0]);
  }

  onClickSaveImage(e) {
    e.preventDefault();
    console.log(this.state.imageFiles);
    console.log("save image");
    this.setState({
      imageFiles:[],
    });
    // post request
  }

  render() {
    return (
      <div>
        <h1 className="page-title mb-xlg mt-lg">Photo <small>Upload</small></h1>
        <Row>
        <Col lg="6" md={12}>
            <Widget
            >
              <Form>
                <blockquote className="blockquote blockquote">
                  <p>침입자로 분류하지 않을 방문자의 사진을 업로드 하세요.</p>
                </blockquote>

                <FormGroup style={{margin:'10px 0px 0px 0px'}}>
                  <Col md="8">
                    <input
                      accept="image/*" onChange={this.onChangeInputImage}
                      id="fileupload"
                      type="file" name="file" className="display-none"
                    />
                        {this.state.imageFiles.length > 0 ? <div>
                          {this.state.imageFiles.map((file, idx) => (
                            <img alt="..." src={file.preview} key={`img-id-${idx.toString()}`} />))}
                        </div> : <img
                          alt="..."
                          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTEiIGhlaWdodD0iMTQxIj48cmVjdCB3aWR0aD0iMTkxIiBoZWlnaHQ9IjE0MSIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijk1LjUiIHk9IjcwLjUiIHN0eWxlPSJmaWxsOiNhYWE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LXNpemU6MTJweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xOTF4MTQxPC90ZXh0Pjwvc3ZnPg=="
                        />}
                    <div>
                      <Button type="button" color="default" onClick={this.onClickSaveImage} style={{margin:'10px 0px 0px 0px'}}>Upload Image</Button>
                    </div>
                  </Col>
                </FormGroup>
              </Form>
            </Widget>
          </Col>
        </Row>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
      labelData: state.labelData,
  }
}

export default connect(mapStateToProps)(Subject);