import {inject, observer} from "mobx-react";
import PropTypes from 'prop-types';
import React from "react";
import './style.scss';
import Button from '@material-ui/core/Button';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import {Divider} from "@material-ui/core";
import CheckoutVouchers from "../Checkout";
import PaymentVouchers from "../Payment";
import {LINKS} from "../../../routes";
import {notification, Modal} from "antd";
import FinishVouchers from "../Finish";
import { withStyles } from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import MediaQuery from 'react-responsive';

const confirm = Modal.confirm;

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
  divider: {
    marginBottom: 10,
    marginTop: 10,
  }
});

@inject('appstate')
@observer
export class VoucherStepper extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      finished: false,
      stepIndex: 0,
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;
    this.vouchersStore = props.appstate.vouchers;
  }

  componentWillMount() {
    if(!this.vouchersStore.dataItems.name){
      // alert('jalan')
      this.props.history.push(LINKS.DASHBOARD);
    }
    // alert('engga')
  }

  handleNext = () => {
    const {stepIndex} = this.state;

    if(stepIndex === 1){
      confirm({
        title: 'Anda yakin mau menukarkan voucher?',
        content: 'Sistem akan langsung memotong point anda ketika anda menekan tombol konfirmasi dibawah.',
        onOk: () => {
          this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
            .then(res => {
              const openNotificationWithIcon = (type) => {
                notification[type]({
                  message: 'Berhasil',
                  description: `Selamat anda telah mendapatkan vouchers ${this.vouchersStore.dataItems.name} - ${this.vouchersStore.skuName}`,
                  placement:'topRight',
                  duration: 5,
                });
              };
              this.globalUI.hideDialogLoading();
              // this.props.history.push(LINKS.TRANSACTION)
              openNotificationWithIcon('success');
              this.setState({
                stepIndex: stepIndex + 1,
                finished: stepIndex >= 2,
              });
            })
            .catch(err => {
              this.globalUI.openSnackbar(err.message);
              console.error(err, 'ini errornya');
            });
        },
        onCancel: () => {},
      });
    }else if(stepIndex === 2){
      this.props.history.push(LINKS.TRANSACTION);
    }else{
      this.setState({
        stepIndex: stepIndex + 1,
        finished: stepIndex >= 2,
      });
    }
  };

  handlePrev = () => {
    const {stepIndex} = this.state;
    if (stepIndex > 0) {
      this.setState({stepIndex: stepIndex - 1});
    }
  };

  renderButton = () => {
    const {classes} = this.props;
    return(
      <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: 12,}}>
        {/*<FlatButton*/}
          {/*label="Back"*/}
          {/*disabled={this.state.stepIndex === 2}*/}
          {/*onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev}*/}
          {/*style={{marginRight: 12}}*/}
        {/*/>*/}
        <Button disabled={this.state.stepIndex === 2} onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev} className={classes.button}>Back</Button>
        <Button variant="contained" color="primary" className={classes.button} onClick={this.handleNext}>
          {this.state.stepIndex === 2 ? 'Finish' : 'Next'}
        </Button>
        {/*<RaisedButton*/}
          {/*label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}*/}
          {/*primary={true}*/}
          {/*onClick={this.handleNext}*/}
        {/*/>*/}
      </div>
    );
  };

  getStepContent(stepIndex) {
    switch (stepIndex) {
      case 0:
        return <CheckoutVouchers button={this.renderButton} vouchersStore={this.vouchersStore} />;
      case 1:
        return <PaymentVouchers button={this.renderButton} vouchersStore={this.vouchersStore}/>;
      case 2:
        return <FinishVouchers button={this.renderButton}/>;
      default:
        return 'You\'re a long way from home sonny jim!';
    }
  }

  render() {
    const {finished, stepIndex} = this.state;
    const {classes} = this.props;
    const contentStyle = {margin: '0 16px'};

    if(!this.vouchersStore.dataItems.name){
      return <div></div>
    }

    return(
      <div className={'stepper'}>
        {/*<div className={'divider-container'}>*/}
          {/*<FlatButton*/}
            {/*className="headerMenu"*/}
            {/*hoverColor="#f1f5f9"*/}
            {/*style={{ background: '#ffffff00' }}*/}
            {/*onClick={() => this.props.history.goBack()}*/}
            {/*label="Back"*/}
            {/*primary={true}*/}
            {/*icon={<NavigationArrowBack />}*/}
          {/*/>*/}
          {/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
        {/*</div>*/}
        <div className={'stepper-container'}>
          <MediaQuery query="(min-device-width: 1224px)">
            <Stepper activeStep={stepIndex}>
              <Step>
                <StepLabel>Checkout your Voucher</StepLabel>
              </Step>
              <Step>
                <StepLabel>Process your Payment</StepLabel>
              </Step>
              <Step>
                <StepLabel>Finish</StepLabel>
              </Step>
            </Stepper>
          </MediaQuery>
          <MediaQuery query="(max-device-width: 1224px)">
            <Stepper activeStep={stepIndex}>
              <Step>
                <StepLabel></StepLabel>
              </Step>
              <Step>
                <StepLabel></StepLabel>
              </Step>
              <Step>
                <StepLabel></StepLabel>
              </Step>
            </Stepper>
          </MediaQuery>
          <Divider component="div" className={classes.divider} />
          {/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
          <div style={contentStyle}>
            {this.getStepContent(stepIndex)}
          </div>
        </div>
      </div>
    );
  }

}

VoucherStepper.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(VoucherStepper);
