import React, { Component } from "react";
import {
  TextInput,
  View,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  Image
} from "react-native";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Size from "../../config/size";
import Text from "react-native-text";
import FastImage from "react-native-fast-image";
import { width, height } from "../../config/screen";
import Icon from "react-native-vector-icons/dist/Ionicons";
import theme from "../../config/colors";
import { Fonts } from "../../config/fonts";
import { observable, transaction } from "mobx";
import { observer, inject } from "mobx-react/native";
const size = new Size();

@inject(["menuStore"], ["userStore"])
@observer
export default class MenuDetailsView extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.menuStore;
    this.userStore = this.props.userStore;
  }
  separate(index) {
    // console.log(index + " "+ this.store.menuDetails.tags.size)
    if (index < 2) {
      return (
        <View
          style={{
            backgroundColor: theme.mainColor,
            width: 2,
            height: size.getSize(10),
            marginRight: 3
          }}
        />
      );
    }
  }

  tags() {}

  render() {
    console.log(this.userStore.languageSelection);
    console.log(this.store.menuDetails.tags);
    const tagsLoop = this.store.menuDetails.tags.map((tags, index) => (
      <View style={{ flexDirection: "row" }}>
        <Text style={[styles.TextStyle, { fontSize: 13, marginRight: 3 }]}>
          {this.userStore.dataLanguage(tags, "name")}
        </Text>
        {this.separate(index)}
      </View>
    ));
    return (
      <View style={{ flex: 1 }}>
        <TouchableOpacity
          style={{ backgroundColor: "#E6E6E6", width: width }}
          onPress={() => this.props.self.foodInformationPageDismiss()}
        >
          <View
            style={{
              width: "100%",
              height: 50,
              alignItems: "center",
              justifyContent: "center",
              backgroundColor: "white"
            }}
          >
            <Icon name="ios-arrow-down" size={size.getSize(25)} color="black" />
          </View>
        </TouchableOpacity>

        <FastImage
          style={{
            width: width - 40,
            height: verticalScale(200),
            borderRadius: 4,
            alignItems: "center",
            marginLeft: 20
          }}
          source={{ uri: this.store.menuDetails.imageURL }}
        >
          <View
            style={{
              backgroundColor: theme.menuPriceBoxBackgroundColor,
              alignItems: "center",
              justifyContent: "center",
              height: verticalScale(40),
              width: scale(100),
              flexDirection: "row",
              position: "absolute",
              right: 0,
              bottom: 0
            }}
          >
            <Text
              style={{
                color: theme.foodNameColor,
                fontWeight: "bold",
                fontSize: 20,
                fontFamily: "CenturyGothic"
              }}
              numberOfLines={1}
            >
              HKD ${this.store.menuDetails.price}
            </Text>
          </View>
        </FastImage>

        <ScrollView style={{ paddingTop: 10, paddingRight: 20, paddingLeft: 20 }}>
          <Text style={[styles.TextStyle, { fontSize: 15 }]}>
          {this.userStore.dataLanguage(this.store.menuDetails, "name")}
          </Text>
          <Text style={[styles.TextStyle, { fontSize: 13, paddingTop: 5 }]}>
            {this.userStore.dataLanguage(
              this.store.menuDetails.restaurant,
              "name"
            )}
          </Text>
          <Text style={[styles.TextStyle, { fontSize: 13,paddingTop: 5 }]}>
            {this.userStore.dataLanguage(
              this.store.menuDetails.restaurant,
              "addr"
            )}
          </Text>
          <View style={{ flexDirection: "row" ,paddingTop: 5}}>
            {tagsLoop}
          </View>
          <Text style={[styles.TextStyle, { fontSize: 13, paddingTop: 5, marginBottom: 40, }]}>
            {this.userStore.dataLanguage(this.store.menuDetails, "intro")}
          </Text>
        </ScrollView>

       
      </View>
    );
  }
}

const styles = StyleSheet.create({
  marginSide: {
    marginRight: 10,
    marginLeft: 10
  },
  introView: {
    marginRight: 10,
    marginLeft: 10,
    marginTop: 15,
    fontSize: 20
  },
  TextStyle: {
    fontFamily: Fonts.century,
    color: theme.coolGrey
  }
});