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);

    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 : appConfig.appUrl+'/assets/images/no-image.png'} alt="" style={{height: 175}}/>
          </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={<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}</div>
          </CardText>

          <CardText style={{padding: "8px 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>
    )
  }

}
