import React from 'react';
import {inject, observer} from 'mobx-react';
import {
    FlatButton,
    Divider as DividerMaterialUI
} from 'material-ui';
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox , DatePicker, Alert, Input ,Avatar, Collapse, notification, Divider } from 'antd';
import {startCase} from 'lodash';
import LoadingDialog from "../../LoadingDialog";
import Loader from 'react-loader-advanced';
// import './style.scss';
import {DIALOG} from "../../../stores/global_ui";
import EmptyComponent from '../../EmptyComponent';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import {LINKS} from "../../../routes";
import {APP_TYPE} from "../../../config/app";

const Panel = Collapse.Panel;

@inject('appstate')
@observer
export default class PaymentVouchers 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() {

  }

  render() {
    const openNotificationWithIcon = (type) => {
        notification[type]({
          message: 'Berhasil',
          description: 'Selamat anda telah mendapatkan vouchers sebesar KFC Rp. 50,000',
          placement:'topRight',
          duration: 5,
        });
      };

      const price = (+this.props.vouchersStore.skuPrice).toFixed(0);
      const qty = 1;
      const total = price * qty;

    let applicationName = 'Giift';
    let applicationLogo = 'http://giift.asacreative.com/giift_logo_wide.4d15de72.png';
    if(APP_TYPE === 'btn') {
      applicationName = 'BTN';
      applicationLogo = 'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png';
    }

    return(
      <div>
        <div className="row">
          <Collapse bordered={true}>
            <Panel style={{backgroundColor:'white'}} showArrow={false} header={
              <div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}>
                <h3 style={{color:'#FF6F00'}}>
                  {price} Points
                </h3>
                <h3 style={{color:'#6772e5'}}>
                  Detail  Tagihan
                </h3>
              </div>
            } key="1">
              <Row>
                <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
                  <p>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</p>
                  <p>{price} Points</p>
                </div>
              </Row>
              <Row>
                <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
                  <p>{qty} x  {price} Points</p>
                  <p>{total} Points</p>
                </div>
              </Row>
              <Divider dashed={true} />
              <Row>
                <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
                  <p>Tagihan</p>
                  <p>{total} Points</p>
                </div>
              </Row>
            </Panel>
          </Collapse>
        </div>
        <div className="row">
          <Card  title={<div style={{display:'flex',justifyContent:'space-between'}}>
            <div>
              <h3 style={{fontSize:20}}>
                Points {applicationName}
              </h3>
            </div>
            <div>
              <img  style={{width:120, height:40}} src={applicationLogo} />
            </div>
          </div>}>
            <div className="row">
              <Alert message="Pastikan data anda sudah terverivikasi dan vouchers anda yang pilih sudah benar sebelum melakukan transaksi" type="warning" />
            </div>
            <div>
              <ul>
                <li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
                <li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
              </ul>
            </div>
          </Card>
        </div>
        <div className="row">
          {this.props.button()}
        </div>
      </div>
    );

    return (
      <div className="wallet containerMiddle">
        <div className="row">
            <div className="col s0 m2 l2" />
            <div className="col s12 m8 l8">
                <div className="">
                <FlatButton
                    className="headerMenu"
                    hoverColor="#f1f5f9"
                    style={{ background: '#ffffff00' }}
                    onClick={() => this.props.history.goBack()}
                    label="Back"
                    primary={true}
                    icon={<NavigationArrowBack />}
                />
                <DividerMaterialUI style={{ marginBottom:10,marginTop:10 }} />
                </div>
                <div className="row">
                <Collapse bordered={true}>
                    <Panel style={{backgroundColor:'white'}} showArrow={false} header={
                            <div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}>
                                <h3 style={{color:'#FF6F00'}}>
                                {price} Points
                                </h3>
                                <h3 style={{color:'#6772e5'}}>
                                    Detail  Tagihan
                                </h3>
                            </div>
                        } key="1">
                        <Row>
                            <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
                                <p>{this.vouchersStore.dataItems.name} - {this.vouchersStore.skuName}</p>
                                <p>{price} Points</p>
                            </div>
                        </Row>
                        <Row>
                            <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
                                <p>{qty} x  {price} Points</p>
                                <p>{total} Points</p>
                            </div>
                        </Row>
                        <Divider dashed={true} />
                        <Row>
                            <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
                                <p>Tagihan</p>
                                <p>{total} Points</p>
                            </div>
                        </Row>
                    </Panel>
                </Collapse>
                </div>
                <div className="row">
                    <Card  title={<div style={{display:'flex',justifyContent:'space-between'}}>
                                <div>
                                <h3 style={{fontSize:20}}>
                                    Points {applicationName}
                                </h3>
                                </div>
                                <div>
                                    <img  style={{width:120, height:40}} src={applicationLogo} />
                                </div>
                            </div>}>
                            <div className="row">
                            <Alert message="Pastikan data anda sudah terverivikasi dan vouchers anda yang pilih sudah benar sebelum melakukan transaksi" type="warning" />
                            </div>
                            <div>
                                <ul>
                                    <li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
                                    <li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
                                </ul>
                            </div>
                    </Card>
                </div>
                <div className="row">
                <Button type="primary" block onClick={() => {
                    this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
                    .then(res => {
                      this.globalUI.hideDialogLoading();
                      this.props.history.push(LINKS.TRANSACTION)
                        openNotificationWithIcon('success')
                    })
                    .catch(err => {
                      this.globalUI.openSnackbar(err.message);
                      console.error(err, 'ini errornya');
                    });
                    }}>Pakai Points</Button>
                </div>
            </div>
            <div className="col s0 m2 l2" />
        </div>
    </div>
    )
  }
}