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 { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
import {images} from '../assets/images/imageIndex';
import Rank from './rank';
import Icon from 'react-native-vector-icons/dist/Feather';

Icon.loadFont();

const Mostcheaplist = inject("appStore")(observer(class Mostcheaplist 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.lineColor, borderBottomWidth: 1}}
        onPress={() => {
          this.navigationAction();
        }}>
        <View
          style={{
            flexDirection: 'row',
            marginLeft: 20,
            marginTop: 20,
            marginBottom: 20,
          }}>
          <View
            style={{
              flexDirection: 'row',
              flex: 0.85,
              marginTop: 10,
            }}>
            <Image
              style={{
                height: 110,
                width: 110,
              }}
              source={{
                uri: this.props.data.images[0].src,
              }}
            />
            <View style={{marginLeft: 20, marginRight: 10}}>
              <Text numberOfLines={1} style={{fontSize: 12, width: 150}}>
                {this.props.data.name}
              </Text>
              <Rank ranking={parseFloat(this.props.data.average_rating)} />
              <Text
                numberOfLines={1}
                style={{
                  fontSize: 10,
                  marginTop: 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>
              <TouchableOpacity
                style={{
                  flexDirection: 'row',
                  backgroundColor: colors.mainColor,
                  height: 17,
                  width: 75,
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: 5,
                  position: 'absolute',
                  bottom: 0,
                }}
                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 style={{flex: 0.15}}>
            <Image source={images.main.goldenApple} />
            <Text
              style={{
                position: 'absolute',
                top: 10,
                left: 8,
                color: 'white',
                fontWeight: 'bold',
              }}>
              {this.props.index + 1}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}))
export default Mostcheaplist;
