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, TextField, 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 '../style.scss';
import {appConfig} from "../../../config/app";

@inject('appstate')
@observer
export default class WaterBillConfirmation extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 1,
      searchText: '',
      tabSelected: '/app/service/ppob',
      returnDateDisabled:true,
      nominal: '',
      destinationNumber: '',
      open: false,
      openModal: false
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

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

  }

  handleOpen = () => {
    this.setState({open: true});
  };

  handleClose = () => {
    this.setState({open: false});
  };

  handleCloseModal = () => {
    this.setState({
      openModal: false
    })
  };

  handleOpenModal = () => {
    this.setState({
      open: false,
      openModal: true
    })
  };

  render() {

    const styles = {
      radioButton: {
        marginBottom: 16,
      },
    };

    const data = {
      service: 'PDAM Aetra Jakarta',
      number: '082211590346',
      realPrice: '205550 IDR',
      ntaPrice: '205550 IDR'
    };

    const actionsModals = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleCloseModal}
      />,
      <FlatButton
        label="Ok"
        primary={true}
        onClick={this.props.onContinue}
      />,
    ];

    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleClose}
      />,
      <FlatButton
        label="Continue"
        primary={true}
        onClick={this.handleOpenModal}
      />,
    ];

    return (
      <div>
          <div style={{padding: '14px'}}>
            <div className="row hover">
              <div className="col l2">
                <p>Service</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l9">
                <p>{data.service}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l2">
                <p>Customer Number</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l9">
                <p>{data.number}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l2">
                <p>Real Price</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l9">
                <p>{data.realPrice}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l2">
                <p>NTA Price</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l9">
                <p>{data.ntaPrice}</p>
              </div>
            </div>
            <div className="row">
              <div className="col l12">
                <p style={{color: '#F44336', margin: '10px', textAlign: 'center'}}>
                  Make sure the service and the customer number 
                  you entered is correct before processing the purchase.
                </p>
              </div>
            </div>
            <div className="row">
              <div className="col m10" />
              <div className="col m2">
                <RaisedButton label="Confirm" primary={true} onClick={this.handleOpen} style={{marginTop: '30px'}} icon={ <FontIcon className="material-icons">check</FontIcon>} />
              </div>
            </div>
          </div>
        <Dialog
          actions={actions}
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
          title="Warning"
          bodyStyle={{
            textAlign: 'center'
          }}
          titleStyle={{
            color: '#FFC107',
            textAlign: 'center'
          }}
          actionsContainerStyle={{

          }}
        >
           Your Balance will be cut off {data.realPrice}
        </Dialog>
        <Dialog
          title="Are you sure that all data is correct?"
          actions={actionsModals}
          modal={true}
          open={this.state.openModal}
        >
          Purchase request will be send and data can't be change again.
        </Dialog>
      </div>
    )
  }
}
