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,
  RadioButton, RadioButtonGroup,
  Tabs, Tab,
  DropDownMenu
} 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 '../style.scss';
import {appConfig} from "../../../config/app";

import PhoneBill from './PhoneBill';
import PhoneBillConfirmation from './PhoneBillConfirmation';
import PrepaidElectricity from './PrepaidElectricity';
import PrepaidElectricityConfirmation from './PrepaidElectricityConfirmation';
import PostpaidElectricity from './PostpaidElectricity';
import PostpaidElectricityConfirmation from './PostpaidElectricityConfirmation';
import TelephoneBill from './TelephoneBill';
import TelephoneBillConfirmation from './TelephoneBillConfirmation';
import InternetBill from './InternetBill';
import InternetBillConfirmation from './InternetBillConfirmation';
import CableTVBill from './CableTVBill';
import CableTVBillConfirmation from './CableTVBillConfirmation';
import WaterBill from './WaterBill';
import WaterBillConfirmation from './WaterBillConfirmation';
import MultifinanceBill from './MultifinanceBill';
import MultifinanceBillConfirmation from './MultifinanceBillConfirmation';
import BPJS from './BPJS';
import BPJSConfirmation from './BPJSConfirmation';
import SnackbarMessage from '../SnackbarMessage';

@inject('appstate')
@observer
export default class PPOB extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      valuePPOB: 1,
      searchText: '',
      tabSelected: '/app/service/ppob',
      valuePhone: 0,
      valuePrePLN: 0,
      valuePostPLN: 0,
      valueTelephone: 0,
      valueInternet: 0,
      valueTV: 0,
      valueWater: 0,
      valueMultifinance: 0,
      valueBPJS: 0,
      openSnackbar: false
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

  componentDidMount() {
    console.log('Profile loaded!');

  }

  handleClickFindPhone = () => {
    this.setState({
      valuePhone: 1
    })
  };

  handleClickBackPhone = () => {
    this.setState({
      valuePhone: 0
    })
  };

  handleContinuePhone = () => {
    this.setState({
      valuePhone: 0,
      openSnackbar: true
    })
  };

  handleClickFindPrePLN = () => {
    this.setState({
      valuePrePLN: 1
    })
  };

  handleClickBackPrePLN = () => {
    this.setState({
      valuePrePLN: 0
    })
  };

  handleContinuePrePLN = () => {
    this.setState({
      valuePrePLN: 0,
      openSnackbar: true
    })
  };

  handleClickFindPostPLN = () => {
    this.setState({
      valuePostPLN: 1
    })
  };

  handleClickBackPostPLN = () => {
    this.setState({
      valuePostPLN: 0
    })
  };

  handleContinuePostPLN = () => {
    this.setState({
      valuePostPLN: 0,
      openSnackbar: true
    })
  };

  handleClickFindTelephone = () => {
    this.setState({
      valueTelephone: 1
    })
  };

  handleClickBackTelephone = () => {
    this.setState({
      valueTelephone: 0
    })
  };

  handleContinueTelephone = () => {
    this.setState({
      valueTelephone: 0,
      openSnackbar: true
    })
  };

  handleClickFindInternet = () => {
    this.setState({
      valueInternet: 1
    })
  };

  handleClickBackInternet = () => {
    this.setState({
      valueInternet: 0
    })
  };

  handleContinueInternet = () => {
    this.setState({
      valueInternet: 0,
      openSnackbar: true
    })
  };

  handleClickFindTV = () => {
    this.setState({
      valueTV: 1
    })
  };

  handleClickBackTV = () => {
    this.setState({
      valueTV: 0
    })
  };

  handleContinueTV = () => {
    this.setState({
      valueTV: 0,
      openSnackbar: true
    })
  };

  handleClickFindWater = () => {
    this.setState({
      valueWater: 1
    })
  };

  handleClickBackWater = () => {
    this.setState({
      valueWater: 0
    })
  };

  handleContinueWater = () => {
    this.setState({
      valueWater: 0,
      openSnackbar: true
    })
  };

  handleClickFindMultifinance = () => {
    this.setState({
      valueMultifinance: 1
    })
  };

  handleClickBackMultifinance = () => {
    this.setState({
      valueMultifinance: 0
    })
  };

  handleContinueMultifinance = () => {
    this.setState({
      valueMultifinance: 0,
      openSnackbar: true
    })
  };

  handleClickFindBPJS = () => {
    this.setState({
      valueBPJS: 1
    })
  };

  handleClickBackBPJS = () => {
    this.setState({
      valueBPJS: 0
    })
  };

  handleContinueBPJS = () => {
    this.setState({
      valueBPJS: 0,
      openSnackbar: true
    })
  };

  handleCloseSnackbar = () => {
    this.setState({
      openSnackbar: false
    })
  };

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

  render() {

    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

    const colors = [
      'Jakarta - Soekarno - Hatta (CGK)',
      'Bali',
      'Surabaya',
      'Yogyakarta',
      'Aceh',
      'Kalimantan',
      'Medan',
      'Papua',
    ];

    const items = [
      <MenuItem key={1} value={1} primaryText="All Maskapai"/>,
      <MenuItem key={2} value={2} primaryText="Air Asia"/>,
      <MenuItem key={3} value={3} primaryText="Weeknights"/>,
      <MenuItem key={4} value={4} primaryText="Weekends"/>,
      <MenuItem key={5} value={5} primaryText="Weekly"/>,
    ];

    const PPOBType = [
      <MenuItem value={1} primaryText="Phone Bill"/>,
      <MenuItem value={2} primaryText="Prepaid Electricity Bill"/>,
      <MenuItem value={3} primaryText="Postpaid Electricity Bill"/>,
      <MenuItem value={4} primaryText="Telephone Bill"/>,
      <MenuItem value={5} primaryText="Internet Bill"/>,
      <MenuItem value={6} primaryText="Cable TV Bill"/>,
      <MenuItem value={7} primaryText="Water Bill"/>,
      <MenuItem value={8} primaryText="Multifinance"/>,
      <MenuItem value={9} primaryText="BPJS"/>,
    ];

    return (
      <div className="row">
        <div className="col s12">
          <Card className="animated fadeIn cardLite">
            <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
              <ToolbarGroup>
                {(this.state.valuePPOB == 1 && this.state.valuePhone == 0) ?
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                                text="Phone Bill Payment"/> : ""}
                {(this.state.valuePPOB == 1 && this.state.valuePhone == 1) ?
                  <ToolbarGroup><IconButton iconClassName="material-icons" tooltip="Back" style={{marginLeft: '0px'}}
                                            onClick={this.handleClickBackPhone}>arrow_back</IconButton><ToolbarTitle
                    style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                    text="Confirmation Phone Bill Payment"/></ToolbarGroup> : ""}
                {(this.state.valuePPOB == 2 && this.state.valuePrePLN == 0) ?
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                                text="Prepaid Electricity Payment"/> : ""}
                {(this.state.valuePPOB == 2 && this.state.valuePrePLN == 1) ?
                  <ToolbarGroup><IconButton iconClassName="material-icons" tooltip="Back" style={{marginLeft: '0px'}}
                                            onClick={this.handleClickBackPrePLN}>arrow_back</IconButton><ToolbarTitle
                    style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                    text="Confirmation Prepaid Electricity Payment"/></ToolbarGroup> : ""}
                {(this.state.valuePPOB == 3 && this.state.valuePostPLN == 0) ?
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                                text="Postpaid Electricity Payment"/> : ""}
                {(this.state.valuePPOB == 3 && this.state.valuePostPLN == 1) ?
                  <ToolbarGroup><IconButton iconClassName="material-icons" tooltip="Back" style={{marginLeft: '0px'}}
                                            onClick={this.handleClickBackPostPLN}>arrow_back</IconButton><ToolbarTitle
                    style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                    text="Confirmation Postpaid Electricity Payment"/></ToolbarGroup> : ""}
                {(this.state.valuePPOB == 4 && this.state.valueTelephone == 0) ?
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                                text="Telephone Bill Payment"/> : ""}
                {(this.state.valuePPOB == 4 && this.state.valueTelephone == 1) ?
                  <ToolbarGroup><IconButton iconClassName="material-icons" tooltip="Back" style={{marginLeft: '0px'}}
                                            onClick={this.handleClickBackTelephone}>arrow_back</IconButton><ToolbarTitle
                    style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                    text="Confirmation Telephone Bill Payment"/></ToolbarGroup> : ""}
                {(this.state.valuePPOB == 5 && this.state.valueInternet == 0) ?
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                                text="Internet Bill Payment"/> : ""}
                {(this.state.valuePPOB == 5 && this.state.valueInternet == 1) ?
                  <ToolbarGroup><IconButton iconClassName="material-icons" tooltip="Back" style={{marginLeft: '0px'}}
                                            onClick={this.handleClickBackInternet}>arrow_back</IconButton><ToolbarTitle
                    style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                    text="Confirmation Internet Bill Payment"/></ToolbarGroup> : ""}
                {(this.state.valuePPOB == 6 && this.state.valueTV == 0) ?
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                                text="Cable TV Bill Payment"/> : ""}
                {(this.state.valuePPOB == 6 && this.state.valueTV == 1) ?
                  <ToolbarGroup><IconButton iconClassName="material-icons" tooltip="Back" style={{marginLeft: '0px'}}
                                            onClick={this.handleClickBackTV}>arrow_back</IconButton><ToolbarTitle
                    style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                    text="Confirmation Cable TV Bill Payment"/></ToolbarGroup> : ""}
                {(this.state.valuePPOB == 7 && this.state.valueWater == 0) ?
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                                text="Water Bill Payment"/> : ""}
                {(this.state.valuePPOB == 7 && this.state.valueWater == 1) ?
                  <ToolbarGroup><IconButton iconClassName="material-icons" tooltip="Back" style={{marginLeft: '0px'}}
                                            onClick={this.handleClickBackWater}>arrow_back</IconButton><ToolbarTitle
                    style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                    text="Confirmation Water Bill Payment"/></ToolbarGroup> : ""}
                {(this.state.valuePPOB == 8 && this.state.valueMultifinance == 0) ?
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                                text="Multifinance Bill Payment"/> : ""}
                {(this.state.valuePPOB == 8 && this.state.valueMultifinance == 1) ?
                  <ToolbarGroup><IconButton iconClassName="material-icons" tooltip="Back" style={{marginLeft: '0px'}}
                                            onClick={this.handleClickBackMultifinance}>arrow_back</IconButton><ToolbarTitle
                    style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                    text="Confirmation Multifinance Bill Payment"/></ToolbarGroup> : ""}
                {(this.state.valuePPOB == 9 && this.state.valueBPJS == 0) ?
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text="BPJS Payment"/> : ""}
                {(this.state.valuePPOB == 9 && this.state.valueBPJS == 1) ?
                  <ToolbarGroup><IconButton iconClassName="material-icons" tooltip="Back" style={{marginLeft: '0px'}}
                                            onClick={this.handleClickBackBPJS}>arrow_back</IconButton><ToolbarTitle
                    style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                    text="Confirmation BPJS Payment"/></ToolbarGroup> : ""}
              </ToolbarGroup>
              {(this.state.valuePhone == 1 || this.state.valuePrePLN == 1 || this.state.valuePostPLN == 1 || this.state.valueTelephone == 1 || this.state.valueInternet == 1 || this.state.valueTV == 1 || this.state.valueWater == 1 || this.state.valueMultifinance == 1 || this.state.valueBPJS == 1) ? "" :
                <ToolbarGroup><FontIcon className="muidocs-icon-custom-sort"/><ToolbarSeparator/><DropDownMenu
                  value={this.state.valuePPOB} onChange={this.handleChange}>{PPOBType}</DropDownMenu></ToolbarGroup>}
            </Toolbar>
            <Divider/>
            {(this.state.valuePPOB == 1 && this.state.valuePhone == 0) ?
              <PhoneBill onClickFind={this.handleClickFindPhone}/> : ""}
            {(this.state.valuePPOB == 1 && this.state.valuePhone == 1) ?
              <PhoneBillConfirmation onClickBack={this.handleClickBackPhone}
                                     onContinue={this.handleContinuePhone}/> : ""}
            {(this.state.valuePPOB == 2 && this.state.valuePrePLN == 0) ?
              <PrepaidElectricity onClickFind={this.handleClickFindPrePLN}/> : ""}
            {(this.state.valuePPOB == 2 && this.state.valuePrePLN == 1) ?
              <PrepaidElectricityConfirmation onClickBack={this.handleClickBackPrePLN}
                                              onContinue={this.handleContinuePrePLN}/> : ""}
            {(this.state.valuePPOB == 3 && this.state.valuePostPLN == 0) ?
              <PostpaidElectricity onClickFind={this.handleClickFindPostPLN}/> : ""}
            {(this.state.valuePPOB == 3 && this.state.valuePostPLN == 1) ?
              <PostpaidElectricityConfirmation onClickBack={this.handleClickBackPostPLN}
                                               onContinue={this.handleContinuePostPLN}/> : ""}
            {(this.state.valuePPOB == 4 && this.state.valueTelephone == 0) ?
              <TelephoneBill onClickFind={this.handleClickFindTelephone}/> : ""}
            {(this.state.valuePPOB == 4 && this.state.valueTelephone == 1) ?
              <TelephoneBillConfirmation onClickBack={this.handleClickBackTelephone}
                                         onContinue={this.handleContinueTelephone}/> : ""}
            {(this.state.valuePPOB == 5 && this.state.valueInternet == 0) ?
              <InternetBill onClickFind={this.handleClickFindInternet}/> : ""}
            {(this.state.valuePPOB == 5 && this.state.valueInternet == 1) ?
              <InternetBillConfirmation onClickBack={this.handleClickBackInternet}
                                        onContinue={this.handleContinueInternet}/> : ""}
            {(this.state.valuePPOB == 6 && this.state.valueTV == 0) ?
              <CableTVBill onClickFind={this.handleClickFindTV}/> : ""}
            {(this.state.valuePPOB == 6 && this.state.valueTV == 1) ?
              <CableTVBillConfirmation onClickBack={this.handleClickBackTV} onContinue={this.handleContinueTV}/> : ""}
            {(this.state.valuePPOB == 7 && this.state.valueWater == 0) ?
              <WaterBill onClickFind={this.handleClickFindWater}/> : ""}
            {(this.state.valuePPOB == 7 && this.state.valueWater == 1) ?
              <WaterBillConfirmation onClickBack={this.handleClickBackWater}
                                     onContinue={this.handleContinueWater}/> : ""}
            {(this.state.valuePPOB == 8 && this.state.valueMultifinance == 0) ?
              <MultifinanceBill onClickFind={this.handleClickFindMultifinance}/> : ""}
            {(this.state.valuePPOB == 8 && this.state.valueMultifinance == 1) ?
              <MultifinanceBillConfirmation onClickBack={this.handleClickBackMultifinance}
                                            onContinue={this.handleContinueMultifinance}/> : ""}
            {(this.state.valuePPOB == 9 && this.state.valueBPJS == 0) ?
              <BPJS onClickFind={this.handleClickFindBPJS}/> : ""}
            {(this.state.valuePPOB == 9 && this.state.valueBPJS == 1) ?
              <BPJSConfirmation onClickBack={this.handleClickBackBPJS} onContinue={this.handleContinueBPJS}/> : ""}
            <SnackbarMessage message='Purchase Succeed' open={this.state.openSnackbar}
                             closeSnackbar={this.handleCloseSnackbar}/>
          </Card>
        </div>
      </div>
    )
  }
}
