import React from 'react';
import {inject, observer} from "mobx-react";
import { Spin, Alert, Divider } from 'antd';
import faker from 'faker';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import {FlatButton} from "material-ui";
import './style.scss';
import ItemList from "./ItemList";
import moment from 'moment';
import EmptyComponent from "../EmptyComponent";

@inject("appstate")
@observer
export default class TransactionPage extends React.Component {
  constructor(props){
    super(props);
    this.props = props;
    this.purchasedVoucher = props.appstate.purchased_voucher;
  }

  componentDidMount() {
    this.purchasedVoucher.getAll().then((res) => console.log(res, 'ini purchased voucher'))
  }

  render() {
    const data = [
      {
        transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
        created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
        updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
        deleted_at: null,
        name: faker.commerce.productName(),
        status: 'Transaction Success',
        price: faker.commerce.price(),
        voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
      },
      {
        transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
        created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
        updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
        deleted_at: null,
        name: faker.commerce.productName(),
        status: 'Transaction Success',
        price: faker.commerce.price(),
        voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
      },
      {
        transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
        created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
        updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
        deleted_at: null,
        name: faker.commerce.productName(),
        status: 'Transaction Success',
        price: faker.commerce.price(),
        voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
      },
      {
        transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
        created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
        updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
        deleted_at: null,
        name: faker.commerce.productName(),
        status: 'Transaction Success',
        price: faker.commerce.price(),
        voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
      },
    ];

    return(
      <div className={'transactionContainer'}>
        <div className={'parentContainer'}>
          <div className={'barContainer'}>
            <FlatButton
              className="headerMenu"
              hoverColor="#f1f5f9"
              style={{ background: '#ffffff00' }}
              onClick={() => this.props.history.goBack()}
              label="Back"
              primary={true}
              icon={<NavigationArrowBack />}
            />
            <div className={'optionContainer'}>
              <span className={'optionTitle'}>Show  :</span>
              <span className={'optionSelect'}>All</span>
              <span className={'optionSelect'}>Success</span>
              <span className={'optionSelect'}>Failed</span>
              <span className={'optionSelect'}>Pending</span>
            </div>
          </div>
          <Divider className={'dividerTop'} />

          <div className={'listContainer'}>
            {
              (this.purchasedVoucher.data.length > 0) ?
                this.purchasedVoucher.data.map(item => {
                  return <ItemList data={item}/>
                }) :
                (
                  <EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
                )
              }
          </div>
        </div>
      </div>
    )
  }
}
