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;

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

  function previewImage(current_url) {
    Taro.previewImage({
      current: current_url,
      urls: venue_image_list || [],
    });
  }
  return (
    <View className={styles["detail-page-content-venue"]}>
      {/* venue detail title and venue ordered status */}
      <View className={styles["venue-detail-title"]}>
        <Text>场馆详情</Text>
        {venue_image_list?.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"]}>
            {venue_image_list?.length > 0 &&
              venue_image_list.map((url, index) => {
                return (
                  <View
                    className={styles["venue-screenshot-image-item"]}
                    onClick={previewImage.bind(null, url)}
                    key={index}
                  >
                    <Image
                      className={styles["venue-screenshot-image-item-image"]}
                      mode="aspectFill"
                      src={url}
                    />
                  </View>
                );
              })}
          </View>
        </ScrollView>
      </CommonPopup>
    </View>
  );
}