import React from 'react';
import {observer, inject} from 'mobx-react';
import bind from 'bind-decorator';
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
} from 'material-ui';
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';
import Chat from './Chat';
import Notification from '../Notification';

export const MESSAGE_TABS = {
  CHAT: 'chat',
  NOTIFICATION: 'notification',
};

@inject('appstate')
@observer
export default class InboxComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.taskStore = props.appstate.task;
    this.state = {
      tabSelected: MESSAGE_TABS.CHAT,
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;
    this.messageStore = props.appstate.message;
  }

  componentDidMount() {
    this.props.history.push(LINKS.INBOX +`/${this.messageStore.selectedTab}`)
    // const {match: {params: {tab: tabSelected}}} = this.props;
    // console.log(this.props);
    // if (!tabSelected) {
    //   console.log('kmlkmlml')
    //   this.props.history.push(LINKS.INBOX + "/chat");
    //   this.messageStore.changeTab('chat');
    // } else {
    //   this.handleChange(tabSelected);
    // }
    // console.log(this.globalUI.storeTabSelected)

  }

  handleChange = (tabSelected) => {
    this.setState({
      tabSelected: tabSelected,
    });
    this.props.history.push(LINKS.INBOX+'/'+tabSelected);
    this.messageStore.changeTab(tabSelected)
  };

  getContent() {
    switch (this.messageStore.selectedTab) {
      case MESSAGE_TABS.NOTIFICATION:
        return  <Notification historyPush={this.props.history.push}/>
      case MESSAGE_TABS.CHAT:
        return <Chat history={this.props.history}/>
      default:
        return  <Chat history={this.props.history}/>
    }
  }

  render() {

    return (
      <div className="inbox containerMiddle">
        <div className="row no-margin" style={{marginBottom:40}}>
          <div className="col l12 m12 s12">
            <Tabs
              value={this.state.tabSelected}
              onChange={this.handleChange}
              inkBarStyle={{background: 'transparent'}}
              className="tabsAkun"
              style={{background: 'transparent'}}
            >
              <Tab label="Chat" value="chat"
                   className={(this.messageStore.selectedTab === 'chat') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              </Tab>
              <Tab label="Notification" value="notification"
                   className={(this.messageStore.selectedTab === 'notification') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              </Tab>

            </Tabs>

            {this.getContent()}
          </div>
        </div>
      </div>
    )
  }
}
