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

interface Props {
  ModeID: any;
  activeModeID: any;
  ModeList: any;
  ModeType: string; // all visor cabin yimeish
  ActiveModeItem: any;
  isShowNurse: boolean; // 是否已进入护理详情页
  isPop: boolean; // 是否弹窗
  onEmit: Function; // 每次点击item，回调事件和数据给父组件
  onEmitShowAll: Function; // 打开弹窗按钮
}
function Index({
  isShowNurse,
  isPop,
  ModeList,
  ModeType,
  ActiveModeItem,
  ModeID,
  activeModeID,
  onEmit,
  onEmitShowAll,
}: Props) {
  let VisorList = ModeList.filter((item) => item.modeClass === 1); // 面罩模式
  let CabinList = ModeList.filter((item) => item.modeClass === 2); // 舱体模式
  let YimeishList = ModeList.filter((item) => item.modeClass === 3); // 医美术后

  // const [ModeID, setModeID] = useState<any>("mode_" + ActiveModeItem.id);
  // const [activeModeID, setactiveModeID] = useState<any>(ActiveModeItem.id);

  const yimeishClick = (item) => {
    onEmit(item);
  };

  const cabinClick = (item) => {
    onEmit(item);
  };

  const visorClick = (item) => {
    onEmit(item);
  };

  const showAll = () => {
    onEmitShowAll();
  };

  return (
    <Block>
      <View className="mode-list-main">
        {!isPop && ModeList.length > 0 && isShowNurse && (
          <View className="change-all-mode-btn" onClick={showAll}>
            <View className="title">全部模式</View>
            <Image
              className="icon"
              src={require("../../../../img/iot/mode-switch.png")}
            />
          </View>
        )}
        {VisorList.length > 0 &&
          (ModeType === "all" || ModeType === "visor" || isPop) && (
            <ScrollView
              className="mode-list-box"
              scroll-x="true"
              scrollIntoView={ModeID} // itemID自动滚动到该元素位置
            >
              <View className="mode-list">
                <View className="mode-item-title">面罩模式</View>
                {VisorList.map((item: any, index: any) => {
                  return (
                    <View
                      key={"visor_" + index}
                      id={"visor_" + item.id}
                      className={classnames("mode-item", {
                        "mode-item-active": activeModeID === item.id,
                      })}
                      onClick={visorClick.bind(this, item)}
                    >
                      <View
                        className={classnames("new", {
                          "is-new": item.isNew === 1,
                        })}
                      >
                        NEW
                      </View>
                      <View className="mode-info">
                        <View className="mode-info-title">{item.modeName}</View>
                        <View className="mode-info-time">
                          {item.modeTimeStr}
                        </View>
                        <View
                          className={classnames("mode-info-select", {
                            "is-select": activeModeID === item.id,
                          })}
                        >
                          {activeModeID === item.id && (
                            <View className="mode-info-select-point"></View>
                          )}
                        </View>
                      </View>

                      {activeModeID === item.id && (
                        <View className="mode-pic">
                          <Image src={item.modeBanner} mode="aspectFill" />
                        </View>
                      )}
                    </View>
                  );
                })}
                <View style="width:120rpx;min-width:120rpx;height:40rpx;display:flex"></View>
              </View>
            </ScrollView>
          )}
        {CabinList.length > 0 &&
          (ModeType === "all" || ModeType === "cabin" || isPop) && (
            <ScrollView
              className="mode-list-box"
              scrollX={true}
              scrollIntoView={ModeID}
            >
              <View className="mode-list">
                <View className="mode-item-title">舱体模式</View>
                {CabinList.map((item: any, index: any) => {
                  return (
                    <View
                      key={"cabin_" + index}
                      id={"cabin_" + item.id}
                      onClick={cabinClick.bind(this, item)}
                      className={classnames("mode-item", {
                        "mode-item-active": activeModeID === item.id,
                      })}
                    >
                      <View
                        className={classnames("new", {
                          "is-new": item.isNew === 1,
                        })}
                      >
                        NEW
                      </View>
                      <View className="mode-info">
                        <View className="mode-info-title">{item.modeName}</View>
                        <View className="mode-info-time">
                          {item.modeTimeStr}
                        </View>
                        <View
                          className={classnames("mode-info-select", {
                            "is-select": activeModeID === item.id,
                          })}
                        >
                          {activeModeID === item.id && (
                            <View className="mode-info-select-point"></View>
                          )}
                        </View>
                      </View>

                      {activeModeID === item.id && (
                        <View className="mode-pic">
                          <Image src={item.modeBanner} mode="aspectFill" />
                        </View>
                      )}
                    </View>
                  );
                })}
              </View>
            </ScrollView>
          )}

        {YimeishList.length > 0 &&
          (ModeType === "all" || ModeType === "yimeish" || isPop) && (
            <ScrollView
              className="mode-list-box"
              scrollX={true}
              scrollIntoView={ModeID}
            >
              <View className="mode-list">
                <View className="mode-item-title">医美术后</View>
                {YimeishList.map((item: any, index: any) => {
                  return (
                    <View
                      key={"yimeish_" + index}
                      id={"yimeish_" + item.id}
                      onClick={yimeishClick.bind(this, item)}
                      className={classnames("mode-item", {
                        "mode-item-active": activeModeID === item.id,
                      })}
                    >
                      <View
                        className={classnames("new", {
                          "is-new": item.isNew === 1,
                        })}
                      >
                        NEW
                      </View>
                      <View className="mode-info">
                        <View className="mode-info-title">{item.modeName}</View>
                        <View className="mode-info-time">
                          {item.modeTimeStr}
                        </View>
                        <View
                          className={classnames("mode-info-select", {
                            "is-select": activeModeID === item.id,
                          })}
                        >
                          {activeModeID === item.id && (
                            <View className="mode-info-select-point"></View>
                          )}
                        </View>
                      </View>

                      {activeModeID === item.id && (
                        <View className="mode-pic">
                          <Image src={item.modeBanner} mode="aspectFill" />
                        </View>
                      )}
                    </View>
                  );
                })}
              </View>
            </ScrollView>
          )}
      </View>
    </Block>
  );
}

export default Index;
