import {inject, observer} from "mobx-react";
import React from "react";
import './style.scss';
import {
  Step,
  Stepper,
  StepLabel,
} from 'material-ui/Stepper';
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";
import CheckoutVouchers from "../Checkout";
import PaymentVouchers from "../Payment";
import {LINKS} from "../../../routes";
import {notification, Modal} from "antd";
import FinishVouchers from "../Finish";

const confirm = Modal.confirm;

@inject('appstate')
@observer
export default class VoucherStepperComponent 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.VOUCHERS);
    }
    // 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 = () => {
    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}}
        />
        <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 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'}>
          <Stepper activeStep={stepIndex}>
            <Step>
              <StepLabel>Checkout your Voucher</StepLabel>
            </Step>
            <Step>
              <StepLabel>Process your Payment</StepLabel>
            </Step>
            <Step>
              <StepLabel>Finish</StepLabel>
            </Step>
          </Stepper>
          <Divider style={{marginBottom:10,marginTop:10}} />
          <div style={contentStyle}>
            {finished ? (
              <p>
                <a
                  href="#"
                  onClick={(event) => {
                    event.preventDefault();
                    this.setState({stepIndex: 0, finished: false});
                  }}
                >
                  Click here
                </a> to reset the example.
              </p>
            ) : (
              <div>
                <p>{this.getStepContent(stepIndex)}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

}
