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,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  SelectField,
  MenuItem,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  TextField,
  Paper,
  RadioButton,
  RadioButtonGroup,
  DropDownMenu,
  Dialog
} from 'material-ui';
import {withRouter} from 'react-router';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
import ContentAdd from 'material-ui/svg-icons/content/add';
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 EyeIcon from 'material-ui/svg-icons/image/remove-red-eye';
import DeleteIcon from 'material-ui/svg-icons/content/delete-sweep';
import ImageEdit from 'material-ui/svg-icons/image/edit';
import EmptyComponent from '../../EmptyComponent';
import LoadingDialog from "../../LoadingDialog";
import Loader from 'react-loader-advanced';
import {Row, Col} from 'antd';

import '../style.scss';
import {appConfig} from "../../../config/app";
import {Link} from 'react-router-dom';
import {LINKS} from "../../../routes";
import {ItemCard} from '../ItemCard';
import InfiniteScroll from 'react-infinite-scroller';

@inject('appstate')
@observer
export default class All extends React.Component {
  constructor(props) {
    super(props);``
    this.props = props;
    this.state = {
      searchText:'',
      value: 0,
      statusBanned: "Banned",
      statusSoldOut: "Sold Out"
    };
    this.handleChange = this
      .handleChange
      .bind(this);
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.uiStore = props.appstate.uiStore;
    this.userData = props.appstate.userData;
    this.globalUI = props.appstate.globalUI;
    this.rewardStore = props.appstate.reward;
    this.userData = props.appstate.userData;
    this.myStoreItem = props.appstate.myStoreItem;
  }

  componentDidMount() {
    // this.myStoreItem.isSearching = false;
    // if(this.userData.role == 'store') {
    //   this.myStoreItem.getAll();
    // }
    // if(this.userData.role == 'administrator') {
    //   this.myStoreItem.setRequestQuery({user_store_id : this.props.id});
    //   console.log('ini id',this.props.id);
    //   this.myStoreItem.getAll();
    // }
  }

  componentWillUnmount(){
    // this.myStoreItem.isSearching = false;
    // this.myStoreItem.reset();
  }

  deleteClicked = (id) => {
    this.state.id = id;
    this.setState({
      openedDelete: true
    });
  }

  search = (event)=>{
    console.log("dataSearch",event.target.value);
    if(event.target.value.length == 0){
      this.myStoreItem.isSearching = false;
    }
    else{
      this.myStoreItem.isSearching = true;
      this.myStoreItem.search(event.target.value);
    }
  }


  handleClickDelete = (id) => {
    this.rewardStore.deleteReward(id);
    this.setState({
      openedDelete: false,
      openSnackbarDelete: true
    });
    this.globalUI.openSnackbar("Successful Deleted Existing Reward");
  }

  handleCloseDelete = () => {
    this.setState({
      openedDelete: false
    })
  }

  handleChange = (event, index, value) => this.setState({value});

  loadMore = ()=>{
    console.log('RUNNss');
    if(this.myStoreItem.data.length > 0){
      this.myStoreItem.nextPage(true);
    }
  }

  render() {

    const data = [
      {
        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
        created_at: "2019-01-02T04:00:08.803Z",
        custom_fields: null,
        deleted_at: null,
        description: null,
        height: "0.00",
        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
        length: "0.00",
        name: "Silly Oregano Seasoning",
        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
        product_id: 205,
        product_tmpl_id: 291,
        product_uom: 21,
        odoo_stock_id: 123634,
        order: 147291,
        preorder: null,
        regular_price: "10",
        sale_date_from: null,
        sale_date_to: null,
        sale_price: null,
        seen: 0,
        sold: 0,
        stock: "34.00",
        uom: "pack",
        updated_at: "2019-01-02T13:00:05.042Z",
        use_weight_as_stock: false,
        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
        visible: true,
        weight: "0.04",
        width: "0.00",
        wishlist: "0",
      },{
        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
        created_at: "2019-01-02T04:00:08.803Z",
        custom_fields: null,
        deleted_at: null,
        description: null,
        height: "0.00",
        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
        length: "0.00",
        name: "Silly Oregano Seasoning",
        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
        product_id: 205,
        product_tmpl_id: 291,
        product_uom: 21,
        odoo_stock_id: 123634,
        order: 147291,
        preorder: null,
        regular_price: "10",
        sale_date_from: null,
        sale_date_to: null,
        sale_price: null,
        seen: 0,
        sold: 0,
        stock: "34.00",
        uom: "pack",
        updated_at: "2019-01-02T13:00:05.042Z",
        use_weight_as_stock: false,
        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
        visible: true,
        weight: "0.04",
        width: "0.00",
        wishlist: "0",
      },{
        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
        created_at: "2019-01-02T04:00:08.803Z",
        custom_fields: null,
        deleted_at: null,
        description: null,
        height: "0.00",
        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
        length: "0.00",
        name: "Silly Oregano Seasoning",
        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
        product_id: 205,
        product_tmpl_id: 291,
        product_uom: 21,
        odoo_stock_id: 123634,
        order: 147291,
        preorder: null,
        regular_price: "10",
        sale_date_from: null,
        sale_date_to: null,
        sale_price: null,
        seen: 0,
        sold: 0,
        stock: "34.00",
        uom: "pack",
        updated_at: "2019-01-02T13:00:05.042Z",
        use_weight_as_stock: false,
        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
        visible: true,
        weight: "0.04",
        width: "0.00",
        wishlist: "0",
      },{
        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
        created_at: "2019-01-02T04:00:08.803Z",
        custom_fields: null,
        deleted_at: null,
        description: null,
        height: "0.00",
        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
        length: "0.00",
        name: "Silly Oregano Seasoning",
        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
        product_id: 205,
        product_tmpl_id: 291,
        product_uom: 21,
        odoo_stock_id: 123634,
        order: 147291,
        preorder: null,
        regular_price: "10",
        sale_date_from: null,
        sale_date_to: null,
        sale_price: null,
        seen: 0,
        sold: 0,
        stock: "34.00",
        uom: "pack",
        updated_at: "2019-01-02T13:00:05.042Z",
        use_weight_as_stock: false,
        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
        visible: true,
        weight: "0.04",
        width: "0.00",
        wishlist: "0",
      },{
        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
        created_at: "2019-01-02T04:00:08.803Z",
        custom_fields: null,
        deleted_at: null,
        description: null,
        height: "0.00",
        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
        length: "0.00",
        name: "Silly Oregano Seasoning",
        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
        product_id: 205,
        product_tmpl_id: 291,
        product_uom: 21,
        odoo_stock_id: 123634,
        order: 147291,
        preorder: null,
        regular_price: "10",
        sale_date_from: null,
        sale_date_to: null,
        sale_price: null,
        seen: 0,
        sold: 0,
        stock: "34.00",
        uom: "pack",
        updated_at: "2019-01-02T13:00:05.042Z",
        use_weight_as_stock: false,
        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
        visible: true,
        weight: "0.04",
        width: "0.00",
        wishlist: "0",
      },{
        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
        created_at: "2019-01-02T04:00:08.803Z",
        custom_fields: null,
        deleted_at: null,
        description: null,
        height: "0.00",
        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
        length: "0.00",
        name: "Silly Oregano Seasoning",
        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
        product_id: 205,
        product_tmpl_id: 291,
        product_uom: 21,
        odoo_stock_id: 123634,
        order: 147291,
        preorder: null,
        regular_price: "10",
        sale_date_from: null,
        sale_date_to: null,
        sale_price: null,
        seen: 0,
        sold: 0,
        stock: "34.00",
        uom: "pack",
        updated_at: "2019-01-02T13:00:05.042Z",
        use_weight_as_stock: false,
        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
        visible: true,
        weight: "0.04",
        width: "0.00",
        wishlist: "0",
      },{
        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
        created_at: "2019-01-02T04:00:08.803Z",
        custom_fields: null,
        deleted_at: null,
        description: null,
        height: "0.00",
        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
        length: "0.00",
        name: "Silly Oregano Seasoning",
        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
        product_id: 205,
        product_tmpl_id: 291,
        product_uom: 21,
        odoo_stock_id: 123634,
        order: 147291,
        preorder: null,
        regular_price: "10",
        sale_date_from: null,
        sale_date_to: null,
        sale_price: null,
        seen: 0,
        sold: 0,
        stock: "34.00",
        uom: "pack",
        updated_at: "2019-01-02T13:00:05.042Z",
        use_weight_as_stock: false,
        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
        visible: true,
        weight: "0.04",
        width: "0.00",
        wishlist: "0",
      },{
        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
        created_at: "2019-01-02T04:00:08.803Z",
        custom_fields: null,
        deleted_at: null,
        description: null,
        height: "0.00",
        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
        length: "0.00",
        name: "Silly Oregano Seasoning",
        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
        product_id: 205,
        product_tmpl_id: 291,
        product_uom: 21,
        odoo_stock_id: 123634,
        order: 147291,
        preorder: null,
        regular_price: "10",
        sale_date_from: null,
        sale_date_to: null,
        sale_price: null,
        seen: 0,
        sold: 0,
        stock: "34.00",
        uom: "pack",
        updated_at: "2019-01-02T13:00:05.042Z",
        use_weight_as_stock: false,
        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
        visible: true,
        weight: "0.04",
        width: "0.00",
        wishlist: "0",
      },{
        category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
        created_at: "2019-01-02T04:00:08.803Z",
        custom_fields: null,
        deleted_at: null,
        description: null,
        height: "0.00",
        id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
        images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
        item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
        length: "0.00",
        name: "Silly Oregano Seasoning",
        odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
        product_id: 205,
        product_tmpl_id: 291,
        product_uom: 21,
        odoo_stock_id: 123634,
        order: 147291,
        preorder: null,
        regular_price: "10",
        sale_date_from: null,
        sale_date_to: null,
        sale_price: null,
        seen: 0,
        sold: 0,
        stock: "34.00",
        uom: "pack",
        updated_at: "2019-01-02T13:00:05.042Z",
        use_weight_as_stock: false,
        user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
        visible: true,
        weight: "0.04",
        width: "0.00",
        wishlist: "0",
      }
    ];

    const actionsDelete = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleCloseDelete}
      />,
      <FlatButton
        label="Delete"
        primary={true}
        onClick={() => this.handleClickDelete(this.state.id)}
      />,
    ];

    return (
      <div>
        <div className="row">
          <div className="col l12 m12 s12">
            <Card className="animated fadeIn cardLite">
              <Toolbar className="toolbarCard radius4" style={{backgroundColor: '#fff'}}>
                <ToolbarGroup>
                  <SearchIcon style={{marginRight: 8, color: "#999"}}/>
                  <TextField
                    hintText="Search All by Name"
                    style={{fontSize: 14}}
                    hintStyle={{fontSize: 14}}
                    underlineShow={false}
                    // onChange={this.search}
                  />
                </ToolbarGroup>
                {/*<ToolbarGroup className="ToolbarGroupLast">*/}
                  {/*<ToolbarSeparator/>*/}
                  {/*<Link to={`${LINKS.FORM_ITEMS}`}>*/}
                    {/*<RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New Items"*/}
                                  {/*primary={true}/>*/}
                  {/*</Link>*/}
                {/*</ToolbarGroup>*/}
              </Toolbar>

              {/*<div style={{paddingBottom: 5}}>*/}
              {/*<Loader show={false} message={<LoadingDialog/>}*/}
              {/*messageStyle={{textAlign: 'center'}} backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>*/}

              {/*</Loader>*/}
              {/*</div>*/}
              <Dialog
                title="Warning"
                actions={actionsDelete}
                modal={true}
                open={this.state.openedDelete}
                onRequestClose={() => this.handleCloseDelete()}
              >
                Are you sure want to delete this data?
              </Dialog>
            </Card>
          </div>
        </div>

        <InfiniteScroll pageStart={0} loadMore={this.loadMore} hasMore={true}>
        <Row className="row rowItem" gutter={8}>
          {(this.userData.role === 'store' && this.userData.entity_permission.can_store_change_item) ?
          <Col className="gutter-row col animated fadeIn" span={4}>
            <Link to={`${LINKS.FORM_ITEMS}`} style={{color: '#424770'}}>
              <div className="flex add-new"
                   style={{
                     flexDirection: 'column',
                     alignItems: 'center',
                     justifyContent: 'center',
                     height: 323
                   }}>
                <div>
                  <FontIcon className="material-icons icon-add ">add</FontIcon>
                </div>
                Add new item
              </div>
            </Link>
          </Col> : ""
          }

          {(this.userData.role === 'administrator') ?
            <Col className="gutter-row col animated fadeIn" span={4}>
              <Link to={`${LINKS.FORM_ITEMS}/${this.props.id}`} style={{color: '#424770'}}>
                <div className="flex add-new"
                     style={{
                       flexDirection: 'column',
                       alignItems: 'center',
                       justifyContent: 'center',
                       height: 323
                     }}>
                  <div>
                    <FontIcon className="material-icons icon-add ">add</FontIcon>
                  </div>
                  Add new item
                </div>
              </Link>
            </Col> : ""
          }

          {data.map(item => {
            return (<Col key={item.id} className="gutter-row col" span={4} style={{marginBottom: 20}}>
              <div className="gutter-box"><ItemCard data={item}/></div>
            </Col>)
          })}
        </Row>
        </InfiniteScroll>

      </div>
    )
  }
}