import React from 'react';
import {Card, Button, Alert} from 'antd';
import {inject, observer} from "mobx-react";
import faker from "faker";

import './style.scss';
import moment from "moment";

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

  render() {
    const {
      data = {
        transaction_id: '',
        transaction: {},
        item: {},
        item_sku: {},
        created_at: '',
        updated_at: '',
        deleted_at: '',
        name: '',
        status: '',
        price: '',
        voucher_code: `-`,
      }
    } = this.props;

    return(
      <Card className={'cardContainer'}>
        <div className={'veryParentContainer'}>
          <div className={'parentContainerLeft'}>
            <div className={'headerContainer'}>
              <p className={'transactionCode'}>{`INV/20190101/VII/X/${data.transaction_id.split('-')[0].toUpperCase()}`}</p>
              <p className={'transactionDate'}>{moment(data.updated_at).format("dddd, MMMM Do YYYY, HH:mm:ss")}</p>
            </div>
            <div className={'bodyContainer'}>
              <p className={'nameText'}>{data.item.name}</p>
              <div className={'childContainer'}>
                <p className={'childTitle'}>Price</p>
                {/*<p className={'childText'}>{(+data.price).toFixed(0)} Points</p>*/}
                <p className={'childText'}>{data.price} Points</p>
              </div>
              <div className={'childContainer'}>
                <p className={'childTitle'}>Voucher Code</p>
                <p className={'childText'}>{data.voucher_code || '-'}</p>
              </div>
            </div>
          </div>
          <div className={'parentContainerRight'}>
            <p className={'statusTitle'}>Status</p>
            <p className={'statusText'}>{data.transaction.status}</p>

            <div className={'buttonContainer'}>
              <Button className={'buttonSubscribe'} block={true} success>Subscribe</Button>
              <Button className={'buttonMore'} block={true} success>Buy More</Button>
            </div>

            <Alert style={{marginTop: '20px'}} message="Those Voucher Code has been sent to your email" type="info" />
          </div>
        </div>
      </Card>
    );
  }
}