import React from 'react';
import {observer, inject} from 'mobx-react';
import bind from 'bind-decorator';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  AutoComplete,
  CardText,
  FlatButton,
  Divider,
  Tabs, Tab,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  MenuItem,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  RadioButton,
  TextField,
  Paper,
  RadioButtonGroup,
  Dialog,
  SelectField,
  GridList,
  GridTile,
  Toggle
} from 'material-ui';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
import SwipeableViews from 'react-swipeable-views';
import SearchIcon from 'material-ui/svg-icons/action/search';
import AddIcon from 'material-ui/svg-icons/content/add';
import { Upload, Icon, Modal, message, } from 'antd';
import '../style.scss';
import {appConfig} from "../../../config/app";
import {Link} from 'react-router-dom';
import {LINKS} from "../../../routes";
import uuid from 'uuid';

let DateTimeFormat = global.Intl.DateTimeFormat;
const Dragger = Upload.Dragger;

@inject('appstate')
@observer
export default class Uploads extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.rewardStore = props.appstate.reward;
    this.state = {
      openedDialog: false,
      value: 1,
      searchText: '',
      slideIndex: 0,
      openedDialogBack: false,
      reward_type: "Choose Reward Type",
      expanded: false,
      previewVisible: false,
      previewImage: '',
      fileList: [],
      formData: {
        custom_fields: []
      }
    };
    this.defaultState = Object.assign({}, this.state);

    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;
    this.categoryStore = props.appstate.category;
    this.itemStore = props.appstate.item;
    this.userData = props.appstate.userData;
  }

  componentDidMount() {
    this.itemStore.listImages = [];
    console.log(this.props.id,'ini id dari detail');
  }

  handleChange = ({ fileList }) => this.setState({ fileList });

  uploaderHandler = (file) => {
    this.http.upload(file)
      .then(async res => {
        const {fileList} = this.state;
        fileList.push({
          uid: fileList.length + 1,
          name: file.name,
          status: 'done',
          url: this.http.appendImagePath(res.path),
          path: res.path
        });
        await this.itemStore.addImages(fileList[0]);
        await console.log(this.itemStore.listImages.slice(), 'store');
        if(this.userData.role === 'administrator') {
          this.props.history.push(`${LINKS.FORM_ITEMS}/${this.props.id}`);
        }
        else if(this.userData.role === 'store'){
          this.props.history.push(LINKS.FORM_ITEMS);
        }
        // this.setState({fileList});
      });
  };

  render() {

    const { previewVisible, previewImage, fileList } = this.state;
    const props = {
      name: 'file',
      multiple: false,
      action: `${appConfig.apiUrl}files/`,
      onChange: async (info) => {
        const status = info.file.status;
        if (status === 'done') {
          await this.uploaderHandler(info.file.originFileObj);
        } else if (status === 'error') {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    };

    return (

      <div style={{marginTop: 35}}>
        <div className="row">
          <div className="col l12 m12 s12">
            <Card className="animated fadeIn cardLite">
              <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                <ToolbarGroup>
                  <IconButton
                    iconClassName="material-icons"
                    tooltip="Back"
                    style={{marginLeft: '-10px'}}
                    onClick={() => this.props.history.goBack()}
                  >
                    arrow_back
                  </IconButton>
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Add New Item'}/>
                </ToolbarGroup>
              </Toolbar>
              <Divider/>
              <div style={{padding: '14px'}}>
                <div className="row">
                  <div className="row">
                    <h2 className='photo-title'>
                      Let's start with adding some of your item's photo
                    </h2>
                  </div>
                  <div className="row">
                    {/*<div className="">*/}
                    {/*<Upload*/}
                    {/*listType="picture-card"*/}
                    {/*fileList={fileList}*/}
                    {/*customRequest={(...args) => this.uploaderHandler(...args)}*/}
                    {/*style={{}}*/}
                    {/*>*/}
                    {/*{fileList.length >= 9 ? null : uploadButton}*/}
                    {/*</Upload>*/}
                    {/*<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>*/}
                    {/*<img alt="example" style={{ width: '100%' }} src={previewImage} />*/}
                    {/*</Modal>*/}
                    {/*</div>*/}
                    <div className="col s12 box-upload">
                      <Dragger {...props}>
                        <p className="ant-upload-drag-icon">
                          <Icon type="inbox" />
                        </p>
                        <p className="ant-upload-text">Click or drag file to this area to upload</p>
                        <p className="ant-upload-hint">Support for a single upload. Max 9 of picture and 2.0 MB size per picture, picture format only</p>
                      </Dragger>
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>
    )
  }
}
