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

Icon.loadFont();
const CategoriesItems = inject("appStore")(observer(class CategoriesItems extends React.Component {

  constructor(props) {
    super(props);
    this.store = props.appStore;
    makeObservable(this, {

    })
  }
  priceHandler(price) {
    var priceInt = parseFloat(price).toFixed(2);
    return '$' + priceInt.toString();
  }

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

  renderTimer() {
    if (this.props.sale) {
      return (
        <CountDown
          until={this.props.data.unix}
          size={15}
          digitStyle={{ backgroundColor: '#FFF' }}
          digitTxtStyle={{ color: colors.mainColor }}
          timeToShow={['D', 'H', 'M', 'S']}
          timeLabels={{ d: 'Days', h: 'Hrs', m: 'Mins', s: 'Sec' }}
          timeLabelStyle={{ color: colors.mainColor }}
        />
      );
    }
  }

  renderGroupBuy() {
    if (this.props.groupBuy) {
      var index = this.props.data.attributes.findIndex(
        element => element.name == 'groupbuy',
      );
      return (
        <Text style={{ color: colors.mainColor }}>
          {this.store.text.alreadyHave +
            this.props.data.attributes[index].options[0] +
            this.store.text.joinedGroupBuying}
        </Text>
      );
    }
  }

  render() {
    return (
      <TouchableOpacity
        style={{ marginTop: 10 }}
        onPress={() => {
          this.navigationAction();
        }}>
        {this.props.data.images.length > 0 ? (
          <FastImage
            style={{
              height: 140,
              width: 140,
            }}
            source={{
              uri: this.props.data.images[0].src,
            }}
          />
        ) : (
          <FastImage source={images.main.bigLogo} style={{
            height: 140,
            width: 140,
          }} />
        )}

        <Text numberOfLines={1} style={{ fontSize: 12, width: 140 }}>
          {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>
        <View>{this.renderTimer()}</View>
        {this.renderGroupBuy()}
        <TouchableOpacity
          style={{
            flexDirection: 'row',
            backgroundColor: colors.mainColor,
            height: 17,
            width: 75,
            alignItems: 'center',
            justifyContent: 'center',
            borderRadius: 5,
            marginTop: 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>
      </TouchableOpacity>
    );
  }
}))
export default CategoriesItems;
