import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  AutoComplete,
  CardText,
  FlatButton,
  List,
  ListItem,
  Divider,
  Snackbar,
  Tabs, Tab,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  MenuItem,
  Toggle,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  RadioButton,
  TextField,
  Paper,
  RadioButtonGroup,Dialog
} from 'material-ui';

import ContentAdd from 'material-ui/svg-icons/content/add';
import { Modal, Button } from 'antd';
import {yellow500} from 'material-ui/styles/colors';
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 DeleteIcon from 'material-ui/svg-icons/action/delete';
import ImageEdit from 'material-ui/svg-icons/image/edit';
import EmptyComponent from '../EmptyComponent';
import {Link} from 'react-router-dom';
import {LINKS} from "../../routes";
// import './style.scss';
import {appConfig} from "../../config/app";
import NumberFormat from 'react-number-format';
import LoadingDialog from "../LoadingDialog";
import Loader from 'react-loader-advanced';
const styles = {
  smallIcon: {
    width: 36,
    height: 36,
  },
  mediumIcon: {
    width: 48,
    height: 48,
  },
  largeIcon: {
    width: 60,
    height: 60,
  },
  small: {
    width: 72,
    height: 72,
    padding: 16,
  },
  medium: {
    width: 96,
    height: 96,
    padding: 24,
  },
  large: {
    width: 120,
    height: 120,
    padding: 30,
  },
};
@inject('appstate')
@observer
export default class StoreComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.entitiesStore = props.appstate.entities;
    this.state = {
      snackbarOpen: false,
      snackbarMessage: '',
      entity : '',
      visible: false,
      openedDialog:false
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;

  }

  componentDidMount() {
    this.globalUI.openLoading();
    this.entitiesStore.getAll().then(res => {
      console.log(res,"res");
      this.globalUI.closeLoading();
      this.setState({items:res})
    });
    // setTimeout(() => this.globalUI.closeLoading(), 1500);
  }

  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  hideModal = () => {
    this.setState({
      visible: false,
    });
  }

  openModal = () => {
    this.setState({
      openedDialog:true
    })
  }

  closeModal = () => {
    this.setState({
      openedDialog:false
    })
  }

  handleAccept = () => {
    // this.setState({
    //   expanded: 'x!0-2#',
    //   snackbarMessage: 'Input Accepted',
    //   snackbarOpen: true,
    // });
    console.log(this.state.entity);
    if(this.state.entity == ""){
      this.setState({
        visible: true
      })
      console.log('kosong')
    }
    else {
      console.log('data');
      this.entitiesStore.create({name:this.state.entity}).then(res=>{
        console.log(this.state.entity);
        this.globalUI.openSnackbar("Success Added New Admin");
        this.setState({
          openedDialog:false
        })
      });
    }

  };

  handleDecline = (task) => {
    this.setState({
      expanded: 'x!0-2#',
      snackbarMessage: task + ' Declined',
      snackbarOpen: true,
    })
  };

  handleClose = () => {
    this.setState({
      snackbarOpen: false
    })
  };

  // handleChange = (event, index) => this.setState({entity:event.target.value});

  handleChange = (event) => {
    this.setState({
      entity: event.target.value,
    });
  };

  render() {

    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        style={{marginRight: 10}}
        onClick={this.closeModal}
      />,
      <RaisedButton
        label="New Entity"
        primary={true}
        onClick={() => this.handleAccept()}
      />,
    ];

    return (
      <div className="member containerMiddle">
        <div style={{marginBottom: '16px'}}>
          <h3 className="headerMenu">Entities</h3>
        </div>
        <Card className="animated fadeIn cardLite">
          <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
            <ToolbarGroup>
              <SearchIcon style={{marginRight: 8, color: "#999"}}/>
              <TextField
                hintText="Search All"
                style={{fontSize: 14}}
                hintStyle={{fontSize: 14}}
                underlineShow={false}
              />
              {/*<TextField*/}
                {/*hintText="Input New Entity"*/}
                {/*style={{fontSize: 14}}*/}
                {/*value={this.state.entity}*/}
                {/*hintStyle={{fontSize: 14}}*/}
                {/*underlineShow={false}*/}
                {/*onChange={this.handleChange}*/}
              {/*/>*/}
              {/*<IconButton*/}
                {/*onClick={this.handleAccept}>*/}
                {/*<AddIcon />*/}
              {/*</IconButton>*/}
            </ToolbarGroup>
            <ToolbarGroup className="ToolbarGroupLast">
              <ToolbarSeparator/>
                <RaisedButton className="ToolbarGroupLastButton" primary={true} onClick={this.openModal} icon={<AddIcon/>}
                              label="New Entity"/>
            </ToolbarGroup>
          </Toolbar>
          <Divider/>
          <div>
            <Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog />} messageStyle={{textAlign:'center'}} backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
              <Table selectable={false}>
                <TableHeader  displaySelectAll={false}
                              adjustForCheckbox={false}
                              enableSelectAll={false}>
                  <TableRow style={{height:38, background:'#f6f9fc'}}>
                    <TableHeaderColumn className="TableHeaderColumnAkun" style={{height:'auto'}}>No.</TableHeaderColumn>
                    <TableHeaderColumn className="TableHeaderColumnAkun" style={{height:'auto'}}>Entity</TableHeaderColumn>
                    <TableHeaderColumn className="TableHeaderColumnAkun" style={{height:'auto'}}>Date</TableHeaderColumn>
                  </TableRow>
                </TableHeader>
                <TableBody displayRowCheckbox={false}>
                  {
                    (!this.entitiesStore.isEmpty) ?
                      this.entitiesStore.entities.map((item, index) => {
                        return (
                          <TableRow>
                            <TableRowColumn>{index+1}</TableRowColumn>
                            <TableRowColumn>{item.name}</TableRowColumn>
                            <TableRowColumn>{moment(item.created_at).format('MMMM Do YYYY, H:mm:ss')}</TableRowColumn>
                          </TableRow>
                        );
                      }) : <EmptyComponent type="empty" header="" content="There is no data in sight"/>
                  }
                </TableBody>
              </Table>
            </Loader>
          </div>
        </Card>
        <Modal
          title="Modal"
          visible={this.state.visible}
          onOk={this.hideModal}
          zIndex={1000000}
          footer={[
            <Button key="Ok" type="primary" onClick={this.hideModal}>
              Submit
            </Button>,
          ]}
        >
          <p>Your Data is empty</p>
        </Modal>
        <Dialog
          modal={true}
          open={this.state.openedDialog}
          actions={actions}
        >
          <div style={{padding: 20}}>

            <div className="row">
              <div className="col s12 m6 l6">
                <p className="label-form">First Name</p>
                <TextField
                hintText="Asa Creative"
                style={{fontSize: 14}}
                value={this.state.entity}
                onChange={this.handleChange} />
              </div>
            </div>

          </div>
        </Dialog>
      </div>
    )
  }
}
