import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Block, View, Image, Text } from "@tarojs/components";
import { useState, useEffect } from "react";
import "./index.less";

interface Props {
  isConnectionBlutoot: boolean;
  isShowNurse: boolean;
  isStopNurse: boolean;
  onEmitStartNurse: Function; // 每次点击item，回调事件和数据给父组件
  onEmitSwitchChange: Function;
  onEmitEndPlan: Function;
}
function Index({
  isConnectionBlutoot,
  isShowNurse,
  isStopNurse,
  onEmitStartNurse,
  onEmitSwitchChange,
  onEmitEndPlan,
}: Props) {
  const onStartNurse = () => {
    onEmitStartNurse();
  };

  const onSwitchChange = () => {
    onEmitSwitchChange();
  };

  const onEndPlan = () => {
    onEmitEndPlan();
  };

  return (
    <Block>
      <View className="footer">
        {!isShowNurse && (
          <Block>
            {isConnectionBlutoot ? (
              <View className="btn" onClick={onStartNurse}>
                开始护理
              </View>
            ) : (
              <View className="btn btn-disable" onClick={onStartNurse}>
                开始护理
              </View>
            )}
          </Block>
        )}
        {isShowNurse && (
          <View className="switch-btn-box">
            <View className="btn-item border-right" onClick={onSwitchChange}>
              {isStopNurse ? (
                <Block>
                  <Image
                    className="btn-icon"
                    src={require("../../../../img/iot/start_nurse.png")}
                    mode="aspectFill"
                  />
                  <Text className="btn-text">开始光照</Text>
                </Block>
              ) : (
                <Block>
                  <Image
                    className="btn-icon"
                    src={require("../../../../img/iot/pause_nurse.png")}
                    mode="aspectFill"
                  />
                  <Text className="btn-text">暂停光照</Text>
                </Block>
              )}
            </View>

            <View className="btn-item" onClick={onEndPlan}>
              <Image
                className="btn-icon"
                src={require("../../../../img/iot/over_nurse.png")}
                mode="aspectFill"
              />
              <Text className="btn-text">结束护理</Text>
            </View>
          </View>
        )}
      </View>
    </Block>
  );
}

export default Index;
