import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Card,
  FlatButton,
  Divider,
  RaisedButton,
  Toolbar,
  ToolbarGroup,
  ToolbarSeparator,
  IconButton,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  TextField,
  Dialog,
} from 'material-ui';
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/content/delete-sweep';
import EmptyComponent from '../EmptyComponent';
import LoadingDialog from "../LoadingDialog";
import Loader from 'react-loader-advanced';
import moment from 'moment';
import {DIALOG} from "../../stores/global_ui";
import DialogCreate from './Dialog';

@inject('appstate')
@observer
export default class Categories extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 0,
      edit : false,
      defaultValue : {}
    };
    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.globalUI = props.appstate.globalUI;
    this.tagStore = props.appstate.tags;
  }

  componentDidMount() {
    this.globalUI.openLoading();
    this.tagStore.getAll().then(res => {
      this.globalUI.closeLoading();
    });
  }

  handleUpdateInput = (searchText) => {
    this.setState({
      searchText: searchText,
    });
  };

  handleNewRequest = () => {
    this.setState({
      searchText: '',
    });
  };

  tabsHandleChange = (value) => {
    this.setState({
      slideIndex: value,
    });
  };

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

  editData = (data)=>{

    this.setState({
      edit : true,
      defaultValue : data
    },()=>{
      this.globalUI.showDialog(DIALOG.SETTING.TAGS);
    })
  };


  handleOpenDialog = () => {
    this.setState({
      edit : false
    })
    this.globalUI.showDialog(DIALOG.SETTING.TAGS);
  }

  handleClickDelete = (id) => {
    this.tagStore.delete(id).then(res=>{
      this.setState({
        openedDelete: false,
        openSnackbarDelete: true
      });
      this.tagStore.getAll();
      this.globalUI.openSnackbar("Successful Deleted Existing Category");

    }).catch(err=>{
      console.log(err);
      this.globalUI.openSnackbar("Something Wrong :(");

    });
  }

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

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

  search = (event)=>{
    if(event.target.value.length == 0){
      this.tagStore.isSearching = false;
    }
    else{
      this.tagStore.isSearching = true;
      this.tagStore.search(event.target.value);
    }
  }

  render() {

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

    return (

      <Card className="animated fadeIn cardLite">
        <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
          <ToolbarGroup>
            <SearchIcon style={{marginRight: 8, color: "#999"}}/>
            <TextField
              hintText="Search tag"
              style={{fontSize: 14}}
              hintStyle={{fontSize: 14}}
              underlineShow={false}
              onChange={this.search}
            />
          </ToolbarGroup>
          <ToolbarGroup className="ToolbarGroupLast">
            <ToolbarSeparator/>
            <RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New Tag"
                          primary={true} onClick={this.handleOpenDialog}/>
          </ToolbarGroup>
        </Toolbar>
        <Divider/>
        <div style={{paddingBottom: 5}}>
          <Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
                  messageStyle={{textAlign: 'center'}} backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
            <Table selectable={false}
                   fixedHeader={true}
                   height={'calc(100vh - 280px)'}>
              <TableHeader displaySelectAll={false}
                           adjustForCheckbox={false}
                           enableSelectAll={false}>
                <TableRow style={{height: 38, background: '#f6f9fc'}}>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Name</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun" style={{height: 'auto'}}>Created At</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto', textAlign: 'right'}}>Action</TableHeaderColumn>
                </TableRow>
              </TableHeader>
              <TableBody displayRowCheckbox={false}>

                {(!this.tagStore.isEmpty) ? (this.tagStore.isSearching ? this.tagStore.dataFiltered : this.tagStore.data).map((item, index) => {
                    return (
                      <TableRow key={item.id}>
                        <TableRowColumn>
                          <div style={{color : '#6772e5',cursor : 'pointer'}} onClick={()=>this.editData(item)}>
                            {item.name}
                          </div>
                        </TableRowColumn>
                        <TableRowColumn>{moment(item.created_at).format('DD MMMM YYYY, HH:mm:ss')}</TableRowColumn>
                        <TableRowColumn style={{textAlign: "right"}}><IconButton
                          tooltip="Delete"
                          className="ToolbarGroupLastButton"
                          onClick={() => this.deleteClicked(item.id)}><DeleteIcon color="#999999"
                                                                                     className="iconSmallButton"/></IconButton></TableRowColumn>
                      </TableRow>
                    );
                  }) :
                  <TableRow>
                    <TableRowColumn colSpan="4" style={{}}>
                      <EmptyComponent type="empty" header="" content="There is no data in sight"/>
                    </TableRowColumn>
                  </TableRow>
                }
              </TableBody>
            </Table>
          </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>
        {this.state.edit ? <DialogCreate mode="update" defaultValue={Object.assign({},this.state.defaultValue)}/> : <DialogCreate mode="create"/>}

      </Card>
    )
  }
}

