import { faMessage } from "@fortawesome/free-regular-svg-icons";
import { faLocationPin } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
  FlatList,
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import { get_vendor } from "../../services/api/controllers/vendor";

const ShopPrev = ({ shopId }) => {
  const [vendor, setvendor] = useState();
  const [error, seterror] = useState();
  const navigation = useNavigation();

  useEffect(() => {
    get_vendor({ id: shopId })
      .then((result) => {
        if (result.error) {
          seterror(result.error);
        } else {
          console.log("result" + result.data.user_login);
          setvendor(result.data);
        }
      })
      .catch((error) => {
        seterror(error.message);
      })
      .finally(() => {
        //   setIsLoading(false); // Set loading to false when done loading
      });
  }, []);

  return (
    <View style={styles.container}>
      {/* <Text style={styles.header}>ShopPrev</Text> */}
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          paddingHorizontal: 15,
        }}
      >
        <Image
          style={{
            width: "100%",
            height: 50,
            width: 50,
            resizeMode: "cover",
            borderRadius: 90,
          }}
          source={{
            uri: `${
              vendor?.vendor_image ??
              "https://coopbiz.ph/wp-content/plugins/yith-woocommerce-multi-vendor-premium/assets/images/shop-placeholder.jpg"
            }`,
          }}
        />
        <View style={styles.shopDetails}>
          <Text numberOfLines={2} style={styles.header}>
            {vendor?.user_login}
          </Text>
        </View>

        <TouchableOpacity
          style={styles.messageBtn}
          onPress={() => navigation.navigate("Shop", { product: vendor })}
        >
          <Text style={styles.btnText}>Visit Shop</Text>
        </TouchableOpacity>
      </View>
      <Text style={styles.header2}>
        {" "}
        <FontAwesomeIcon
          icon={faLocationPin}
          color={"#c2c2c2"}
          size={10}
        />{" "}
        {vendor?.address[0]?.city ? vendor?.address[0]?.city : null} 
      </Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    // flex: 1,
    backgroundColor: "#fafafa",
    // alignItems: "center",
    // justifyContent: "center",
    width: "100%",
    marginVertical: 10,
    padding: 10,
    borderWidth: 1,
    borderColor: "#eeee",
    marginBottom: 15,
    //   height: "87%",
  },
  wrapper: {
    width: "100%",
    height: 200,
    // backgroundColor: "#ffaa00",
    padding: 10,
  },
  header: {
    fontSize: 14,
    fontWeight: "700",
    // textTransform: "uppercase",
    paddingHorizontal: 5,
  },
  header2: {
    fontSize: 14,
    fontWeight: "400",
    // textTransform: "uppercase",
    paddingHorizontal: 5,
    marginTop: 15,
  },
  shopDetails: {
    padding: 10,

    width: "60%",
  },
  img: {
    width: 80,
    height: 80,
    resizeMode: "cover",
    borderRadius: 10,
    backgroundColor: "#ffefce",
    padding: 10,
  },
  AddUser: {
    padding: 10,
  },
  messageBtn: {
    // width: 80,
    // height: 80,
    flexDirection: "row",
    resizeMode: "cover",
    borderRadius: 10,
    backgroundColor: "#dfff6c",
    padding: 10,
  },
  btnText: {
    fontSize: 14,
    fontWeight: "600",
    // textTransform: "uppercase",
    paddingHorizontal: 5,
    color: "#698600",
  },
});
export default ShopPrev;