import React, { Component } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Platform,
  Image,
} from 'react-native';
import FastImage from 'react-native-fast-image'
import { colors } from '../assets/styles/colors-theme';
import CountDown from 'react-native-countdown-component';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
import { width, height } from '../services/screen';
import { observable } 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';
import { inject, observer } from 'mobx-react';
import { s, vs, ms } from 'react-native-size-matters';
Icon.loadFont();
MaterialCommunityIcons.loadFont();
@inject('appStore')
@observer
class CategoriesItems extends Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }
  priceHandler(price) {
    var priceInt = parseFloat(price).toFixed(2);
    return 'HKD ' + 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 }}
        />
      );
    }
  }

  renderOriPrice() {
    if (this.props.data.hasOwnProperty('oriPrice')) {
      if (this.props.data.oriPrice > this.props.data.price) {
        return (
          <Text
            numberOfLines={1}
            style={{
              fontSize: s(10),
              color: this.props.data.on_sale ? 'red' : 'black',
              marginLeft: 5,
              textDecorationLine: 'line-through'
            }}>
            {this.priceHandler(this.props.data.oriPrice)}
          </Text>
        )
      }
    } else {

    }
  }

  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={{
          borderColor: colors.mainColor,
          marginTop: 15,
        }}
        onPress={() => {
          this.navigationAction();
        }}>
        <View
          style={{
            height: scale(270),
            width: scale(130),
          }}>
          <View
            style={{
              flex: 0.65,
              borderTopLeftRadius: 10,
              borderTopRightRadius: 10,
            }}>
            {this.props.data.images.length > 0 ? (
              <FastImage
                resizeMode='contain'
                style={{
                  flex: 1,
                  borderTopLeftRadius: 10,
                  borderTopRightRadius: 10,
                  backgroundColor: '#F0E1C9',
                }}
                source={{
                  uri: this.props.data.images[0].imageURL,
                }}
              />
            ) : (
                <View
                  style={{
                    flex: 1,
                    borderTopLeftRadius: 10,
                    borderTopRightRadius: 10,
                    backgroundColor: colors.borderLineColor,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <MaterialCommunityIcons
                    name="image-remove"
                    size={50}
                    color={colors.maingray}
                  />
                  <Text style={{ color: colors.maingray }}>No Image Yet</Text>
                </View>
              )}
            {this.props.data.inventory == 0 ? (<View style={{ position: 'absolute', top: 5, left: 5, }}>

              <Text style={{ color: 'red', fontWeight: '800' }}>
                {this.store.text.outOfStock}
              </Text>
            </View>) : (<View />)}
          </View>
          <View
            style={{
              flex: 0.35,
              backgroundColor: colors.shoppingGroupColor,
              borderBottomLeftRadius: 10,
              borderBottomRightRadius: 10,
            }}>
            <Text
              numberOfLines={2}
              style={{
                fontSize: s(11),
                width: s(120),
                marginTop: 5,
                marginLeft: 5,
                marginRight: 5,
              }}>
              {this.props.data.name}
            </Text>
            <View style={{ flex: 0.6 }}>
              {/* <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> */}
              {/* <Rank ranking={parseFloat(3)} /> */}
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                }}>
                <MaterialCommunityIcons
                  name="star"
                  style={{ marginLeft: 4 }}
                  size={s(14)}
                  color={colors.mainColor}
                />
                <Text
                  style={{
                    marginLeft: 2,
                    color: colors.mainColor,
                    fontSize: s(9),
                  }}>
                  {'4 (300)'}
                </Text>
              </View>
              {this.renderOriPrice()}
              <Text
                numberOfLines={1}
                style={{
                  fontSize: s(14),
                  color: this.props.data.hasOwnProperty('oriPrice') && this.props.data.oriPrice > this.props.data.price ? 'red' : 'black',
                  fontWeight: 'bold',
                  marginLeft: 5,
                }}>
                {this.priceHandler(this.props.data.price)}
              </Text>
            </View>
            <View style={{ flex: 0.4, justifyContent: 'flex-end' }}>
              <TouchableOpacity
                style={{
                  flexDirection: 'row',
                  backgroundColor: colors.grayTextColor,
                  height: s(17),
                  width: s(75),
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: s(5),
                  marginBottom: s(5),
                  marginLeft: s(5),
                }}
                onPress={() => this.props.onPress && this.props.onPress()}>
                <MaterialCommunityIcons
                  name={'shopping-outline'}
                  style={{ marginRight: 2 }}
                  size={s(12)}
                  color={'black'}
                />
                <Text style={{ fontSize: s(10) }}>
                  {this.store.text.addToShoppingCart}
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        {this.props.showFav ? (
          <TouchableOpacity
            style={{
              width: 30,
              height: 30,
              borderRadius: 30,
              position: 'absolute',
              top: 0,
              right: -10,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'white',
              shadowColor: '#000',
              shadowOffset: {
                width: 0,
                height: 3,
              },
              shadowOpacity: 0.27,
              shadowRadius: 4.65,

              elevation: 6,
            }}
            onPress={() => {
              this.props.addfav && this.props.addfav();
            }}>
            <MaterialCommunityIcons name="heart-outline" size={18} />
          </TouchableOpacity>
        ) : (
            <View />
          )}

        {this.props.showSelected ? (
          <TouchableOpacity
            style={{
              position: 'absolute',
              top: 0,
              left: -20,
              justifyContent: 'center',
              alignItems: 'center',
            }}
            onPress={() => {
              this.props.select && this.props.select();
            }}>
            {this.props.selected ? (
              <MaterialCommunityIcons
                name="radiobox-marked"
                size={18}
                color={colors.mainColor}
              />
            ) : (
                <MaterialCommunityIcons
                  name="radiobox-blank"
                  size={18}
                  color={colors.mainColor}
                />
              )}
          </TouchableOpacity>
        ) : (
            <View></View>
          )}
      </TouchableOpacity>
    );
  }
}
export default CategoriesItems;
