"use client";

import OwnInput from "@/components/OwnInput";
import { Button, Divider, TextArea, Toast } from "antd-mobile";
import React, { useEffect, useState } from "react";
import { useRouter, useSearchParams, useParams } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight, faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import { getStreamerInfo } from "@/api/space";
import requireAPI from "@/utils/requireAPI";
export default function SpaceIntroSetting() {
  const params = useParams();
  const router = useRouter();
  const [data, setData] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  //空间介绍
  const [spaceIntro, setSpaceIntro] = useState("");
  useEffect(() => {
    // const _data = decodeURIComponent(searchParams.get("data"));
    const { mid } = params;
    getStreamerInfo(parseInt(mid, 10)).then((res) => {
      setData(res);
      setSpaceIntro(res?.profile);
    });
  }, []);
  const handleSubmit = async () => {
    if (!spaceIntro) {
      Toast.show({
        icon: "fail",
        content: "请完善内容后提交",
        position: "top",
      });
      return;
    }
    if (isSubmitting) return;
    setIsSubmitting(true);
    try {
      const body = {
        id: data.id,
        profile: spaceIntro,
      };
      const _data = await requireAPI("POST", "/api/zone/update", {
        body,
      });
      if (_data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: _data.msg,
          position: "top",
        });
        return;
      }
      Toast.show({
        icon: "success",
        content: "提交成功，等耐心等待审核",
        position: "top",
      });
      router.back();
    } catch (error) {
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div>
      {/* 头部标题 */}
      <div className="p-4 fixed top-0 z-10 w-full bg-black">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            style={{ maxWidth: "12px" }}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">空间信息设置</p>
      </div>
      {/* 内容 */}
      <div className="pt-16 p-4">
        <div className="flex-1">
          <p className="text-base font-medium text-white">
            <span className="text-[#F53030]">*</span>空间介绍
          </p>
          <TextArea
            value={spaceIntro}
            onChange={(value) => setSpaceIntro(value)}
            placeholder="介绍下你的空间吧～"
            className="h-32 bg-[#FFFFFF1A] text-white rounded-2xl mt-2 p-2"
            style={{
              "--placeholder-color": "#FFFFFF80",
              "--font-size": "16px",
            }}
          />
          <Divider />
          <div
            onClick={() => router.push("editStreamerMedia")}
            className="flex justify-between py-2"
          >
            <p className="text-base text-white">
              <span className="text-[#F53030]">*</span>
              封面、相册、视频设置
            </p>
            <FontAwesomeIcon
              icon={faAngleRight}
              style={{ maxWidth: "12px" }}
              size="xl"
            />
          </div>

          <div className="mt-16">
            <Button
              shape="rounded"
              size="middle"
              block
              disabled={isSubmitting}
              // disabledStyle={tailwind("bg-[#FFFFFF80]")}
              onClick={handleSubmit}
              style={{ "--background-color": "#FF669E" }}
            >
              {/* {isSubmitting && <ActivityIndicator size="small" color="white" />} */}
              {isSubmitting ? "正在保存..." : "保存设置"}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}