import React, { Component } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Platform,
  Image,
} from 'react-native';
import { colors } from '../assets/styles/colors-theme';
import { width, height } from '../services/screen';
import { images } from '../assets/images/imageIndex';
import Rank from './rank';
import Icon from 'react-native-vector-icons/dist/Feather';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'

Icon.loadFont();
const YouMayLikeItems = inject("appStore")(observer(class YouMayLikeItems extends React.Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }
  priceHandler(price) {
    var priceInt = parseFloat(price).toFixed(2);
    return '$' + priceInt.toString();
  }

  navigationAction() {
    this.props.navigation.navigate('ProductsDetails', { data: this.props.data });
  }

  render() {
    return (
      <TouchableOpacity
        style={{ borderColor: colors.mainColor, borderWidth: 1, marginRight: 10 }}
        onPress={() => {
          this.navigationAction();
        }}>
        <View
          style={{
            margin: 10,
            height: 180,
          }}>
          {this.props.data.hasOwnProperty('images') ?
            (<View style={{ flex: 0.7 }}>
              {this.props.data.images.length > 0 ? (
                <Image
                  style={{
                    height: 90,
                    width: 90,
                  }}
                  source={{
                    uri: this.props.data.images[0].src,
                  }}
                />
              ) : (
                <View />
              )}

              <Text numberOfLines={2} style={{ fontSize: 12, width: 90 }}>
                {this.props.data.name}
              </Text>
            </View>) :
            (<View/>)}

          <View style={{ flex: 0.3 }}>
            <View style={{ flex: 0.5 }}>
              <Text
                numberOfLines={1}
                style={{
                  fontSize: 10,

                  textDecorationLine: 'line-through',
                }}>
                {this.props.data.on_sale
                  ? this.store.text.originalPrice +
                  this.priceHandler(this.props.data.regular_price)
                  : ''}
              </Text>
              <Text
                numberOfLines={1}
                style={{
                  fontSize: 12,
                  color: this.props.data.on_sale ? 'red' : 'black',
                  fontWeight: 'bold',
                }}>
                {this.priceHandler(this.props.data.price)}
              </Text>
            </View>
            <View style={{ flex: 0.5, justifyContent: 'flex-end' }}>
              <TouchableOpacity
                style={{
                  flexDirection: 'row',
                  backgroundColor: colors.mainColor,
                  height: 17,
                  width: 75,
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: 5,
                }}
                onPress={() => this.props.onPress && this.props.onPress()}>
                <Icon
                  name={'shopping-cart'}
                  style={{ marginRight: 2 }}
                  size={12}
                  color={'white'}
                />
                <Text style={{ fontSize: 10, color: 'white' }}>
                  {this.store.text.addToShoppingCart}
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}
))

export default YouMayLikeItems;
