import React from 'react';
import {inject, observer} from 'mobx-react';
import {
  Card,
  CardMedia,
  CardTitle,
  CardText,
  FontIcon,
} from 'material-ui';
import NumberFormat from 'react-number-format';
import {Link} from 'react-router-dom';
import {LINKS} from "../../../routes";
import {appConfig} from "../../../config/app";
import get from 'lodash.get';

@inject('appstate')
@observer
export class ItemCard extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {};
    this.defaultState = Object.assign({}, this.state);

    this.http = props.appstate.http;
  }

  componentDidMount() {
    // console.log('ItemCard');
  }

  render() {
    const {data = {}} = this.props;
    const main = get(data,'images.main',null);
    // const mainImage = this.http.appendImagePath(main);
    const mainImage = main;

    return (
      <Link to={`${LINKS.FORM_ITEMS}/edit/${data.id}`}>
      <Card className="animated fadeIn cardLite marketplace-cardBox" style={{height: 323, cursor: 'pointer', textOverflow: 'ellipsis'}}>
        <CardMedia>
          <img src={(main) ? mainImage : 'https://marketplace-sillyfish-api.asacreative.com/assets/no-image.png'} alt="" style={{height: 175, objectFit: 'cover'}}/>
        </CardMedia>
        {/*<CardTitle style={{padding:8}} subtitleStyle={{display:'none'}} title={data.name} titleStyle={{fontSize: 12}}/>*/}

        <CardTitle title={<Link to={`${LINKS.FORM_ITEMS}/${data.id}`}>{(data.name.length > 14) ? data.name.substring(0,13)+`...` : data.name}</Link>} titleStyle={{fontWeight: 'bold', fontSize: 18, lineHeight: '30px', whiteSpace: 'nowrap'}}
                   subtitle={<span style={{fontWeight: 'bold', color: 'orangered'}}>{data.regular_price} Points</span>}/>
        {/*<CardTitle title={<Link to={`${LINKS.FORM_ITEMS}/${data.id}`}>{(data.name.length > 14) ? data.name.substring(0,13)+`...` : data.name}</Link>} titleStyle={{fontWeight: 'bold', fontSize: 18, lineHeight: '30px', whiteSpace: 'nowrap'}}*/}
                   {/*subtitle={<NumberFormat style={{fontWeight: 'bold', color: 'orangered'}}*/}
                                           {/*value={data.regular_price}*/}
                                           {/*displayType={'text'}*/}
                                           {/*thousandSeparator={true} prefix={'Rp'}/>}/>*/}

        {/*<CardText style={{padding: 8}}>*/}
        {/*<p className="font-14" style={{marginBottom: 32, fontWeight: 'bold'}}>{data.name}</p>*/}
        {/*<div className="flex flexSpaceBetween">*/}
        {/*<NumberFormat style={{fontWeight: 'bold', color: 'orangered'}} value={data.regular_price}*/}
        {/*displayType={'text'}*/}
        {/*thousandSeparator={true} prefix={'Rp'}/>*/}
        {/*<div style={{fontSize: "11px"}}><span style={{color: '#5a637e7d'}}>Stock</span>{data.stock}</div>*/}
        {/*</div>*/}
        {/*</CardText>*/}

        <CardText style={{
          padding: '16px 16px 8px',
          boxShadow: '0px 5px 15px rgba(0,0,0,0.05)',
          borderRadius: 6,
          fontSize: 12
        }}>
          <div><span style={{color: '#636c72', fontWeight: '300'}}>Stock :</span> {+data.stock} {data.uom}</div>
        </CardText>

        <CardText style={{padding: "4px 16px"}}>
          <div className="flex flexSpaceBetween">
            <div className="font-12" style={{fontSize: '.72rem'}}>
              <FontIcon className="material-icons font-12"
                        color='#636c72'
                        style={{
                          display: "inlineFlex", verticalAlign: "middle", lineHight: 1
                        }}>remove_red_eye</FontIcon> : {data.seen}
            </div>
            <div className="" style={{fontSize: '.72rem'}}>
              <FontIcon className="material-icons font-12" color='#636c72' style={{
                display: "inlineFlex",
                verticalAlign: "middle",
                lineHight: 1,
              }}>favorite_border</FontIcon> : {data.wishlist}
            </div>
            <div style={{fontSize: '.72rem'}}><span style={{color: '#636c72', fontWeight: '300'}}>Sold</span>
              : {data.sold}</div>
          </div>
        </CardText>

      </Card>
      </Link>
    )
  }

}