import { useState } from "react";
import { View, Text, Image, ScrollView } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { CommonPopup } from "@/components";
import img from "@/config/images";
import styles from "./index.module.scss";
import { insertDotInTags } from "@/utils/helper";

// 场馆信息
export default function VenueInfo(props) {
  const { detail } = props;
  const [visible, setVisible] = useState(false);
  const {
    venue_description,
    venue_description_tag = [],
    venue_image_list = [],
  } = detail;

  // 统一为 URL 数组：接口可能是 { id, url }[] 或 string[]
  const screenshot_urls = (venue_image_list || []).map((item) =>
    typeof item === "string" ? item : (item?.url ?? "")
  ).filter(Boolean);

  function showScreenShot() {
    setVisible(true);
  }
  function onClose() {
    setVisible(false);
  }

  function previewImage(current_url: string) {
    Taro.previewImage({
      current: current_url,
      urls: screenshot_urls,
    });
  }
  return (
    <View className={styles["detail-page-content-venue"]}>
      {/* venue detail title and venue ordered status */}
      <View className={styles["venue-detail-title"]}>
        <Text>场馆详情</Text>
        {screenshot_urls.length > 0 ? (
          <>
            <Text>·</Text>
            <View
              className={styles["venue-reserve-status"]}
              onClick={showScreenShot}
            >
              <Text>查看订场截图</Text>
              <Image
                className={styles["venue-reserve-screenshot"]}
                src={img.ICON_DETAIL_ARROW_RIGHT}
              />
            </View>
          </>
        ) : (
          ""
        )}
      </View>
      {/* venue detail content */}
      <View className={styles["venue-detail-content"]}>
        {/* venue detail tags */}
        <View className={styles["venue-detail-content-tags"]}>
          {insertDotInTags(venue_description_tag).map((tag, index) => (
            <View
              key={index}
              className={styles["venue-detail-content-tags-tag"]}
            >
              <Text>{tag}</Text>
            </View>
          ))}
        </View>
        {/* venue remarks */}
        <View className={styles["venue-detail-content-remarks"]}>
          <Text>{venue_description}</Text>
        </View>
      </View>
      <CommonPopup
        visible={visible}
        onClose={onClose}
        round
        hideFooter
        position="bottom"
        zIndex={1001}
      >
        <View className={styles["venue-screenshot-title"]}>预定截图</View>
        <ScrollView scrollY className={styles["venue-screenshot-scroll-view"]}>
          <View className={styles["venue-screenshot-image-list"]}>
            {screenshot_urls.length > 0 &&
              screenshot_urls.map((url, index) => (
                <View
                  className={styles["venue-screenshot-image-item"]}
                  onClick={() => previewImage(url)}
                  key={index}
                >
                  <Image
                    className={styles["venue-screenshot-image-item-image"]}
                    mode="aspectFill"
                    src={url}
                  />
                </View>
              ))}
          </View>
        </ScrollView>
      </CommonPopup>
    </View>
  );
}