import React, { useState } from "react";
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  Linking,
  StyleSheet,
  Dimensions,
} from "react-native";
import AntDesign from "@expo/vector-icons/AntDesign";
import EvilIcons from "@expo/vector-icons/EvilIcons";
import Feather from "@expo/vector-icons/Feather";
import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation, NavigationProp } from "@react-navigation/native";

const { width } = Dimensions.get("window");

export default function StoreItem({
  store,
  onShowReview,
  onShowListReview,
  onShowListShowroom,
}: any) {
  const navigation = useNavigation<NavigationProp<any>>();
  const [selectedRating, setSelectedRating] = useState<number>(0);
  const handleRating = (value: number) => {
    setSelectedRating(value);
  };
  const renderStars = (count: number) => {
    return (
      <View style={{ flexDirection: "row" }}>
        {Array.from({ length: 5 }).map((_, index) => (
          <Ionicons
            key={index}
            name="star"
            size={16}
            color={index < count ? "#ff7a00" : "#d9d9d9"}
          />
        ))}
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <View style={styles.boxTop}>
        <TouchableOpacity
          style={styles.infoShop}
          onPress={() => navigation.navigate("detailshop" as never)}
        >
          <Image source={store.logo} style={styles.logo} resizeMode="contain" />
          <View style={styles.title}>{store.name}</View>
        </TouchableOpacity>
        <TouchableOpacity style={styles.boxSave}>
          <AntDesign name="hearto" size={16} color="#7a7a7a" />
        </TouchableOpacity>
      </View>

      <View style={styles.info}>
        <View style={{ flexDirection: "row", alignItems: "flex-start" }}>
          <Image
            source={require("../../../assets/images/icon_store_blue.png")}
            style={styles.iconStore}
            resizeMode="contain"
          />
          <Text style={styles.desc}>{store.description}</Text>
        </View>
        <View style={{ flexDirection: "row", alignItems: "flex-start" }}>
          <EvilIcons
            name="location"
            size={24}
            color="black"
            style={{
              width: 20,
              marginRight: 10,
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "center",
            }}
          />
          <Text style={styles.address}>{store.address}</Text>
        </View>
        <View style={{ flexDirection: "row", alignItems: "flex-start" }}>
          <Feather
            name="phone"
            size={18}
            color="black"
            style={{
              width: 20,
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "flex-start",
              marginRight: 10,
            }}
          />
          <Text>Tel: {store.tel}</Text>
        </View>
        <View
          style={{
            flexDirection: "row",
            alignItems: "flex-start",
            marginTop: 5,
          }}
        >
          <MaterialCommunityIcons
            name="web"
            size={20}
            color="black"
            style={{
              width: 20,
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "flex-start",
              marginRight: 10,
            }}
          />
          <Text>Web: {store.website}</Text>
        </View>

        <View style={styles.row}>
          <TouchableOpacity
            style={{ flexDirection: "row", alignItems: "center" }}
            onPress={() => Linking.openURL(store.googleMap)}
          >
            <Image
              source={require("../../../assets/images/icon_map.png")}
              style={styles.iconStore}
              resizeMode="contain"
            />
            <Text style={styles.link}>Google Maps</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              flexDirection: "row",
              alignItems: "center",
              marginLeft: 20,
            }}
            onPress={onShowListShowroom}
          >
            <Image
              source={require("../../../assets/images/icon_showroom.png")}
              style={styles.iconStore}
              resizeMode="contain"
            />
            <Text style={{ color: "#0d0d9c" }}>
              Có {store.showrooms} showroom
            </Text>
          </TouchableOpacity>
        </View>
      </View>

      <View style={styles.actions}>
        {renderStars(store.rate)}
        <TouchableOpacity onPress={onShowListReview} style={{ marginLeft: 5 }}>
          <Text style={styles.link}>Xem {store.reviewCount} đánh giá</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.btnRow}>
        <TouchableOpacity onPress={onShowReview}>
          <Text style={styles.reviewLink}>Đánh giá về chất lượng dịch vụ</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.contactBtn}>
          <Text style={styles.btnText}>Liên hệ</Text>
          <EvilIcons name="external-link" size={24} color="#462f91" />
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderTopWidth: 1,
    borderColor: "#ccc",
    marginTop: 10,
    paddingTop: 10,
    paddingBottom: 10,
    marginBottom: 10,
  },
  logo: {
    width: 60,
    height: 60,
    borderWidth: 1,
    borderColor: "#d4d4d4",
    marginRight: 10,
  },
  boxTop: {
    marginBottom: 5,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  infoShop: {
    flexDirection: "row",
    alignItems: "center",
    width: width - 100,
  },
  iconStore: {
    width: 20,
    marginRight: 10,
    objectFit: "contain",
  },
  boxSave: {
    width: 28,
    height: 28,
    borderRadius: "50%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    lineHeight: 30,
    backgroundColor: "#e2e2e2",
  },
  info: { flex: 1, marginRight: 10 },
  title: {
    fontWeight: "bold",
    fontSize: 16,
    marginBottom: 5,
    width: width - 170,
  },
  desc: { color: "#1877f2" },
  address: { marginTop: 5 },
  row: { flexDirection: "row", alignItems: "center", marginTop: 10 },
  link: { color: "#FF7A00", textDecorationLine: "underline" },
  actions: { marginTop: 5, flexDirection: "row", alignItems: "center" },
  reviewLink: {
    textAlign: "right",
    textDecorationLine: "underline",
    color: "#1877f2",
  },
  btnRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 10,
  },
  saveBtn: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#303030",
    paddingVertical: 8,
    alignItems: "center",
  },
  contactBtn: {
    flexDirection: "row",
    alignItems: "center",
    gap: 5,
  },
  btnText: { color: "#462f91", fontWeight: "bold" },
});
