@ledvance/ui-biz-bundle 1.1.56 → 1.1.58

package/src/newModules/timeSchedule/TimeScheduleDetailPage.tsx

@@ -0,0 +1,662 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import {
+  FlatList,
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/core';
+import Page from '@ledvance/base/src/components/Page';
+import I18n from '@ledvance/base/src/i18n';
+import TextField from '@ledvance/base/src/components/TextField';
+import { cloneDeep, isEqual } from 'lodash';
+import { useReactive } from 'ahooks';
+import { SwitchButton, TimerPicker, Utils } from 'tuya-panel-kit';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import LdvWeekView from '@ledvance/base/src/components/weekSelect';
+import { convertTo12HourFormat, loopText, showDialog } from '@ledvance/base/src/utils/common';
+import {
+  ApplyForItem,
+  ComponentConfig,
+  DeviceType,
+  TimeScheduleDetailState,
+  Timer,
+  TimerActions,
+} from './Interface';
+import res from '@ledvance/base/src/res';
+import {
+  useDeviceId,
+  useMoods,
+  useSystemTimeFormate,
+} from '@ledvance/base/src/models/modules/NativePropsSlice';
+import { TimeSchedulePageParams } from './TimeSchedulePage';
+import { Result } from '@ledvance/base/src/models/modules/Result';
+import DeleteButton from '@ledvance/base/src/components/DeleteButton';
+import InfoText from '@ledvance/base/src/components/InfoText';
+import SegmentControl from '@ledvance/base/src/components/segmentControl';
+// import { SceneMode } from "../mood/SceneInfo";
+import { useParams } from '@ledvance/base/src/hooks/Hooks';
+import ManualSettings from './components/ManuaSettings';
+import { defDeviceData, defMixDeviceData, defStripDeviceData } from './TimeScheduleActions';
+import MoodItem from '../mood/MoodItem';
+import { getRemoteMoodList } from '../mood/MoodActions';
+// import LoadingView from "@ledvance/base/src/components/LoadingView";
+
+const { convertX: cx } = Utils.RatioUtils;
+const { toFixedString } = Utils.NumberUtils;
+interface TimeScheduleDetailPageParams extends TimeSchedulePageParams {
+  mode: 'add' | 'update';
+  timeSchedule: Timer;
+  modDeleteTimeSchedule: (mode: TimerActions, timeSchedule: Timer) => Promise<Result<any>>;
+  refreshFn: () => void;
+}
+
+const TimeScheduleDetailPage = () => {
+  const is24HourClock = useSystemTimeFormate();
+  const props = useParams<TimeScheduleDetailPageParams>();
+  const navigation = useNavigation();
+  const devId = useDeviceId();
+  const [moods, setMoods] = useMoods();
+  const state = useReactive<TimeScheduleDetailState>({
+    timeSchedule: props.mode === 'add' ? newTimeSchedule() : cloneDeep(props.timeSchedule),
+    dps: props.mode === 'add' ? {} : props.timeSchedule.dps,
+    isManual: true, // manual ,mood
+    initSelectedSkill: [] as ApplyForItem[],
+    selectedSkill: [] as ApplyForItem[],
+    unSelectedSkill: [] as ApplyForItem[],
+    loading: false,
+    moodLoading: false,
+    manualData:
+      props.mode === 'add'
+        ? getDefaultManual(props)
+        : props.manualDataDp2Obj(props.timeSchedule.dps).deviceData,
+    mood: undefined,
+    moods: cloneDeep(moods),
+    timerId: undefined,
+    moodName: '',
+  });
+
+  useEffect(() => {
+    const { applyForDisabled, timeSchedule, applyForList, mode } = props;
+    const cannotChoose = applyForDisabled || applyForList.length === 1;
+    const cloneApplyList =
+      mode === 'add'
+        ? cloneDeep(applyForList)
+        : cloneDeep(applyForList).map(item => {
+            if (props.isMixLight && state.manualData.type === DeviceType.MixLight) {
+              return {
+                ...item,
+                enable:
+                  item.type === 'mainLight'
+                    ? state.manualData.deviceData.whiteLightSwitch
+                    : state.manualData.deviceData.colorLightSwitch,
+              };
+            }
+            if (timeSchedule?.dps?.hasOwnProperty(item.dp)) {
+              return {
+                ...item,
+                enable: timeSchedule?.dps[item.dp],
+              };
+            }
+            return item;
+          });
+
+    if (cannotChoose) {
+      state.selectedSkill = cloneApplyList;
+      state.unSelectedSkill = [];
+    } else {
+      const selectedList = cloneApplyList.filter(item =>
+        Object.keys(timeSchedule.dps).includes(item.dp)
+      );
+      const unSelectedList = cloneApplyList.filter(
+        item => !Object.keys(timeSchedule.dps).includes(item.dp)
+      );
+      state.selectedSkill = mode === 'add' ? [] : selectedList;
+      state.unSelectedSkill = mode === 'add' ? cloneApplyList : unSelectedList;
+    }
+    if (props.mode === 'update' && props.manualDataDp2Obj) {
+      const { isManual, mood } = props.manualDataDp2Obj(props.timeSchedule.dps);
+      state.isManual = isManual;
+      state.mood = mood;
+    }
+
+    state.initSelectedSkill = cloneDeep(state.selectedSkill)
+
+    if (!(Array.isArray(moods) && moods.length)) {
+      state.timerId = setTimeout(() => {
+        getRemoteMoodList(devId, props, props.featureId).then(res => {
+          if (res.success && Array.isArray(res.data)) {
+            state.moods = cloneDeep(res.data);
+            setMoods(cloneDeep(res.data));
+            if (!state.mood) state.mood = cloneDeep(res.data[0]);
+          }
+        });
+      }, 400);
+      return () => {
+        if (state.timerId) clearTimeout(state.timerId);
+      };
+    } else {
+      if (!state.mood) state.mood = cloneDeep(state.moods[0]);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (state.moods?.length) {
+      state.moodName =
+        state.moods.find(m =>
+          props.isCeilingLight
+            ? m.mainLamp.id === state.mood?.mainLamp.id &&
+              m.secondaryLamp.id === state.mood?.secondaryLamp.id
+            : m.id === state.mood?.id
+        )?.name || '';
+    }
+  }, [state.mood, state.moods]);
+
+  const getFormateTime = useCallback((time: number | string) => {
+    if (typeof time === 'number') {
+      return `${toFixedString(Math.trunc(time / 60), 2)}:${toFixedString(time % 60, 2)}`;
+    }
+    if (typeof time === 'string') {
+      const t = time.split(':');
+      return Number(t[0]) * 60 + Number(t[1]);
+    }
+    return time;
+  }, []);
+
+  const isModify = useMemo(() => {
+    if (props.mode === 'add') {
+      return true
+    }
+
+    const schedule = props.timeSchedule;
+    const manual = props.manualDataDp2Obj(props.timeSchedule?.dps).deviceData;
+    const before = {
+      ...schedule,
+      selectedSkill: state.initSelectedSkill,
+      dps: manual,
+      isManual: props.manualDataDp2Obj(props.timeSchedule.dps).isManual,
+      mood: props.manualDataDp2Obj(props.timeSchedule?.dps).mood,
+      id: 1,
+    };
+
+    const now = {
+      ...state.timeSchedule,
+      selectedSkill: state.selectedSkill,
+      dps: state.manualData,
+      isManual: state.isManual,
+      mood: state.mood,
+      id: 1,
+    };
+    return !isEqual(before, now);
+  }, [JSON.stringify(state.timeSchedule), state.manualData, state.isManual, state.mood, JSON.stringify(state.selectedSkill)]);
+
+  const allowSubmit = useMemo(() => {
+    return (
+      !!(state.timeSchedule.name.length && state.timeSchedule.name.length < 33) &&
+      !!state.selectedSkill.length &&
+      (state.isManual ? true : state.mood) &&
+      isModify
+    );
+  }, [state.timeSchedule.name, state.selectedSkill, isModify, state.isManual, state.mood]);
+
+  const showSelectedIcon = useMemo(() => {
+    return state.selectedSkill.length !== 1 && !props.applyForDisabled;
+  }, [state.selectedSkill.length, props.applyForDisabled]);
+
+  return (
+    <Page
+      backText={I18n.getLang('motion_detection_add_time_schedule_system_back_text')}
+      headlineText={I18n.getLang(
+        props.mode === 'add'
+          ? 'motion_detection_add_time_schedule_headline_text'
+          : 'edit_timeschedule_headline_text'
+      )}
+      rightButtonIcon={allowSubmit ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={async () => {
+        if (!allowSubmit || state.loading) return;
+        state.loading = true;
+        const res = await props.modDeleteTimeSchedule(props.mode, {
+          ...state.timeSchedule,
+          enable: true,
+          dps: props.manualDataObj2Dp(
+            {
+              deviceData: state.manualData,
+              isManual: state.isManual,
+              mood: state.mood,
+            },
+            state.selectedSkill
+          ),
+        });
+        console.log(res, '< ---- resss');
+        state.loading = false;
+        if (res.success) {
+          navigation.goBack();
+        }
+      }}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang('cancel_dialog_leave_unsaved_timeschedule_note')}
+      showBackDialog={!isModify}
+      loading={state.loading}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <TextField
+          style={styles.cardContainer}
+          value={state.timeSchedule.name}
+          showError={state.timeSchedule.name?.length > 32}
+          maxLength={33}
+          errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}
+          placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
+          onChangeText={(t: string) => {
+            state.timeSchedule.name = t;
+          }}
+        />
+
+        {/* pick */}
+        <TimerPicker
+          itemTextColor="#aeadb5"
+          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
+          is12Hours={!is24HourClock}
+          singlePicker={true}
+          amText={I18n.getLang('manage_user_calendar_label_am')}
+          pmText={I18n.getLang('manage_user_calendar_label_pm')}
+          startTime={getFormateTime(state.timeSchedule.time) as number}
+          symbol={''}
+          onTimerChange={startTime => {
+            state.timeSchedule.time = getFormateTime(startTime) as string;
+          }}
+        />
+
+        <LdvWeekView
+          value={state.timeSchedule.loops.split('').map(Number)}
+          style={styles.cardContainer}
+          onSelect={(index: number) => {
+            const rawIndex = index - 1;
+            const weeks = state.timeSchedule.loops.split('');
+            weeks[rawIndex] = weeks[rawIndex] === '1' ? '0' : '1';
+            state.timeSchedule.loops = weeks.join('');
+          }}
+        />
+        <Spacer />
+        <Text style={styles.cardContainer}>{loopText(state.timeSchedule.loops.split(''))}</Text>
+        <Spacer height={cx(30)} />
+
+        {/* Apply for */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>
+            {I18n.getLang('timeschedule_add_schedule_subheadline_text')}
+          </Text>
+          <Spacer height={cx(10)} />
+          <View style={styles.applyContent}>
+            {props.applyForList.length === 0 ? (
+              <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text>
+            ) : (
+              state.selectedSkill.map(skill => (
+                <View
+                  style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]}
+                  key={skill.dp}
+                >
+                  <Text style={{ color: '#000' }}>{skill.key}</Text>
+                  {showSelectedIcon && (
+                    <TouchableOpacity
+                      onPress={() => {
+                        state.selectedSkill = state.selectedSkill.filter(s => skill.dp !== s.dp);
+                        state.unSelectedSkill = [...state.unSelectedSkill, skill];
+                      }}
+                      style={{ paddingHorizontal: cx(5) }}
+                    >
+                      <Image
+                        style={{ width: cx(16), height: cx(16) }}
+                        source={res.ic_arrows_nav_clear}
+                      />
+                    </TouchableOpacity>
+                  )}
+                </View>
+              ))
+            )}
+          </View>
+          {state.unSelectedSkill.map((item: ApplyForItem) => {
+            return (
+              <TouchableOpacity
+                style={styles.applyItem}
+                key={item.dp}
+                onPress={() => {
+                  state.selectedSkill = [...state.selectedSkill, item];
+                  state.unSelectedSkill = state.unSelectedSkill.filter(s => item.dp !== s.dp);
+                }}
+              >
+                <Text style={{ color: '#000' }}>{item.key}</Text>
+                <Image
+                  style={{ width: cx(16), height: cx(16) }}
+                  source={res.device_panel_timer_add}
+                />
+              </TouchableOpacity>
+            );
+          })}
+          <Spacer />
+        </View>
+
+        {/* device state */}
+        <Text style={[styles.itemTitle, styles.cardContainer]}>
+          {I18n.getLang('timeschedule_add_schedule_subheadline2_text')}
+        </Text>
+        <Spacer height={cx(10)} />
+        {props.isSupportMood && (
+          <>
+            <SegmentControl
+              title1={I18n.getLang('timeschedule_add_schedule_switch_tab_manual_text')}
+              title2={I18n.getLang('timeschedule_add_schedule_switch_tab_mood_text')}
+              isFirst={state.isManual}
+              setIsFirst={(v: boolean) => (state.isManual = v)}
+            />
+            <Spacer height={cx(16)} />
+          </>
+        )}
+        <Spacer height={cx(10)} />
+        {state.isManual ? (
+          <ManualSettings
+            dps={state.dps}
+            applyForList={state.selectedSkill}
+            isSupportColor={props.isSupportColor}
+            isSupportBrightness={props.isSupportBrightness}
+            isSupportTemperature={props.isSupportTemperature}
+            isStripLight={props.isStripLight}
+            manualData={state.manualData}
+            onManualChange={manual => {
+              // @ts-ignore
+              state.manualData = {
+                ...state.manualData,
+                deviceData: cloneDeep(manual),
+              };
+            }}
+            onApplyChange={apply => {
+              state.selectedSkill = cloneDeep(apply);
+            }}
+          />
+        ) : (
+          <FlatList
+              data={state.moods}
+              renderItem={({ item }) => {
+                return (
+                  <MoodItem
+                    enable={state.mood?.id === item.id}
+                    mood={item}
+                    isMix={!!(props.isMixLight || props.isCeilingLight)}
+                    onSwitch={_ => {
+                      state.mood = item;
+                    }}
+                  />
+                );
+              }}
+              ListHeaderComponent={() => <Spacer height={cx(10)} />}
+              ItemSeparatorComponent={() => <Spacer />}
+              ListFooterComponent={() => <Spacer />}
+              keyExtractor={item => `${item.name}`}
+            />
+          // <ScrollView style={styles.moodScrollView} nestedScrollEnabled={true}>
+
+          // </ScrollView>
+        )}
+        <Spacer />
+
+        {/* settings */}
+        <Text style={[styles.itemTitle, styles.cardContainer]}>
+          {I18n.getLang('timeschedule_add_schedule_subheadline4_text')}
+        </Text>
+        <View style={[styles.switchButton, styles.cardContainer]}>
+          <Text style={styles.text}>{I18n.getLang('timeschedule_add_schedule_text2')}</Text>
+          <SwitchButton
+            value={state.timeSchedule.notification}
+            onValueChange={value => {
+              state.timeSchedule.notification = value;
+            }}
+          />
+        </View>
+        <Spacer />
+
+        {/* summary */}
+        <Text style={[styles.itemTitle, styles.cardContainer]}>
+          {I18n.getLang('add_sleepschedule_one_source_subheadline4_text')}
+        </Text>
+        <Spacer height={cx(10)} />
+        <View style={styles.summaryContainer}>
+          <InfoText
+            icon={res.summary_icon1}
+            text={I18n.getLang('feature_summary_frequency_headline')}
+            iconStyle={styles.summaryImg}
+            textStyle={styles.leftTitle}
+            style={styles.summaryLeft}
+          />
+          <View style={styles.summaryRight}>
+            <Text style={styles.rightItem}>
+              {loopText(state.timeSchedule.loops.split(''), state.timeSchedule.time)}
+            </Text>
+          </View>
+        </View>
+        <View style={styles.summaryContainer}>
+          <InfoText
+            icon={res.summary_icon2}
+            text={I18n.getLang('feature_summary_time_headline')}
+            iconStyle={styles.summaryImg}
+            textStyle={styles.leftTitle}
+            style={styles.summaryLeft}
+          />
+          <View style={styles.summaryRight}>
+            <Text style={styles.rightItem}>
+              {is24HourClock
+                ? state.timeSchedule.time
+                : convertTo12HourFormat(state.timeSchedule.time)}
+            </Text>
+          </View>
+        </View>
+        <View style={[styles.summaryContainer, { alignItems: 'flex-start' }]}>
+          <InfoText
+            icon={res.summary_icon3}
+            text={I18n.getLang('motion_detection_add_time_schedule_actions_text1')}
+            iconStyle={styles.summaryImg}
+            textStyle={styles.leftTitle}
+            style={styles.summaryLeft}
+          />
+          <View style={{ marginLeft: cx(16), flex: 1 }}>
+            {state.isManual
+              ? !!state.selectedSkill.length && (
+                  <>
+                    {!!state.selectedSkill.filter(skill => skill.enable).length && (
+                      <>
+                        <Text style={{ marginLeft: cx(5) }}>
+                          {I18n.getLang('feature_summary_action_txt_1')}
+                        </Text>
+                        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                          {state.selectedSkill
+                            .filter(skill => skill.enable)
+                            .map(item => (
+                              <View
+                                style={[
+                                  styles.summaryRight,
+                                  { marginLeft: cx(5), marginBottom: cx(5) },
+                                ]}
+                                key={item.dp}
+                              >
+                                <Text style={[styles.rightItem]}>{item.key}</Text>
+                              </View>
+                            ))}
+                        </View>
+                      </>
+                    )}
+
+                    {!!state.selectedSkill.filter(skill => !skill.enable).length && (
+                      <>
+                        <Text style={{ marginLeft: cx(5) }}>
+                          {I18n.getLang('feature_summary_action_txt_2')}
+                        </Text>
+                        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                          {state.selectedSkill
+                            .filter(skill => !skill.enable)
+                            .map(item => (
+                              <View
+                                style={[
+                                  styles.summaryRight,
+                                  { marginLeft: cx(5), marginBottom: cx(5) },
+                                ]}
+                                key={item.dp}
+                              >
+                                <Text style={[styles.rightItem]}>{item.key}</Text>
+                              </View>
+                            ))}
+                        </View>
+                      </>
+                    )}
+                  </>
+                )
+              : !!state.moodName && (
+                  <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                    <View style={[styles.summaryRight, { marginLeft: cx(5) }]}>
+                      <Text style={styles.rightItem}>{state.moodName}</Text>
+                    </View>
+                  </View>
+                )}
+          </View>
+        </View>
+        <Spacer height={cx(30)} />
+
+        {/* delete */}
+        {props.mode === 'update' && (
+          <View style={{ marginHorizontal: cx(24) }}>
+            <DeleteButton
+              text={I18n.getLang('edit_timeschedule_bttn_text')}
+              onPress={() => {
+                showDialog({
+                  method: 'confirm',
+                  title: I18n.getLang('cancel_dialog_delete_item_timeschedule_titel'),
+                  subTitle: I18n.getLang('cancel_dialog_delete_item_timeschedule_description'),
+                  onConfirm: async (_, { close }) => {
+                    state.loading = true;
+                    close();
+                    const res = await props.modDeleteTimeSchedule('delete', state.timeSchedule);
+                    state.loading = false;
+                    if (res.success) {
+                      navigation.goBack();
+                    }
+                  },
+                });
+              }}
+            />
+            <Spacer />
+          </View>
+        )}
+      </ScrollView>
+    </Page>
+  );
+};
+
+const newTimeSchedule = () => {
+  return {
+    enable: true,
+    loops: '0000000',
+    notification: false,
+    name: '',
+    time: `${toFixedString(new Date().getHours(), 2)}:${toFixedString(new Date().getMinutes(), 2)}`,
+    dps: {},
+    id: -1,
+  };
+};
+
+const getDefaultManual = (props: TimeScheduleDetailPageParams): ComponentConfig => {
+  const deviceType =
+    props.isStripLight || props.isCeilingLight
+      ? DeviceType.StripLight
+      : props.isMixLight
+      ? DeviceType.MixLight
+      : DeviceType.LightSource;
+  const deviceData =
+    deviceType === DeviceType.StripLight
+      ? defStripDeviceData
+      : deviceType === DeviceType.MixLight
+      ? defMixDeviceData
+      : defDeviceData;
+  // @ts-ignore
+  return {
+    type: deviceType,
+    deviceData: {
+      ...deviceData,
+      isColorMode: props.isSupportColor ? true : false,
+    },
+  };
+};
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    marginHorizontal: cx(24),
+  },
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  applyContent: {
+    backgroundColor: '#f6f6f6',
+    borderRadius: 4,
+    minHeight: cx(55),
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: cx(10),
+    paddingTop: cx(10),
+  },
+  applyItem: {
+    paddingLeft: cx(5),
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    height: cx(35),
+  },
+  moodScrollView: {
+    maxHeight: cx(500),
+  },
+  summaryContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    marginBottom: cx(10),
+    marginHorizontal: cx(24),
+  },
+  summaryImg: {
+    height: cx(12),
+    width: cx(12),
+    tintColor: '#000',
+  },
+  summaryLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: cx(90),
+  },
+  leftTitle: {
+    fontSize: cx(14),
+    color: '#000',
+    marginTop: 0,
+  },
+  summaryRight: {
+    flexDirection: 'column',
+    marginLeft: cx(21),
+    backgroundColor: '#cbcbcb',
+    borderRadius: cx(16),
+    alignItems: 'center'
+  },
+  rightItem: {
+    paddingHorizontal: cx(12),
+    color: '#000',
+  },
+  switchButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: cx(10),
+  },
+  text: {
+    color: '#000',
+  },
+});
+
+export default TimeScheduleDetailPage;