import { defineComponent } from "vue";
import {
  ElDropdownMenu,
  ElDropdown,
  ElDropdownItem,
  ElMessage,
} from "element-plus";
import router from "/src/router";
import styles from "./index.module.less";
import request from "/src/helpers/request";
import runtime, * as RuntimeUtils from "/src/components/live-broadcast/runtime";
import { removeToken } from "/src/utils/auth";
import { removeMedia } from "/src/components/live-broadcast/helpers";
import WifiIcon from "./wifi.svg";
import Wifi1Icon from "./wifi1.svg";
import Wifi2Icon from "./wifi2.svg";
import event from "/src/components/live-broadcast/event";
import * as RTC from "@rongcloud/plugin-rtc";
import { state } from "/src/state";
import userLogo from "/src/assets/home/placehorder-icon.png";

export default defineComponent({
  data() {
    return {
      iceCandidatePair: null as RTC.IRCCandidatePairStat | null,
    };
  },
  methods: {
    async loginOut() {
      try {
        await RuntimeUtils.leaveIMRoom();
        try {
          await request.post("/api-auth/exit", { data: {} });
        } catch {}
        RuntimeUtils.closeDevice("camera");
        RuntimeUtils.closeDevice("microphone");
        state.user = null;
        runtime.syncLikeTimer && clearTimeout(runtime.syncLikeTimer);
        ElMessage.success("退出成功");
        removeToken();
        (this as any).$router.push({
          path: "/login",
          query: {
            ...this.$route.query,
          },
        });
      } catch (e) {
        // TODO: handle error
      }
    },
    onStateReport(evt: any) {
      this.iceCandidatePair = evt.iceCandidatePair;
    },
    getWifiICon(bit: number) {
      if (bit >= 2000) {
        return WifiIcon;
      }
      if (bit >= 1000) {
        return Wifi1Icon;
      }
      return Wifi2Icon;
    },
  },
  mounted() {
    event.on("onStateReport", this.onStateReport);
  },
  beforeUnmount() {
    event.off("onStateReport", this.onStateReport);
  },
  render() {
    const iceCandidatePair = this.iceCandidatePair as RTC.IRCCandidatePairStat;
    return (
      <div class={styles.liveHeader}>
        <div class={styles.liveHeaderLeft}>
          <div class={styles.liveHeaderLeftIcon}>
            <img class={styles.liveLogo} src={state.user?.tenantLogo} alt="" />
            {state.user?.tenantName}
          </div>
          <div class={styles.liveHeaderLeftText}>
            《{state.user?.roomTitle}》
          </div>
        </div>
        <ElDropdown
          trigger={"hover"}
          placement={"bottom-end"}
          // @ts-ignore
          vSlots={{
            dropdown: () => (
              <ElDropdownMenu>
                <ElDropdownItem command="1" onClick={this.loginOut}>
                  <span>安全退出</span>
                </ElDropdownItem>
              </ElDropdownMenu>
            ),
          }}
        >
          <div class={styles.avatarWrapper}>
            {runtime.videoStatus === "liveing" && iceCandidatePair ? (
              <div
                style={{
                  background: `#5E626D`,
                  borderRadius: "6px",
                  width: "113px",
                  height: "32px",
                  lineHeight: "32px",
                  marginRight: "10px",
                  textAlign: "center",
                  display: "flex",
                  justifyContent: "center",
                }}
              >
                <span
                  style={{
                    fontSize: "14px",
                    color: "#fff",
                    flex: 1,
                  }}
                >
                  {iceCandidatePair.bitrateSend}kbps
                </span>
                <img
                  style={{
                    marginLeft: "5px",
                    marginRight: "10px",
                    width: "20px",
                  }}
                  src={this.getWifiICon(iceCandidatePair.bitrateSend)}
                />
              </div>
            ) : null}
            {state.user?.speakerPic ? (
              <img class={styles.userAvatar} src={state.user?.speakerPic} />
            ) : (
              <img class={styles.userAvatar} src={userLogo} />
            )}
            <span>{state.user?.speakerName}</span>
          </div>
        </ElDropdown>
      </div>
    );
  },
});
