import { Modal } from "antd";
import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { useState } from "react";
import "./bot.less";
import { PhoneTwoTone } from "@ant-design/icons";
import { webRTC } from "@/util/webRtc";
import DebounceSelect from "@/components/form/featch_select";
interface UserValue {
  label: string;
  value: string;
}
const Ec = (props: Store) => {
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const { usrStore } = props;
  const openDispatch = () => {
    try {
      setIsModalOpen(true);
    } catch (error) {
      console.log(error);
    }
  };
 
  const [value, setValue] = useState<UserValue[]>([]);
  async function fetchUserList(username: string): Promise<UserValue[]> {
    return usrStore.serchUser(username).then((res) => {
      return res.data.record.map((item) => ({
        label: item.user_name,
        value: item.identity,
      }));
    });
  }
  return (
    <>
      <span onClick={openDispatch}> 应急连线</span>
      <Modal
        title={"应急连线"}
        className="owner_model"
        width={800}
        open={isModalOpen}
        centered
        afterClose={() => {}}
        onOk={() => {}}
        footer={null}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <div className="ec_container">
          <div className="ec_left">
            <div className="ec_left_title">
              <h3>应急连线</h3>
            </div>
            <div className="u-item">
              <DebounceSelect
                mode="multiple"
                value={value}
                placeholder="输入搜索"
                fetchOptions={fetchUserList}
                onChange={(newValue) => {
                  setValue(newValue as UserValue[]);
                }}
                style={{ width: "100%" }}
              />
              <p></p>
              {value.map((item: any) => {
                return (
                  <div key={item.key}>
                    <div>姓名：{item.label} : 未在线</div>
                    <div>
                      点击呼叫：
                      <PhoneTwoTone
                        style={{ fontSize: "20px" }}
                        onClick={(items) => {
                          webRTC.init(item.key);
                          webRTC.calls();
                        }}
                      />
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="ec_right">
            <div style={{ display: "flex" }}>
              <video
                id="rtcVideo"
                style={{ width: "300px", height: "300px" }}
              ></video>
              <video
                id="remoteVideo"
                style={{ width: "300px", height: "300px" }}
              ></video>
            </div>
            <p
              className="ec_right_end"
              onClick={() => {
                webRTC.close();
              }}
            >
              结束通话
            </p>
          </div>
        </div>
      </Modal>
    </>
  );
};

export default inject("usrStore")(observer(Ec));
