import React from 'react';
import {inject, observer} from 'mobx-react';
import {
    Divider
} from '@material-ui/core';
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox , DatePicker, Alert, Input ,Avatar} from 'antd';
import {startCase} from 'lodash';
import './style.scss';
import { withStyles } from '@material-ui/core/styles';
import get from 'lodash.get';
import MediaQuery from 'react-responsive';

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

@inject('appstate')
@observer
export class CheckoutVouchers extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 1,
    };
    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;
  }

  componentDidMount() {
    console.log(this.vouchersStore)
    // console.log("skuid",this.vouchersStore.skuId);
    // console.log("skuName",this.vouchersStore.skuName);
    // console.log("skuPrice",this.vouchersStore.skuPrice);
    // console.log("data",this.vouchersStore.dataItems);
  }

  render() {
    const {classes} = this.props;
    const logoUrl = (this.props.vouchersStore.dataItems.images.logo) ? get(this.vouchersStore.dataItems, 'images.logo', '') : 'http://lorempixel.com/400/200';

    let image = logoUrl;

    if (!image.includes('http')) {
      image = this.http.appendImagePath(image);
    }

    return (
      <div className="checkout-parent">
        <div className="upper-card">
          <Card>
            <div className="">
              <div style={{display:'flex',justifyContent:'center'}}>
                <h3 style={{fontSize:18}}>
                  Detail Pembelian
                </h3>
              </div>
            </div>
            <Divider component={"div"} className={classes.divider} />
            <div className="row" style={{marginTop:30}}>
              <div className="col s12 m5 l5">
                <div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
                  <img className={'imageCard'} src={image} />
                  {/* <Avatar size={74} src={this.http.appendImagePath(this.props.vouchersStore.dataItems.images.logo)} /> */}
                </div>
              </div>
              <div className="col s12 m7 l7">
                <div className={'right-container'}>
                  <Row>
                    <div className="col s12 m4">
                      <h3>Jenis Layanan</h3>
                    </div>
                    <MediaQuery query="(min-device-width: 800px)">
                      <div className="col s1 m1">
                        <h3>:</h3>
                      </div>
                    </MediaQuery>
                    <div className="col s12 m7">
                      <h3 style={{color:'#FF6F00'}}>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</h3>
                    </div>
                  </Row>
                  <Row>
                    <div className="col s12 m4">
                      <h3>Point</h3>
                    </div>
                    <MediaQuery query="(min-device-width: 800px)">
                      <div className="col s1 m1">
                        <h3>:</h3>
                      </div>
                    </MediaQuery>
                    <div className="col s12 m7">
                      <h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
                    </div>
                  </Row>
                </div>
              </div>
            </div>
          </Card>
        </div>
        <div className="bottom-card">
          <Card>
            <div className="row">
              <div style={{display:'flex',justifyContent:'space-between'}}>
                <h3 style={{color:''}}>Point</h3>
                <h3 style={{color:'#FF6F00'}}>{this.props.appstate.wallet.data.point || 0} Points</h3>
              </div>
            </div>
            <Divider component={"div"} className={classes.divider} />
            <div className="row">
              <div style={{display:'flex',justifyContent:'space-between'}}>
                <h3>Total Pembayaran Point</h3>
                <h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
              </div>
            </div>
          </Card>
        </div>
        <div className="row">
          {this.props.button()}
        </div>
      </div>
    )
  }
}

export default withStyles(styles)(CheckoutVouchers);