import { useEffect, useMemo } from "react";
import Taro, { FC } from "@tarojs/taro";
import { AtFloatLayout } from "taro-ui";
import { AtFloatLayoutProps } from "taro-ui/types/float-layout";
import { Image, View } from "@tarojs/components";
import BorderImg from "../../../../images/line01@2x.png";
import CloseIcon from "../../../../images/icon_back@2x-min.png";
import { SIGHT_LIST } from "../../constants";
import { addVisitApi } from "../../../../api";
import { getBaseURL } from "@dage/service";
import "./index.scss";

const baseUrl = getBaseURL();

export interface SightDetailLayoutProps extends AtFloatLayoutProps {
  item: (typeof SIGHT_LIST)[0];
}

export const SightDetailLayout: FC<SightDetailLayoutProps> = (props) => {
  const realUrl = useMemo(
    () =>
      props.item.imgUrl ||
      // @ts-ignore
      `${baseUrl}${props.item.thumb}`,
    [props.item]
  );

  useEffect(() => {
    if (props.isOpened) {
      addVisitApi({
        device: "wx",
        id: props.item.id,
      });
    }
  }, [props.isOpened]);

  const handlePreview = () => {
    Taro.previewImage({
      current: realUrl,
      urls: [realUrl],
    });
  };

  return (
    <AtFloatLayout className="sight-layout" {...props}>
      <View className="sight-layout-head">
        <View className="sight-layout-head__label">
          {/* @ts-ignore */}
          {props.item.title || props.item.name}
        </View>
        <View>{props.item.address}</View>

        <Image
          src={BorderImg}
          mode="widthFix"
          className="sight-layout-head__bd"
        />
      </View>

      <View className="sight-layout-main">
        <Image
          src={realUrl}
          className="sight-layout__img"
          mode="aspectFill"
          onClick={handlePreview}
        />

        <View className="sight-layout-toolbar">
          {/* <View className="sight-layout-toolbar__btn">全景浏览</View> */}

          <View
            className="sight-layout-toolbar__btn"
            onClick={() => {
              Taro.navigateTo({
                url: `/subModule/pages/portrait-iframe/index?url=${encodeURIComponent(
                  props.item.link
                )}`,
              });
            }}
          >
            场景漫游
          </View>
        </View>

        {Array.isArray(props.item.content) ? (
          props.item.content.map((i, idx) => (
            <View className="sight-layout__text" key={idx}>
              {i}
            </View>
          ))
        ) : (
          <View className="sight-layout__text">
            {/* @ts-ignore */}
            {props.item.content || props.item.description}
          </View>
        )}

        <Image
          className="sight-layout__close"
          src={CloseIcon}
          onClick={props.onClose}
        />
      </View>
    </AtFloatLayout>
  );
};
