import { ScrollView, View } from "@tarojs/components";
import { pxTransform, useLoad, navigateBack } from "@tarojs/taro";
import { useState } from "react";
import { ArrowLeft, Plus } from "@nutui/icons-react-taro";
import { Text } from "@tarojs/components";
import "./index.scss";
import {
  Dialog,
  Image,
  ImagePreview,
  Swiper,
  Toast,
  NavBar,
} from "@nutui/nutui-react-taro";
import { unfollowApi, followApi } from "../../api/interaction";
import { postDetailApi } from "../../api/post";
import CommentList from "../../components/comment-list";
import CommentListInteraction from "../../components/comment-list/interaction";

const Detail = () => {
  const [postData, setPostData] = useState<any>(null);
  const [showPreview, setShowPreview] = useState(false);
  const [init, setInit] = useState(0);
  const [currentIndex, setCurrentIndex] = useState(0);

  // 关注/不关注
  const handleFollowClick = (followeeId: number, is_followed) => {
    console.log(followeeId, is_followed);
    if (is_followed) {
      Dialog.open("followed_dialog", {
        title: "提示",
        content: "确定取消关注吗？",
        onConfirm: () => {
          unfollowApi({ followee_id: followeeId }).then(() => {
            Toast.show("follow_success", {
              content: "取消关注成功",
              duration: 2,
              lockScroll: true,
            });
            const data = { ...postData, is_followed: false };
            setPostData(data);
            Dialog.close("followed_dialog");
          });
        },
        onCancel: () => {
          Dialog.close("followed_dialog");
        },
        onClose: () => {
          Dialog.close("followed_dialog");
        },
      });
    } else {
      followApi({ followee_id: followeeId }).then(() => {
        Toast.show("follow_success", {
          content: "关注成功",
          duration: 2,
          lockScroll: true,
        });
        const data = { ...postData, is_followed: true };
        setPostData(data);
      });
    }
  };

  // 获取帖子详情
  const getPostDetail = (postId: number) => {
    postDetailApi({ id: postId }).then((res: any) => {
      if (res.code === 200) {
        setPostData(res.data);
      }
    });
  };
  useLoad((options) => {
    getPostDetail(options.id);
  });
  return postData ? (
    <View>
      <NavBar
        fixed
        back={
          <>
            <ArrowLeft />
            返回
          </>
        }
        onBackClick={(e) => {
          e.preventDefault();
          navigateBack({ delta: 1 });
        }}
      >
        帖子详情
      </NavBar>
      <ScrollView className="pt-[50px]">
        <View className="p-[10px] flex items-center justify-between">
          <View className="flex items-center">
            <View
              className="w-[40px] h-[40px] rounded-[50%] bg-[#000] overflow-hidden  bg-cover bg-center"
              style={{
                backgroundImage: postData.user.avatar_url
                  ? `url('${postData.user.avatar_url}')`
                  : "none",
              }}
            ></View>
            <View className="ml-[10rpx]">
              <View className="text-[14px] font-[800] text-[#9c9dee]">
                {postData.user.nickname || "微信用户"}
              </View>
              {postData.user.is_official ? (
                <View className="text-[12px] text-[#949494]">
                  《心动女友》官方账号
                </View>
              ) : (
                <></>
              )}
            </View>
          </View>
          <View className="flex items-center">
            <View
              className="flex items-center justify-center mr-[12px] text-[12px] bg-[#f8f8f8] text-[#949494] rounded-[20px] h-[25px] w-[60px] text-center"
              onClick={() =>
                handleFollowClick(postData.user_id, postData.is_followed)
              }
            >
              {postData.is_followed ? <></> : <Plus color="#1874d0" />}
              <Text>{postData.is_followed ? "已关注" : "关注"}</Text>
            </View>
          </View>
        </View>
        {postData.type === "1" ? (
          <Swiper
            height={pxTransform(300)}
            defaultValue={0}
            onChange={(e) => {
              setCurrentIndex(e.detail.current);
            }}
            indicator={
              <View
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "center",
                  alignItems: "center",
                  position: "absolute",
                  left: "85%",
                  bottom: pxTransform(10),
                  width: pxTransform(46),
                  height: pxTransform(22),
                  backgroundColor: "rgba(0, 0, 0, 0.33)",
                  borderRadius: pxTransform(22),
                  textAlign: "center",
                  fontSize: pxTransform(14),
                  zIndex: 1,
                }}
              >
                <Text style={{ color: "#fff" }}>
                  {currentIndex + 1}/{postData.media_url.length}
                </Text>
              </View>
            }
          >
            {postData.media_url.map((item, index) => (
              <Swiper.Item key={item}>
                <Image
                  width="100%"
                  height="100%"
                  onClick={() => {
                    setShowPreview(true);
                    setInit(index + 1);
                  }}
                  mode="aspectFill"
                  src={item.src}
                />
              </Swiper.Item>
            ))}
          </Swiper>
        ) : (
          <></>
        )}
        <View className="p-[10px] content-detail">
          {postData.type === "1" ? (
            <View className="text-[14px] text-[#333]">{postData.content}</View>
          ) : (
            <View
              className="text-[14px] text-[#333]"
              dangerouslySetInnerHTML={{ __html: postData.content }}
            ></View>
          )}

          {/* <CommentList postId={postData.id} /> */}
        </View>
      </ScrollView>
      {/* <CommentListInteraction postData={postData} /> */}
      <ImagePreview
        images={postData.media_url}
        visible={showPreview}
        defaultValue={init}
        onClose={() => setShowPreview(false)}
        indicator
      />
      <Toast id="follow_success" />
      <Dialog id="followed_dialog" />
    </View>
  ) : (
    <></>
  );
};

export default Detail;
