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,
  Tabs, Tab,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  MenuItem,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  RadioButton,
  TextField,
  Paper,
  RadioButtonGroup
} from 'material-ui';
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 NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import NavigationCancel from 'material-ui/svg-icons/navigation/cancel';
import CommunicationNoSim from 'material-ui/svg-icons/communication/no-sim';
import DepositWithdraw from './DepositWithdraw';
import BookingPayment from './BookingPayment';

import '../style.scss';
import {appConfig} from "../../../config/app";
import {DIALOG} from "../../../stores/global_ui";
import {LINKS} from "../../../routes";
import {Link} from "react-router-dom";
import NumberFormat from 'react-number-format';

@inject('appstate')
@observer
export default class WalletComponentDetail extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 1,
      searchText: '',
      slideIndex: 0
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.transactionStore = props.appstate.transaction;
    this.globalUI = props.appstate.globalUI;
  }

  componentDidMount() {
    this.globalUI.openLoading();
    this.transactionStore.getById(this.props.match.params.id).then(res => {
      this.globalUI.closeLoading();
    });
  }

  componentWillMount(){
    this.transactionStore.reset();
  }

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

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

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

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

  render() {
    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

    return (
      <div className="customerDetail containerMiddle animated fadeIn">
        <div style={{marginBottom: '10px', marginLeft: '-15px'}}>
          <FlatButton
            className="headerMenu"
            hoverColor="#f1f5f9"
            style={{background: '#ffffff00'}}
            onClick={() => this.props.history.push(LINKS.WALLET)}
            label="Back"
            primary={true}
            icon={<NavigationArrowBack/>}
          />
        </div>

        {(this.transactionStore.detail.type == 'deposit' || this.transactionStore.detail.type == 'withdraw')?<DepositWithdraw/> : '' }
        {(this.transactionStore.detail.type == 'payment' || this.transactionStore.detail.type == 'booking'|| this.transactionStore.detail.type == 'cancel packages')?<BookingPayment/> : '' }
      </div>
    )
  }
}
