import classnames from "classnames";
import Taro from "@tarojs/taro";
import { Component } from "react";

import {
  Block,
  View,
  Image,
  Text,
  Button,
  PageMeta,
  Video,
} from "@tarojs/components";

import { Popup } from "@antmjs/vantui";

import "../../popup/popup.less";
import "./device-connection-popup.less";

import { go } from "@/utils/traoAPI";

/*** props
 * isLarge            是否大尺寸
 * isShow             是否显示
 * data               数据
 * @confirm           关闭回调
 * ***/
export default class DeviceConnectPopup extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "蓝牙提示弹窗",
      toRight: false,
      isClick: false,
    };
  }

  async onLoad() {}
  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  initData = () => {
    if (this.props.siteData) {
      let arr = JSON.parse(JSON.stringify(this.props.siteData));
      this.setState({ siteList: arr });
    }
  };

  onClose = () => {
    this.props.close();
  };

  onConfirm = () => {
    this.props.confirm();
  };

  onReconnect = () => {
    this.props.reconnect();
  };

  onClickStop = (e) => {
    e.stopPropagation();
  };

  isImage = (url) => {
    if (url) {
      if (url.includes(".mp4")) {
        return false;
      }
    }
    return true;
  };

  render() {
    let {
      isShow,
      data,
      // connectionStatus,
      isConnection,
      currentDeviceType,
      error,
      isDisconnect,
    } = this.props;
    console.log("data connection", data, data.bluetoothConnecting);

    return (
      <Block>
        <PageMeta pageStyle={isShow ? "overflow: hidden;" : ""} />
        <Popup
          style="background-color: #fff;"
          show={isShow}
          closeOnClickOverlay={false}
          round
          overlayStyle="width: 100vw;padding: 0;"
          onClick={this.onClickStop}
        >
          <View
            className="at-icon at-icon-close site-close"
            onClick={this.onClose}
          ></View>

          {/* 非错误弹窗 */}
          {!error && !isDisconnect && (
            <View className={classnames("common-box device-connection-box")}>
              <View
                className={classnames("common-popup-title", "margin-samll")}
              >
                {data.model === "WL200" && (
                  <Block>
                    {currentDeviceType !== "WE200"
                      ? data.bluetoothConnectingTitle
                      : data.we200BluetoothConnectingTitle}
                  </Block>
                )}
                {data.model !== "WL200" && (
                  <Block>{data.bluetoothConnectingTitle}</Block>
                )}
              </View>
              <View className="device-popup-content-box">
                {data.model === "WL200" && (
                  <Block>
                    {!this.isImage(data.bluetoothConnecting) ? (
                      <Video
                        className="videos"
                        autoplay
                        loop
                        objectFit="cover"
                        enablePlayGesture
                        showFullscreenBtn={false}
                        playBtnPosition="center"
                        src={
                          currentDeviceType !== "WE200"
                            ? data.bluetoothConnecting
                            : data.we200BluetoothConnecting
                        }
                      />
                    ) : (
                      <Image
                        className="images"
                        src={
                          currentDeviceType !== "WE200"
                            ? data.bluetoothConnecting
                            : data.we200BluetoothConnecting
                        }
                        mode="aspectFill"
                      />
                    )}
                  </Block>
                )}
                {data.model !== "WL200" && (
                  <Block>
                    {!this.isImage(data.bluetoothConnecting) ? (
                      <Video
                        className="videos"
                        autoplay
                        loop
                        objectFit="cover"
                        enablePlayGesture
                        showFullscreenBtn={false}
                        playBtnPosition="center"
                        src={data.bluetoothConnecting}
                      />
                    ) : (
                      <Image
                        className="images"
                        src={data.bluetoothConnecting}
                        mode="aspectFill"
                      />
                    )}
                  </Block>
                )}

                <View className="blue-device-tips">
                  {currentDeviceType === "WE200" && (
                    <Block>
                      <View className="block block-msg-one">
                        <View className="icon">
                          <Image
                            className="images"
                            src={require("../../../img/select_success.png")}
                            mode="aspectFill"
                          />
                        </View>
                        <View className="tip success">
                          请打开面罩电源，并保持开机状态
                        </View>
                      </View>
                    </Block>
                  )}

                  {currentDeviceType !== "WE200" && (
                    <Block>
                      {isConnection ? (
                        <Block>
                          <View className="block block-msg-one">
                            <View className="icon">
                              <Image
                                className="images"
                                src={require("../../../img/selected_success.png")}
                                mode="aspectFill"
                              />
                            </View>
                            <View className="tip">
                              {data.bluetoothConnectingContent}
                            </View>
                          </View>
                        </Block>
                      ) : (
                        <Block>
                          <View className="block block-msg-one">
                            <View className="icon">
                              <Image
                                className="images"
                                src={require("../../../img/select_success.png")}
                                mode="aspectFill"
                              />
                            </View>
                            <View className="tip success">
                              {data.bluetoothConnectingContent}
                            </View>
                          </View>
                        </Block>
                      )}
                    </Block>
                  )}
                </View>
              </View>
              <View className="common-popup-btns">
                <Button
                  className="common-popup-btn"
                  style="background-color: #fff;color: #000"
                  onClick={this.onClose}
                >
                  取消
                </Button>
              </View>
            </View>
          )}

          {/* 断开弹窗 */}
          {!error && isDisconnect && (
            <View className={classnames("common-box", "device-connection-box")}>
              <View
                className={classnames("common-popup-title", "margin-samll")}
              >
                {data.bluetoothClosedTitle}
              </View>
              <View className="device-popup-content-box">
                {!this.isImage(data.bluetoothClosed) ? (
                  <Video
                    className="videos"
                    autoplay
                    loop
                    objectFit="cover"
                    enablePlayGesture
                    showFullscreenBtn={false}
                    playBtnPosition="center"
                    src={data.bluetoothClosed}
                  />
                ) : (
                  <Image
                    className="images"
                    src={data.bluetoothClosed}
                    mode="aspectFill"
                  />
                )}

                <View className="error-block">
                  <View className="tip1">未搜索到设备</View>
                  <View className="tip2">
                    {data.bluetoothClosedContent || "请重启设备后点击重新连接"}
                  </View>
                </View>
              </View>
              <View className="common-popup-btns device-popup-btns">
                <Button className="common-popup-btn2" onClick={this.onClose}>
                  取消
                </Button>
                <Button
                  className="common-popup-btn2"
                  onClick={this.onReconnect}
                >
                  重新连接
                </Button>
              </View>
            </View>
          )}

          {/* 错误失败弹窗 */}
          {error && !isDisconnect && (
            <View className={classnames("common-box", "device-connection-box")}>
              <View
                className={classnames("common-popup-title", "margin-samll")}
              >
                {data.bluetoothConnectFailTitle}
              </View>
              <View className="device-popup-content-box">
                {!this.isImage(data.bluetoothConnectFail) ? (
                  <Video
                    className="videos"
                    autoplay
                    loop
                    objectFit="cover"
                    enablePlayGesture
                    showFullscreenBtn={false}
                    playBtnPosition="center"
                    src={data.bluetoothConnectFail}
                  />
                ) : (
                  <Image
                    className="images"
                    src={data.bluetoothConnectFail}
                    mode="aspectFill"
                  />
                )}

                <View className="error-block">
                  <View className="tip1">未搜索到设备</View>
                  <View className="tip2">
                    {data.bluetoothConnectFailContent ||
                      "请重启设备后点击重新连接"}
                  </View>
                </View>
              </View>
              <View className="common-popup-btns device-popup-btns">
                <Button className="common-popup-btn2" onClick={this.onClose}>
                  取消
                </Button>
                <Button
                  className="common-popup-btn2"
                  onClick={this.onReconnect}
                >
                  重新连接
                </Button>
              </View>
            </View>
          )}
        </Popup>
      </Block>
    );
  }
}
