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

interface Props {
  ModeID: any;
  activeModeID: any;
  ModeList: any;
  ModeType: string; // all base eyes zone permeation sensitive intelligence
  isShowNurse: boolean; // 是否已进入护理详情页
  isPop: boolean; // 是否弹窗
  onEmit: Function; // 每次点击item，回调事件和数据给父组件
  onEmitShowAll: Function; // 打开弹窗按钮
  onModeLockOpen: Function; // 打开锁定弹窗
}
function Index({
  isShowNurse,
  isPop,
  ModeList,
  ModeType,
  ModeID,
  activeModeID,
  onEmit,
  onEmitShowAll,
  onModeLockOpen,
}: Props) {
  let BaseList = ModeList.filter((item) => item.modeClass === 1); // 基础护理
  let ZoneList = ModeList.filter((item) => item.modeClass === 2); // 专区护理
  let PermeationList = ModeList.filter((item) => item.modeClass === 3); // 专研促渗
  let SensitiveList = ModeList.filter((item) => item.modeClass === 4); // 敏感期护理
  let IntelligenceList = ModeList.filter((item) => item.modeClass === 5); // 智能测肤
  const onItemClick = (item) => {
    if (item.lock) {
      onModeLockOpen(); // 点击了锁定模式
      return;
    }
    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>
        )}
        {BaseList.length > 0 &&
          (ModeType === "all" || ModeType === "base" || isPop) && (
            <ScrollView
              className="mode-list-box"
              scrollX={true}
              scrollIntoView={ModeID} // itemID自动滚动到该元素位置
            >
              <View className="mode-list">
                <View className="mode-item-title">基础护理</View>
                {BaseList.map((item: any, index: any) => {
                  return (
                    <View
                      key={"base_" + index}
                      id={"mode_" + item.id}
                      className={classnames("mode-item", {
                        "mode-item-active": activeModeID === item.id,
                      })}
                      onClick={onItemClick.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 === "00:00"
                            ? "--:--"
                            : 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"
                            style="animation-iteration-count:1;"
                          />
                        </View>
                      )}
                    </View>
                  );
                })}
                <View style="width:120rpx;min-width:120rpx;height:40rpx;display:flex"></View>
              </View>
            </ScrollView>
          )}
        {ZoneList.length > 0 &&
          (ModeType === "all" || ModeType === "zone" || isPop) && (
            <ScrollView
              className="mode-list-box"
              scrollX={true}
              scrollIntoView={ModeID}
            >
              <View className="mode-list">
                <View className="mode-item-title">专区护理</View>
                {ZoneList.map((item: any, index: any) => {
                  return (
                    <View
                      key={"zone_" + index}
                      id={"mode_" + item.id}
                      onClick={onItemClick.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"
                            style="animation-iteration-count:1;"
                          />
                        </View>
                      )}
                    </View>
                  );
                })}
              </View>
            </ScrollView>
          )}

        {PermeationList.length > 0 &&
          (ModeType === "all" || ModeType === "permeation" || isPop) && (
            <ScrollView
              className="mode-list-box"
              scrollX={true}
              scrollIntoView={ModeID}
            >
              <View className="mode-list">
                <View className="mode-item-title">专研促渗</View>
                {PermeationList.map((item: any, index: any) => {
                  return (
                    <View
                      key={"permeation_" + index}
                      id={"mode_" + item.id}
                      onClick={onItemClick.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"
                            style="animation-iteration-count:1;"
                          />
                        </View>
                      )}
                    </View>
                  );
                })}
              </View>
            </ScrollView>
          )}

        {SensitiveList.length > 0 &&
          (ModeType === "all" || ModeType === "sensitive" || isPop) && (
            <ScrollView
              className="mode-list-box"
              scrollX={true}
              scrollIntoView={ModeID}
            >
              <View className="mode-list">
                <View className="mode-item-title">敏期护理</View>
                {PermeationList.map((item: any, index: any) => {
                  return (
                    <View
                      key={"sensitive_" + index}
                      id={"mode_" + item.id}
                      onClick={onItemClick.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"
                            style="animation-iteration-count:1;"
                          />
                        </View>
                      )}
                    </View>
                  );
                })}
              </View>
            </ScrollView>
          )}

        {IntelligenceList.length > 0 &&
          (ModeType === "all" || ModeType === "intelligence" || isPop) && (
            <ScrollView
              className="mode-list-box"
              scrollX={true}
              scrollIntoView={ModeID}
            >
              <View className="mode-list">
                <View className="mode-item-title">智能测肤</View>
                {IntelligenceList.map((item: any, index: any) => {
                  return (
                    <View
                      key={"intelligence_" + index}
                      id={"mode_" + item.id}
                      onClick={onItemClick.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"
                            style="animation-iteration-count:1;"
                          />
                        </View>
                      )}
                    </View>
                  );
                })}
              </View>
            </ScrollView>
          )}
      </View>
    </Block>
  );
}

export default Index;