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';
import MaterialCommunityIcons from 'react-native-vector-icons/dist/MaterialCommunityIcons';

Icon.loadFont();
MaterialCommunityIcons.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,
          marginRight: 15,
        }}
        onPress={() => {
          this.navigationAction();
        }}>
        <View
          style={{
            height: 230,
            width: 120,
          }}>
          <View
            style={{
              flex: 0.65,
              borderTopLeftRadius: 10,
              borderTopRightRadius: 10,
            }}>
            {this.props.data.hasOwnProperty('images') ? (
              <Image
                resizeMode="cover"
                style={{
                  flex: 1,
                  borderTopLeftRadius: 10,
                  borderTopRightRadius: 10,
                  backgroundColor: '#F0E1C9',
                }}
                source={{
                  uri: this.props.data.images[0].src,
                }}
              />
            ) : (
                // <Image
                //   resizeMode='contain'
                //   style={{
                //     flex: 1,
                //     borderTopLeftRadius: 10,
                //     borderTopRightRadius: 10,
                //     backgroundColor:'red'
                //   }}
                //   source={require('../assets/images/noimage.png')}
                // />
                <View
                  style={{
                    flex: 1,
                    borderTopLeftRadius: 10,
                    borderTopRightRadius: 10,
                    backgroundColor: colors.borderLineColor,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <MaterialCommunityIcons
                    name="image-remove"
                    size={50}
                    color={colors.mainColor}
                  />
                  <Text style={{ color: colors.mainColor }}>No Image Yet</Text>
                </View>
              )}
          </View>
          <View
            style={{
              flex: 0.35,
              backgroundColor: '#F0E1C9',
              borderBottomLeftRadius: 10,
              borderBottomRightRadius: 10,
            }}>
            <Text
              numberOfLines={2}
              style={{
                fontSize: 12,
                width: 90,
                marginTop: 5,
                marginLeft: 5,
                marginRight: 5,
                fontWeight: '800',
                color: colors.mainColor,
              }}>
              {this.props.data.name}
            </Text>
            <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> */}
              {this.props.data.ori_price != null ? (<Text
                numberOfLines={1}
                style={{
                  fontSize: 8,
                  color: colors.textColor,
                  fontWeight: 'bold',
                  marginLeft: 5,
                  textDecorationLine: 'line-through'
                }}>
                {this.priceHandler(this.props.data.ori_price)}
              </Text>) : (<View />)}
              <Text
                numberOfLines={1}
                style={{
                  fontSize: 10,
                  color: this.props.data.ori_price != null ? 'red' : colors.textColor,
                  fontWeight: 'bold',
                  marginLeft: 5,
                }}>
                {this.priceHandler(this.props.data.price)}
              </Text>
            </View>
            <View style={{ flex: 0.5, justifyContent: 'flex-end' }}>
              <TouchableOpacity
                style={{
                  flexDirection: 'row',
                  backgroundColor: colors.catColor,
                  height: 17,
                  width: 75,
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: 5,
                  marginBottom: 5,
                  marginLeft: 5,
                }}
                onPress={() => this.props.onPress && this.props.onPress()}>
                <Icon
                  name={'shopping-cart'}
                  style={{ marginRight: 2 }}
                  size={12}
                  color={colors.mainColor}
                />
                <Text style={{ fontSize: 10, color: colors.mainColor }}>
                  {this.store.text.addToShoppingCart}
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}))
export default YouMayLikeItems;
