"use client";

import React, { useEffect, useState, useRef } from "react";
import { Image, Avatar, Divider, Dialog, Toast } from "antd-mobile";
import { useRouter, useSearchParams } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faAngleLeft,
  faAngleRight,
  faCalendar,
} from "@fortawesome/free-solid-svg-icons";
export default function Setting() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [streamerInfo, setStreamerInfo] = useState(null);
  const [showModal, setShowModal] = useState(false);
  useEffect(() => {
    let data = JSON.parse(decodeURIComponent(searchParams.get("data")));
    setStreamerInfo(data);
  }, []);
  const handleShowVideo = () => {
    Dialog.className = "videoMask";
    Dialog.show({
      title: "是否确认退出空间？",
      content: (
        <div className="flex flex-col gap-2">
          一旦退出，您的空间成员身份将会被取消，若当前空间为付费空间，下次加入时，需要再次付费。请确保知晓以上内容后谨慎选择退出。
        </div>
      ),
      bodyStyle: {
        // background: "none",
        maxHeight: "none",
        width: "80vw",
        position: "absolute",
        top: "calc(50% - 50px)",
        left: "10vw",
      },
      actions: [
        {
          key: "submit",
          text: "确定",
          onClick: () => {
            i;
          },
        },
        {
          key: "cancel",
          text: "取消",
          onClick: () => {},
        },
      ],
    });
  };
  return (
    <div className="">
      <div className="p-4 fixed top-0 z-10 w-full">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">空间设置</p>
      </div>
      {/* 内容 */}

      <div className="p-4 pt-20">
        <div className="flex items-center">
          <Avatar
            rounded-full
            mr-4
            src={streamerInfo?.cover?.images[0]?.urls[0]}
            className="mr-4"
            style={{ "--size": "52px", "--border-radius": "50%" }}
          />
          <div>
            <p className="text-xl font-bold">{streamerInfo?.name}</p>
            <ul className="flex">
              <li className="h-4 mr-1 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
                <Image
                  src="/icons/info/ID.png"
                  width={14}
                  height={14}
                  className="w-4 h-full mr-1"
                  placeholder=""
                />
                <span>{streamerInfo?.user_id}</span>
              </li>
              <li className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
                <FontAwesomeIcon
                  icon={faCalendar}
                  size="sm"
                  className="mr-1"
                  onClick={() => {
                    router.back();
                  }}
                />
                <span>{streamerInfo?.user_id}</span>
              </li>
            </ul>
          </div>
        </div>
        <ul className="mt-6">
          <li>
            <div
              onClick={() => router.push("/share/" + streamerInfo.mid)}
              className="flex justify-between"
            >
              <span className="text-base text-white">分享空间</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="xl"
                className="mr-1"
                onClick={() => {
                  router.back();
                }}
              />
            </div>
            <Divider />
          </li>
          <li
            onClick={async () => {
              const result = await Dialog.confirm({
                title: "是否确认退出空间？",
                content: "一旦退出，您的空间成员身份将会被取消，若当前空间为付费空间，下次加入时，需要再次付费。请确保知晓以上内容后谨慎选择退出。",
                bodyStyle: {
                  maxHeight: "none",
                  width: "80vw",
                  position: "fixed",
                  top: "200px",
                  left: "10vw",
                },
              });
              if (result) {
                Toast.show({ content: "点击了确认", position: "bottom" });
              }
            }}
          >
            <div className="flex justify-between">
              <span className="text-base text-white">退出空间</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="xl"
                className="mr-1"
                onClick={() => {
                  router.back();
                }}
              />
            </div>
            <Divider />
          </li>
        </ul>
      </div>
    </div>
  );
}