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 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 '../style.scss';
import {appConfig} from "../../../config/app";
import {Link} from 'react-router-dom';
import {LINKS} from "../../../routes";

@inject('appstate')
@observer
export default class Banned extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 0,
    };
    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.rewardStore = props.appstate.reward;
  }

  componentDidMount() {
    this.globalUI.openLoading();
    this.rewardStore.getRewardList().then(res => {
      this.globalUI.closeLoading();
    });
  }

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

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

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

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

  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});

  render() {

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

    return (
      <div className="row">
        <div className="col l12 m12 s12">
          <Card className="animated fadeIn cardLite">
            <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
              <ToolbarGroup>
                <SearchIcon style={{marginRight: 8, color: "#999"}}/>
                <TextField
                  hintText="Search Banned"
                  style={{fontSize: 14}}
                  hintStyle={{fontSize: 14}}
                  underlineShow={false}
                />
              </ToolbarGroup>
              <ToolbarGroup className="ToolbarGroupLast">
                <ToolbarSeparator/>
                <Link to={`${LINKS.REWARD}`}>
                  <RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New Reward" primary={true}/>
                </Link>
              </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'}}>ID</TableHeaderColumn>
                      <TableHeaderColumn className="TableHeaderColumnAkun" style={{height: 'auto'}}>Reward
                        Name</TableHeaderColumn>
                      <TableHeaderColumn className="TableHeaderColumnAkun" style={{height: 'auto'}}>Reward
                        Type</TableHeaderColumn>
                      <TableHeaderColumn className="TableHeaderColumnAkun"
                                         style={{height: 'auto', textAlign: 'right'}}>Action</TableHeaderColumn>
                    </TableRow>
                  </TableHeader>
                  <TableBody displayRowCheckbox={false}>
                    {!this.rewardStore.isRewardEmpty ? this.rewardStore.rewardList.map((item, index) => {
                        return (
                          <TableRow key={item.id}>
                            <TableRowColumn>
                              <Link
                                to={`${LINKS.REWARD}/${item.id}`}
                              >
                                {item.id.split('-')[0]}
                              </Link>
                            </TableRowColumn>
                            <TableRowColumn>{item.name}</TableRowColumn>
                            <TableRowColumn>{item.reward_type}</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>
          </Card>
        </div>
      </div>
    )
  }
}

