@ledvance/ui-biz-bundle 1.1.69 → 1.1.71

package/src/modules/sleepWakeup/SleepWakeUpDetailPage.tsx

@@ -1,617 +1,617 @@
-import React, { useCallback, useEffect } from "react";
-import { FlatList, ScrollView, StyleSheet, Text, View, TouchableOpacity, Image } from "react-native";
-import { useNavigation, useRoute } from '@react-navigation/native'
-import Page from "@ledvance/base/src/components/Page";
-import I18n from "@ledvance/base/src/i18n";
-import res from "@ledvance/base/src/res";
-import { Utils } from "tuya-panel-kit";
-import { useReactive, useUpdateEffect } from "ahooks";
-import TextField from "@ledvance/base/src/components/TextField";
-import LdvTopName from "@ledvance/base/src/components/ldvTopName";
-import LdvPickerView from "@ledvance/base/src/components/ldvPickerView";
-import LdvWeekView from '@ledvance/base/src/components/weekSelect'
-import { loopText, toFixed } from "@ledvance/base/src/utils/common";
-import DeviceState from "./DeviceState";
-import Spacer from "@ledvance/base/src/components/Spacer";
-import DeleteButton from "@ledvance/base/src/components/DeleteButton";
-import { SleepWakeUpPageRouteParams } from "./SleepWakeUpPage";
-import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
-import { cloneDeep, isEqual } from "lodash";
-import dayjs from "dayjs";
-
-const { convertX: cx } = Utils.RatioUtils;
-
-interface SleepWakeUpDetailPageProps extends SleepWakeUpPageRouteParams {
-  mode: 'add' | 'edit'
-  isSleep: boolean
-  scheduleItem: any
-  setSleepPlan: (plan: any[]) => void
-  setWakeUpPlan: (plan: any[]) => void
-  conflictFn: (item: any, editList: any[], goback: boolean) => void
-  deleteDialog: (item: any) => Promise<any>
-  sleepPlan: any[]
-  wakeUpPlan: any[]
-}
-
-const SleepWakeUpDetailPage = () => {
-  const navigation = useNavigation()
-  const props = useRoute().params as SleepWakeUpDetailPageProps
-  const { scheduleItem } = props
-  const state = useReactive({
-    name: '',
-    hour: '00',
-    minute: '01',
-    loop: [0, 0, 0, 0, 0, 0, 0],
-    selectedSkill: props.dps,
-    skillList: [] as any[],
-    fadeOut: 5,
-    fadeIn: 5,
-    duration: 5,
-    fadeOutHour: '00',
-    fadeOutMinute: '05',
-    fadeInHour: '00',
-    fadeInMinute: '05',
-    durationHour: '00',
-    durationMinute: '05',
-    durationStatus: false,
-    mixActions: {
-      whiteLightSwitch: true,
-      colorLightSwitch: false,
-      mixRgbcwEnabled: true,
-      hue: 360,
-      sat: 100,
-      lightness: 100,
-      brightness: 100,
-      colorTempPercent: 100,
-    },
-    singleActions: {
-      isColor: false,
-      brightness: 100,
-      temperature: 100,
-      h: 0,
-      s: 100,
-      v: 100
-    }
-  })
-
-  useEffect(() => {
-    if (props.mode === 'edit' && scheduleItem) {
-      console.log(scheduleItem, '< -- scheduleItem')
-      state.hour = scheduleItem.time[0].toString().padStart(2, '0')
-      state.minute = scheduleItem.time[1].toString().padStart(2, '0')
-      state.name = scheduleItem.name
-      state.loop = scheduleItem.loops
-
-      state.singleActions.isColor = scheduleItem.brightness === 0 && scheduleItem.temperature === 0
-      if (state.singleActions.isColor) {
-        state.singleActions.h = scheduleItem.hue
-        state.singleActions.s = scheduleItem.sat
-        state.singleActions.v = scheduleItem.value
-      } else {
-        state.singleActions.brightness = scheduleItem.brightness
-        state.singleActions.temperature = scheduleItem.temperature
-      }
-
-      if (props.isMixRGBWLamp) {
-        state.mixActions.hue = scheduleItem.hue
-        state.mixActions.sat = scheduleItem.sat
-        state.mixActions.lightness = scheduleItem.value
-        state.mixActions.colorLightSwitch = !scheduleItem.brightness && !scheduleItem.colorTempPercent
-        state.mixActions.brightness = scheduleItem.brightness
-        state.mixActions.colorTempPercent = scheduleItem.temperature
-      }
-
-      const h = Math.trunc(scheduleItem.fade / 60)
-      const m = scheduleItem.fade % 60
-
-      if (props.isSleep) {
-        state.fadeOut = scheduleItem.fade
-        state.fadeOutHour = h.toString().padStart(2, '0')
-        state.fadeOutMinute = m.toString().padStart(2, '0')
-      } else {
-        state.fadeIn = scheduleItem.fade
-        state.fadeInHour = h.toString().padStart(2, '0')
-        state.fadeInMinute = m.toString().padStart(2, '0')
-        state.duration = scheduleItem.duration
-        state.durationStatus = scheduleItem.duration > 0
-        state.durationHour = Math.trunc(scheduleItem.duration / 60).toString().padStart(2, '0')
-        state.durationMinute = (scheduleItem.duration % 60).toString().padStart(2, '0')
-      }
-    } else {
-      const date = new Date()
-      state.hour = toFixed(date.getHours(), 2)
-      state.minute = toFixed(date.getMinutes(), 2)
-      state.singleActions.isColor = !!props.isGARDOT && !(props.isRGBLamp || props.isRGBWLamp)
-    }
-  }, [])
-
-  useUpdateEffect(() => {
-    const min = state.fadeOutHour === '02' ? '00' : (state.fadeOutHour === '00' && state.fadeOutMinute === '00') ? '05' : state.fadeOutMinute
-    state.fadeOutMinute = min
-    state.fadeOut = (Number(state.fadeOutHour) * 60) + Number(min)
-  }, [state.fadeOutHour, state.fadeOutMinute])
-
-  useUpdateEffect(() => {
-    const min = state.fadeInHour === '02' ? '00' : (state.fadeInHour === '00' && state.fadeInMinute === '00') ? '05' : state.fadeInMinute
-    state.fadeInMinute = min
-    state.fadeIn = (Number(state.fadeInHour) * 60) + Number(min)
-  }, [state.fadeInHour, state.fadeInMinute])
-
-  useUpdateEffect(() => {
-    const min = state.durationHour === '02' ? '00' : (state.durationHour === '00' && state.durationMinute === '00') ? '05' : state.durationMinute
-    state.durationMinute = min
-    state.duration = (Number(state.durationHour) * 60) + Number(min)
-  }, [state.durationHour, state.durationMinute])
-
-  const getNewItem = () =>{
-    return {
-      enable: 1,
-      loops: state.loop,
-      time: [parseInt(state.hour), parseInt(state.minute)],
-      hue: state.singleActions.isColor ? state.singleActions.h : 0,
-      sat: state.singleActions.isColor ? state.singleActions.s : 0,
-      value: state.singleActions.isColor ? state.singleActions.v : 0,
-      brightness: state.singleActions.isColor ? 0 : state.singleActions.brightness,
-      temperature: state.singleActions.isColor ? 0 : state.singleActions.temperature,
-      name: state.name,
-      isSleep: props.isSleep,
-      fade: props.isSleep ? state.fadeOut : state.fadeIn
-    }
-  }
-
-  const postActions = async () => {
-    const baseItemData: any = getNewItem()
-    if (props.mode === 'edit') baseItemData.index = scheduleItem.index
-
-    if (props.isMixRGBWLamp) {
-      baseItemData.hue = state.mixActions.colorLightSwitch ? state.mixActions.hue : 0
-      baseItemData.sat = state.mixActions.colorLightSwitch ? state.mixActions.sat : 0
-      baseItemData.value = state.mixActions.colorLightSwitch ? state.mixActions.lightness : 0
-      baseItemData.brightness = state.mixActions.colorLightSwitch ? 0 : state.mixActions.brightness
-      baseItemData.temperature = state.mixActions.colorLightSwitch ? 0 : state.mixActions.colorTempPercent
-    }
-    if (!props.isSleep) {
-      baseItemData.duration = state.durationStatus && state.duration || 0
-    }
-    const baseList = props.isSleep ? props.sleepPlan : props.wakeUpPlan
-    if (props.mode === 'add') {
-      const newList = [...baseList, baseItemData]
-      props.conflictFn(baseItemData, newList, true)
-    } else {
-      const idx = baseList.findIndex(item => item.index === scheduleItem.index)
-      if (idx !== -1) {
-        baseList.splice(idx, 1, baseItemData)
-      }
-      props.conflictFn(baseItemData, baseList, true)
-    }
-  }
-
-  const selectWeekAction = useCallback((idx: number) => {
-    const newLoop = state.loop.map((item, tempIndex) => {
-      if (tempIndex === idx - 1) {
-        return item > 0 ? 0 : 1;
-      }
-      return item;
-
-    });
-    state.loop = newLoop;
-  }, [])
-
-  const showClearIcon = useCallback(() => {
-    return false
-  }, [])
-
-  const showSubmit = useCallback(() => {
-    return state?.name?.length > 0 && state?.name?.length <= 32 && hasSelected()
-  }, [state.name])
-
-  const handelSkill = (v, i) => {
-
-  }
-
-  const hasSelected = () => {
-    return !!state.selectedSkill.length
-  }
-
-
-
-  const renderItem = ({ item }) => {
-    return (
-      <View style={{
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: '#fff',
-        marginBottom: cx(8)
-      }}>
-        <Text
-          style={{
-            color: '#000',
-            fontSize: 14,
-            marginHorizontal: cx(6),
-            marginVertical: cx(9),
-          }}
-        >
-          {item.label}
-        </Text>
-        {showClearIcon() && <TouchableOpacity onPress={() => handelSkill('lower', item)}>
-          <Image style={{ width: cx(16), height: cx(16), marginRight: cx(5) }} source={res.ic_arrows_nav_clear} />
-        </TouchableOpacity>}
-      </View>
-    );
-  };
-
-  const editMixActions = (mix) => {
-    state.mixActions = cloneDeep(mix)
-  }
-
-  const editSingleActions = (single) => {
-    state.singleActions = cloneDeep(single)
-  }
-
-  const formateTime = (v, isSleep) => {
-    const date = dayjs().format('YYYY-MM-DD')
-    const time = dayjs(`${date} ${state.hour}:${state.minute}`)
-    return isSleep ? time.add(Number(v), 'm').format('HH:mm') : time.subtract(Number(v), 'm').format('HH:mm')
-  }
-
-  const formateDurationTime = () => {
-    const duration = state.durationStatus && Number(state.duration) || 0
-    const date = dayjs().format('YYYY-MM-DD')
-    const time = dayjs(`${date} ${state.hour}:${state.minute}`)
-    const startTime = props.isSleep ? time.format('HH:mm') : time.subtract(state.fadeIn, 'm').format('HH:mm')
-    const data = props.isSleep ? Number(state.fadeOut) : duration
-    const endTime = time.add(data, 'm').format('HH:mm')
-    return {
-      durationTime: `${startTime} - ${endTime}`,
-      endTime
-    }
-  }
-
-  const showBackDialog = () =>{
-    const newItem:any = {
-      ...getNewItem(),
-      index: props.scheduleItem?.index,
-      enable: props.scheduleItem?.enable
-    }
-    if(!props.isSleep){
-      newItem.duration = state.durationStatus && state.duration || 0
-    }
-    return props.mode === 'edit' && !isEqual(props.scheduleItem, newItem)
-  }
-
-
-
-  return (
-    <Page
-      backText={I18n.getLang('add_sleepschedule_one_source_system_back_text')}
-      showBackDialog={showBackDialog()}
-      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
-      backDialogContent={I18n.getLang(props.isSleep ? 'cancel_dialog_leave_unsaved_sleepschedule_note' : 'cancel_dialog_leave_unsaved_wakeupschedule_note')}
-      rightButtonIcon={showSubmit() ? res.ic_check : res.ic_uncheck}
-      rightButtonIconClick={showSubmit() && postActions || undefined}
-    >
-      <ScrollView
-        nestedScrollEnabled={true}
-        showsHorizontalScrollIndicator={false}
-        showsVerticalScrollIndicator={false}
-      >
-        <LdvTopName title={I18n.getLang(props.isSleep ? (props.mode === 'add' ? 'add_sleepschedule_one_source_headline_text' : 'edit_sleepschedule_headline_text') : (props.mode === 'add' ? 'add_wakeupschedule_one_source_headline_text' : 'edit_wakeupschedule_headline_text'))} />
-        <TextField
-          style={styles.cardContainer}
-          value={state.name}
-          showError={state.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.name = t;
-          }}
-        />
-        {/* pick */}
-        <LdvPickerView
-          style={styles.picker}
-          hour={state.hour}
-          minute={state.minute}
-          setHour={v => (state.hour = v)}
-          setMinute={v => (state.minute = v)}
-        // unit={['h', 'min']}
-        />
-
-        {/* week */}
-        <View style={styles.week}>
-          <LdvWeekView style={{}} value={state.loop} onSelect={selectWeekAction} />
-          <Spacer />
-          <Text style={{ marginHorizontal: cx(24) }}>{loopText(state.loop)}</Text>
-          <Spacer />
-        </View>
-
-        {/* Apply for */}
-        <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
-          <View
-            style={{
-              backgroundColor: '#f6f6f6',
-              borderRadius: 4,
-              minHeight: cx(50),
-              flex: 1,
-              justifyContent: 'center',
-            }}
-          >
-            {!hasSelected() ? <Text style={{ marginLeft: cx(10) }}>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
-              <View
-                style={{
-                  marginHorizontal: cx(8),
-                  marginTop: cx(8),
-                  borderRadius: 4,
-                }}
-              >
-                <FlatList
-                  data={state.selectedSkill}
-                  renderItem={item => renderItem(item)}
-                  keyExtractor={(item) => item.dpId + 'selected'}
-                />
-              </View>}
-          </View>
-          {state.skillList.map((item) => {
-            return (
-              <TouchableOpacity style={styles.skillListItem} key={item.dpId + 'skill'} onPress={() => handelSkill('add', item)}>
-                <Text style={{ color: '#000' }}>{item.label}</Text>
-                <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
-              </TouchableOpacity>
-            )
-          })}
-          <Spacer />
-        </View>
-
-        {/* Device state */}
-        <View>
-          <Text style={[styles.itemTitle, styles.cardContainer]}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
-          <DeviceState
-            mixActions={state.mixActions}
-            singleActions={state.singleActions}
-            editMixFn={editMixActions}
-            editSingleFn={editSingleActions}
-            isSupportColor={props.isSupportColor}
-            isSupportBrightness={true}
-            isSupportTemperature={true}
-            isMixRGBWLamp={props.isMixRGBWLamp}
-          />
-        </View>
-        <Spacer />
-        {/* Settings */}
-        <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
-          <Spacer />
-          <Text>{I18n.getLang(props.isSleep ? 'add_sleepschedule_one_source_settings_text' : 'add_wakeupschedule_settings_text')}</Text>
-          <LdvPickerView
-            style={styles.picker}
-            hour={props.isSleep ? state.fadeOutHour : state.fadeInHour}
-            minute={props.isSleep ? state.fadeOutMinute : state.fadeInMinute}
-            minutesStep={5}
-            setHour={v => {
-              if (props.isSleep) {
-                state.fadeOutHour = v
-              } else {
-                state.fadeInHour = v
-              }
-            }}
-            setMinute={v => {
-              if (props.isSleep) {
-                state.fadeOutMinute = v
-              } else {
-                state.fadeInMinute = v
-              }
-            }}
-            unit={['h', 'min']}
-            maxHour={3}
-          />
-          <Text>{I18n.formatValue(props.isSleep ? 'add_sleepschedule_one_source_settings_text2' : 'add_wakeupschedule_settings_text2', `${formateTime(props.isSleep ? state.fadeOut : state.fadeIn, props.isSleep)}`)}</Text>
-          <Spacer />
-          {!props.isSleep &&
-            <View style={{ marginHorizontal: -cx(16), marginTop: -cx(20) }}>
-              <LdvSwitch
-                title={I18n.getLang('add_wakeupschedule_settings_text3')}
-                enable={state.durationStatus}
-                color="#fff"
-                colorAlpha={1}
-                setEnable={() => {
-                  state.durationStatus = !state.durationStatus
-                  state.duration = 5
-                  state.durationHour = '00'
-                  state.durationMinute = '05'
-                  if (!state.durationStatus) {
-                    state.duration = 0
-                  }
-                }}
-              />
-            </View>
-          }
-          {state.durationStatus && <>
-            <Text style={{ fontSize: cx(14) }}>{I18n.getLang('add_wakeupschedule_settings_text4')}</Text>
-            <LdvPickerView
-              style={styles.picker}
-              hour={state.durationHour}
-              minutesStep={5}
-              minute={state.durationMinute}
-              setHour={v => (state.durationHour = v)}
-              setMinute={v => (state.durationMinute = v)}
-              unit={['h', 'min']}
-              maxHour={3}
-            />
-            <Text>{I18n.formatValue('add_wakeupschedule_settings_text5', `${formateTime(state.duration, !props.isSleep)}`)}</Text>
-            <Spacer />
-          </>}
-        </View>
-        {/* Summary */}
-        <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('add_randomtimecycle_subheadline_text')}</Text>
-          <View style={styles.summaryContainer}>
-            <View style={styles.summaryLeft}>
-              <Image
-                source={res.summary_icon1}
-                resizeMode="contain"
-                style={styles.summaryImg}
-              />
-              <View>
-                <Text style={styles.leftTitle}>{I18n.getLang('feature_summary_frequency_headline')}</Text>
-              </View>
-            </View>
-            <View style={styles.summaryRight}>
-              <Text style={styles.rightItem}>{loopText(state.loop)}</Text>
-            </View>
-          </View>
-          <View style={styles.summaryContainer}>
-            <View style={styles.summaryLeft}>
-              <Image
-                source={res.summary_icon2}
-                resizeMode="contain"
-                style={styles.summaryImg}
-              />
-              <View>
-                <Text style={styles.leftTitle}>{I18n.getLang('feature_summary_time_headline')}</Text>
-              </View>
-            </View>
-            <View style={styles.summaryRight}>
-              <Text style={styles.rightItem}>{formateDurationTime().durationTime}</Text>
-            </View>
-          </View>
-          <View style={[styles.summaryContainer, { alignItems: 'flex-start' }]}>
-            <View style={styles.summaryLeft}>
-              <Image
-                source={res.summary_icon3}
-                resizeMode="contain"
-                style={styles.summaryImg}
-              />
-              <View>
-                <Text style={styles.leftTitle}>{I18n.getLang('motion_detection_add_time_schedule_actions_text1')}</Text>
-              </View>
-            </View>
-            <View style={{ marginLeft: cx(24), flex: 3 }}>
-              <Text style={{ fontSize: cx(12), color: '#000000' }}>{I18n.getLang(!props.isSleep ? 'feature_summary_action_txt_11' : 'feature_summary_action_txt_10')}</Text>
-              <View style={{ flexDirection: 'row' }}>
-                {
-                  props.isMixRGBWLamp &&
-                  <>
-                    {
-                      state.mixActions.whiteLightSwitch &&
-                      <View style={styles.filletCorner}>
-                        <Text style={styles.rightTitle}>{state.selectedSkill[0]?.label}</Text>
-                      </View>
-                    }
-                    {
-                      state.mixActions.colorLightSwitch &&
-                      <View style={[styles.filletCorner, { marginLeft: cx(4) }]}>
-                        <Text style={styles.rightTitle}>{state.selectedSkill[1]?.label}</Text>
-                      </View>
-                    }
-                  </> ||
-                  <View style={styles.filletCorner}>
-                    <Text style={styles.rightTitle}>{state.selectedSkill[0]?.label}</Text>
-                  </View>
-                }
-              </View>
-              <Text style={{ fontSize: cx(12), color: '#000000' }}>{I18n.getLang(
-                props.isSleep ? 'feature_summary_action_txt_2' :
-                  (state.durationStatus ? 'feature_summary_action_txt_12' : 'feature_summary_action_txt_1')
-              )}</Text>
-              <View style={styles.filletCorner}>
-                <Text style={styles.rightTitle}>{formateDurationTime().endTime}</Text>
-              </View>
-            </View>
-          </View>
-        </View>
-        <Spacer />
-        {/* Delete btn */}
-        {props.mode === 'edit' &&
-          <View style={styles.cardContainer}>
-            <DeleteButton
-              text={I18n.getLang('edit_timeschedule_bttn_text')}
-              onPress={() => {
-                props.deleteDialog(scheduleItem).then(() => {
-                  navigation.goBack()
-                })
-              }}
-            />
-          </View>
-        }
-        <Spacer />
-      </ScrollView>
-    </Page>
-  )
-}
-
-const styles = StyleSheet.create({
-  cardContainer: {
-    marginHorizontal: cx(24)
-  },
-  textField: {
-    marginHorizontal: cx(24)
-  },
-  picker: {
-    marginHorizontal: cx(24),
-    marginVertical: cx(15),
-    color: 'rgb(35,35,38)',
-  },
-  week: {
-
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    marginBottom: cx(10)
-  },
-  skillListItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    height: cx(30),
-    alignItems: 'center',
-    marginVertical: cx(5)
-  },
-  summaryContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    marginBottom: cx(10)
-  },
-  summaryImg: {
-    height: cx(12),
-    width: cx(12),
-    marginRight: cx(6)
-  },
-  summaryLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    minWidth: cx(90),
-  },
-  leftTitle: {
-    fontSize: cx(14),
-    color: '#000',
-  },
-  summaryRight: {
-    flexDirection: 'column',
-    marginLeft: cx(21),
-    borderRadius: cx(16),
-    backgroundColor: '#cbcbcb',
-  },
-  rightItem: {
-    paddingHorizontal: cx(12),
-    color: '#000',
-  },
-  rightTitle: {
-    paddingLeft: cx(12),
-    paddingRight: cx(12),
-    fontSize: cx(10),
-    textAlign: 'center',
-    alignSelf: 'flex-start'
-  },
-  filletCorner: {
-    flexDirection: 'row',
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(16),
-    alignSelf: 'flex-start'
-  }
-})
-
+import React, { useCallback, useEffect } from "react";
+import { FlatList, ScrollView, StyleSheet, Text, View, TouchableOpacity, Image } from "react-native";
+import { useNavigation, useRoute } from '@react-navigation/native'
+import Page from "@ledvance/base/src/components/Page";
+import I18n from "@ledvance/base/src/i18n";
+import res from "@ledvance/base/src/res";
+import { Utils } from "tuya-panel-kit";
+import { useReactive, useUpdateEffect } from "ahooks";
+import TextField from "@ledvance/base/src/components/TextField";
+import LdvTopName from "@ledvance/base/src/components/ldvTopName";
+import LdvPickerView from "@ledvance/base/src/components/ldvPickerView";
+import LdvWeekView from '@ledvance/base/src/components/weekSelect'
+import { loopText, toFixed } from "@ledvance/base/src/utils/common";
+import DeviceState from "./DeviceState";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import DeleteButton from "@ledvance/base/src/components/DeleteButton";
+import { SleepWakeUpPageRouteParams } from "./SleepWakeUpPage";
+import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
+import { cloneDeep, isEqual } from "lodash";
+import dayjs from "dayjs";
+
+const { convertX: cx } = Utils.RatioUtils;
+
+interface SleepWakeUpDetailPageProps extends SleepWakeUpPageRouteParams {
+  mode: 'add' | 'edit'
+  isSleep: boolean
+  scheduleItem: any
+  setSleepPlan: (plan: any[]) => void
+  setWakeUpPlan: (plan: any[]) => void
+  conflictFn: (item: any, editList: any[], goback: boolean) => void
+  deleteDialog: (item: any) => Promise<any>
+  sleepPlan: any[]
+  wakeUpPlan: any[]
+}
+
+const SleepWakeUpDetailPage = () => {
+  const navigation = useNavigation()
+  const props = useRoute().params as SleepWakeUpDetailPageProps
+  const { scheduleItem } = props
+  const state = useReactive({
+    name: '',
+    hour: '00',
+    minute: '01',
+    loop: [0, 0, 0, 0, 0, 0, 0],
+    selectedSkill: props.dps,
+    skillList: [] as any[],
+    fadeOut: 5,
+    fadeIn: 5,
+    duration: 5,
+    fadeOutHour: '00',
+    fadeOutMinute: '05',
+    fadeInHour: '00',
+    fadeInMinute: '05',
+    durationHour: '00',
+    durationMinute: '05',
+    durationStatus: false,
+    mixActions: {
+      whiteLightSwitch: true,
+      colorLightSwitch: false,
+      mixRgbcwEnabled: true,
+      hue: 360,
+      sat: 100,
+      lightness: 100,
+      brightness: 100,
+      colorTempPercent: 100,
+    },
+    singleActions: {
+      isColor: false,
+      brightness: 100,
+      temperature: 100,
+      h: 0,
+      s: 100,
+      v: 100
+    }
+  })
+
+  useEffect(() => {
+    if (props.mode === 'edit' && scheduleItem) {
+      console.log(scheduleItem, '< -- scheduleItem')
+      state.hour = scheduleItem.time[0].toString().padStart(2, '0')
+      state.minute = scheduleItem.time[1].toString().padStart(2, '0')
+      state.name = scheduleItem.name
+      state.loop = scheduleItem.loops
+
+      state.singleActions.isColor = scheduleItem.brightness === 0 && scheduleItem.temperature === 0
+      if (state.singleActions.isColor) {
+        state.singleActions.h = scheduleItem.hue
+        state.singleActions.s = scheduleItem.sat
+        state.singleActions.v = scheduleItem.value
+      } else {
+        state.singleActions.brightness = scheduleItem.brightness
+        state.singleActions.temperature = scheduleItem.temperature
+      }
+
+      if (props.isMixRGBWLamp) {
+        state.mixActions.hue = scheduleItem.hue
+        state.mixActions.sat = scheduleItem.sat
+        state.mixActions.lightness = scheduleItem.value
+        state.mixActions.colorLightSwitch = !scheduleItem.brightness && !scheduleItem.colorTempPercent
+        state.mixActions.brightness = scheduleItem.brightness
+        state.mixActions.colorTempPercent = scheduleItem.temperature
+      }
+
+      const h = Math.trunc(scheduleItem.fade / 60)
+      const m = scheduleItem.fade % 60
+
+      if (props.isSleep) {
+        state.fadeOut = scheduleItem.fade
+        state.fadeOutHour = h.toString().padStart(2, '0')
+        state.fadeOutMinute = m.toString().padStart(2, '0')
+      } else {
+        state.fadeIn = scheduleItem.fade
+        state.fadeInHour = h.toString().padStart(2, '0')
+        state.fadeInMinute = m.toString().padStart(2, '0')
+        state.duration = scheduleItem.duration
+        state.durationStatus = scheduleItem.duration > 0
+        state.durationHour = Math.trunc(scheduleItem.duration / 60).toString().padStart(2, '0')
+        state.durationMinute = (scheduleItem.duration % 60).toString().padStart(2, '0')
+      }
+    } else {
+      const date = new Date()
+      state.hour = toFixed(date.getHours(), 2)
+      state.minute = toFixed(date.getMinutes(), 2)
+      state.singleActions.isColor = !!props.isGARDOT && !(props.isRGBLamp || props.isRGBWLamp)
+    }
+  }, [])
+
+  useUpdateEffect(() => {
+    const min = state.fadeOutHour === '02' ? '00' : (state.fadeOutHour === '00' && state.fadeOutMinute === '00') ? '05' : state.fadeOutMinute
+    state.fadeOutMinute = min
+    state.fadeOut = (Number(state.fadeOutHour) * 60) + Number(min)
+  }, [state.fadeOutHour, state.fadeOutMinute])
+
+  useUpdateEffect(() => {
+    const min = state.fadeInHour === '02' ? '00' : (state.fadeInHour === '00' && state.fadeInMinute === '00') ? '05' : state.fadeInMinute
+    state.fadeInMinute = min
+    state.fadeIn = (Number(state.fadeInHour) * 60) + Number(min)
+  }, [state.fadeInHour, state.fadeInMinute])
+
+  useUpdateEffect(() => {
+    const min = state.durationHour === '02' ? '00' : (state.durationHour === '00' && state.durationMinute === '00') ? '05' : state.durationMinute
+    state.durationMinute = min
+    state.duration = (Number(state.durationHour) * 60) + Number(min)
+  }, [state.durationHour, state.durationMinute])
+
+  const getNewItem = () =>{
+    return {
+      enable: 1,
+      loops: state.loop,
+      time: [parseInt(state.hour), parseInt(state.minute)],
+      hue: state.singleActions.isColor ? state.singleActions.h : 0,
+      sat: state.singleActions.isColor ? state.singleActions.s : 0,
+      value: state.singleActions.isColor ? state.singleActions.v : 0,
+      brightness: state.singleActions.isColor ? 0 : state.singleActions.brightness,
+      temperature: state.singleActions.isColor ? 0 : state.singleActions.temperature,
+      name: state.name,
+      isSleep: props.isSleep,
+      fade: props.isSleep ? state.fadeOut : state.fadeIn
+    }
+  }
+
+  const postActions = async () => {
+    const baseItemData: any = getNewItem()
+    if (props.mode === 'edit') baseItemData.index = scheduleItem.index
+
+    if (props.isMixRGBWLamp) {
+      baseItemData.hue = state.mixActions.colorLightSwitch ? state.mixActions.hue : 0
+      baseItemData.sat = state.mixActions.colorLightSwitch ? state.mixActions.sat : 0
+      baseItemData.value = state.mixActions.colorLightSwitch ? state.mixActions.lightness : 0
+      baseItemData.brightness = state.mixActions.colorLightSwitch ? 0 : state.mixActions.brightness
+      baseItemData.temperature = state.mixActions.colorLightSwitch ? 0 : state.mixActions.colorTempPercent
+    }
+    if (!props.isSleep) {
+      baseItemData.duration = state.durationStatus && state.duration || 0
+    }
+    const baseList = props.isSleep ? props.sleepPlan : props.wakeUpPlan
+    if (props.mode === 'add') {
+      const newList = [...baseList, baseItemData]
+      props.conflictFn(baseItemData, newList, true)
+    } else {
+      const idx = baseList.findIndex(item => item.index === scheduleItem.index)
+      if (idx !== -1) {
+        baseList.splice(idx, 1, baseItemData)
+      }
+      props.conflictFn(baseItemData, baseList, true)
+    }
+  }
+
+  const selectWeekAction = useCallback((idx: number) => {
+    const newLoop = state.loop.map((item, tempIndex) => {
+      if (tempIndex === idx - 1) {
+        return item > 0 ? 0 : 1;
+      }
+      return item;
+
+    });
+    state.loop = newLoop;
+  }, [])
+
+  const showClearIcon = useCallback(() => {
+    return false
+  }, [])
+
+  const showSubmit = useCallback(() => {
+    return state?.name?.length > 0 && state?.name?.length <= 32 && hasSelected()
+  }, [state.name])
+
+  const handelSkill = (v, i) => {
+
+  }
+
+  const hasSelected = () => {
+    return !!state.selectedSkill.length
+  }
+
+
+
+  const renderItem = ({ item }) => {
+    return (
+      <View style={{
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: '#fff',
+        marginBottom: cx(8)
+      }}>
+        <Text
+          style={{
+            color: '#000',
+            fontSize: 14,
+            marginHorizontal: cx(6),
+            marginVertical: cx(9),
+          }}
+        >
+          {item.label}
+        </Text>
+        {showClearIcon() && <TouchableOpacity onPress={() => handelSkill('lower', item)}>
+          <Image style={{ width: cx(16), height: cx(16), marginRight: cx(5) }} source={res.ic_arrows_nav_clear} />
+        </TouchableOpacity>}
+      </View>
+    );
+  };
+
+  const editMixActions = (mix) => {
+    state.mixActions = cloneDeep(mix)
+  }
+
+  const editSingleActions = (single) => {
+    state.singleActions = cloneDeep(single)
+  }
+
+  const formateTime = (v, isSleep) => {
+    const date = dayjs().format('YYYY-MM-DD')
+    const time = dayjs(`${date} ${state.hour}:${state.minute}`)
+    return isSleep ? time.add(Number(v), 'm').format('HH:mm') : time.subtract(Number(v), 'm').format('HH:mm')
+  }
+
+  const formateDurationTime = () => {
+    const duration = state.durationStatus && Number(state.duration) || 0
+    const date = dayjs().format('YYYY-MM-DD')
+    const time = dayjs(`${date} ${state.hour}:${state.minute}`)
+    const startTime = props.isSleep ? time.format('HH:mm') : time.subtract(state.fadeIn, 'm').format('HH:mm')
+    const data = props.isSleep ? Number(state.fadeOut) : duration
+    const endTime = time.add(data, 'm').format('HH:mm')
+    return {
+      durationTime: `${startTime} - ${endTime}`,
+      endTime
+    }
+  }
+
+  const showBackDialog = () =>{
+    const newItem:any = {
+      ...getNewItem(),
+      index: props.scheduleItem?.index,
+      enable: props.scheduleItem?.enable
+    }
+    if(!props.isSleep){
+      newItem.duration = state.durationStatus && state.duration || 0
+    }
+    return props.mode === 'edit' && !isEqual(props.scheduleItem, newItem)
+  }
+
+
+
+  return (
+    <Page
+      backText={I18n.getLang('add_sleepschedule_one_source_system_back_text')}
+      showBackDialog={showBackDialog()}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang(props.isSleep ? 'cancel_dialog_leave_unsaved_sleepschedule_note' : 'cancel_dialog_leave_unsaved_wakeupschedule_note')}
+      rightButtonIcon={showSubmit() ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={showSubmit() && postActions || undefined}
+    >
+      <ScrollView
+        nestedScrollEnabled={true}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+      >
+        <LdvTopName title={I18n.getLang(props.isSleep ? (props.mode === 'add' ? 'add_sleepschedule_one_source_headline_text' : 'edit_sleepschedule_headline_text') : (props.mode === 'add' ? 'add_wakeupschedule_one_source_headline_text' : 'edit_wakeupschedule_headline_text'))} />
+        <TextField
+          style={styles.cardContainer}
+          value={state.name}
+          showError={state.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.name = t;
+          }}
+        />
+        {/* pick */}
+        <LdvPickerView
+          style={styles.picker}
+          hour={state.hour}
+          minute={state.minute}
+          setHour={v => (state.hour = v)}
+          setMinute={v => (state.minute = v)}
+        // unit={['h', 'min']}
+        />
+
+        {/* week */}
+        <View style={styles.week}>
+          <LdvWeekView style={{}} value={state.loop} onSelect={selectWeekAction} />
+          <Spacer />
+          <Text style={{ marginHorizontal: cx(24) }}>{loopText(state.loop)}</Text>
+          <Spacer />
+        </View>
+
+        {/* Apply for */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
+          <View
+            style={{
+              backgroundColor: '#f6f6f6',
+              borderRadius: 4,
+              minHeight: cx(50),
+              flex: 1,
+              justifyContent: 'center',
+            }}
+          >
+            {!hasSelected() ? <Text style={{ marginLeft: cx(10) }}>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
+              <View
+                style={{
+                  marginHorizontal: cx(8),
+                  marginTop: cx(8),
+                  borderRadius: 4,
+                }}
+              >
+                <FlatList
+                  data={state.selectedSkill}
+                  renderItem={item => renderItem(item)}
+                  keyExtractor={(item) => item.dpId + 'selected'}
+                />
+              </View>}
+          </View>
+          {state.skillList.map((item) => {
+            return (
+              <TouchableOpacity style={styles.skillListItem} key={item.dpId + 'skill'} onPress={() => handelSkill('add', item)}>
+                <Text style={{ color: '#000' }}>{item.label}</Text>
+                <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
+              </TouchableOpacity>
+            )
+          })}
+          <Spacer />
+        </View>
+
+        {/* Device state */}
+        <View>
+          <Text style={[styles.itemTitle, styles.cardContainer]}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
+          <DeviceState
+            mixActions={state.mixActions}
+            singleActions={state.singleActions}
+            editMixFn={editMixActions}
+            editSingleFn={editSingleActions}
+            isSupportColor={props.isSupportColor}
+            isSupportBrightness={true}
+            isSupportTemperature={true}
+            isMixRGBWLamp={props.isMixRGBWLamp}
+          />
+        </View>
+        <Spacer />
+        {/* Settings */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
+          <Spacer />
+          <Text>{I18n.getLang(props.isSleep ? 'add_sleepschedule_one_source_settings_text' : 'add_wakeupschedule_settings_text')}</Text>
+          <LdvPickerView
+            style={styles.picker}
+            hour={props.isSleep ? state.fadeOutHour : state.fadeInHour}
+            minute={props.isSleep ? state.fadeOutMinute : state.fadeInMinute}
+            minutesStep={5}
+            setHour={v => {
+              if (props.isSleep) {
+                state.fadeOutHour = v
+              } else {
+                state.fadeInHour = v
+              }
+            }}
+            setMinute={v => {
+              if (props.isSleep) {
+                state.fadeOutMinute = v
+              } else {
+                state.fadeInMinute = v
+              }
+            }}
+            unit={['h', 'min']}
+            maxHour={3}
+          />
+          <Text>{I18n.formatValue(props.isSleep ? 'add_sleepschedule_one_source_settings_text2' : 'add_wakeupschedule_settings_text2', `${formateTime(props.isSleep ? state.fadeOut : state.fadeIn, props.isSleep)}`)}</Text>
+          <Spacer />
+          {!props.isSleep &&
+            <View style={{ marginHorizontal: -cx(16), marginTop: -cx(20) }}>
+              <LdvSwitch
+                title={I18n.getLang('add_wakeupschedule_settings_text3')}
+                enable={state.durationStatus}
+                color="#fff"
+                colorAlpha={1}
+                setEnable={() => {
+                  state.durationStatus = !state.durationStatus
+                  state.duration = 5
+                  state.durationHour = '00'
+                  state.durationMinute = '05'
+                  if (!state.durationStatus) {
+                    state.duration = 0
+                  }
+                }}
+              />
+            </View>
+          }
+          {state.durationStatus && <>
+            <Text style={{ fontSize: cx(14) }}>{I18n.getLang('add_wakeupschedule_settings_text4')}</Text>
+            <LdvPickerView
+              style={styles.picker}
+              hour={state.durationHour}
+              minutesStep={5}
+              minute={state.durationMinute}
+              setHour={v => (state.durationHour = v)}
+              setMinute={v => (state.durationMinute = v)}
+              unit={['h', 'min']}
+              maxHour={3}
+            />
+            <Text>{I18n.formatValue('add_wakeupschedule_settings_text5', `${formateTime(state.duration, !props.isSleep)}`)}</Text>
+            <Spacer />
+          </>}
+        </View>
+        {/* Summary */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>{I18n.getLang('add_randomtimecycle_subheadline_text')}</Text>
+          <View style={styles.summaryContainer}>
+            <View style={styles.summaryLeft}>
+              <Image
+                source={res.summary_icon1}
+                resizeMode="contain"
+                style={styles.summaryImg}
+              />
+              <View>
+                <Text style={styles.leftTitle}>{I18n.getLang('feature_summary_frequency_headline')}</Text>
+              </View>
+            </View>
+            <View style={styles.summaryRight}>
+              <Text style={styles.rightItem}>{loopText(state.loop)}</Text>
+            </View>
+          </View>
+          <View style={styles.summaryContainer}>
+            <View style={styles.summaryLeft}>
+              <Image
+                source={res.summary_icon2}
+                resizeMode="contain"
+                style={styles.summaryImg}
+              />
+              <View>
+                <Text style={styles.leftTitle}>{I18n.getLang('feature_summary_time_headline')}</Text>
+              </View>
+            </View>
+            <View style={styles.summaryRight}>
+              <Text style={styles.rightItem}>{formateDurationTime().durationTime}</Text>
+            </View>
+          </View>
+          <View style={[styles.summaryContainer, { alignItems: 'flex-start' }]}>
+            <View style={styles.summaryLeft}>
+              <Image
+                source={res.summary_icon3}
+                resizeMode="contain"
+                style={styles.summaryImg}
+              />
+              <View>
+                <Text style={styles.leftTitle}>{I18n.getLang('motion_detection_add_time_schedule_actions_text1')}</Text>
+              </View>
+            </View>
+            <View style={{ marginLeft: cx(24), flex: 3 }}>
+              <Text style={{ fontSize: cx(12), color: '#000000' }}>{I18n.getLang(!props.isSleep ? 'feature_summary_action_txt_11' : 'feature_summary_action_txt_10')}</Text>
+              <View style={{ flexDirection: 'row' }}>
+                {
+                  props.isMixRGBWLamp &&
+                  <>
+                    {
+                      state.mixActions.whiteLightSwitch &&
+                      <View style={styles.filletCorner}>
+                        <Text style={styles.rightTitle}>{state.selectedSkill[0]?.label}</Text>
+                      </View>
+                    }
+                    {
+                      state.mixActions.colorLightSwitch &&
+                      <View style={[styles.filletCorner, { marginLeft: cx(4) }]}>
+                        <Text style={styles.rightTitle}>{state.selectedSkill[1]?.label}</Text>
+                      </View>
+                    }
+                  </> ||
+                  <View style={styles.filletCorner}>
+                    <Text style={styles.rightTitle}>{state.selectedSkill[0]?.label}</Text>
+                  </View>
+                }
+              </View>
+              <Text style={{ fontSize: cx(12), color: '#000000' }}>{I18n.getLang(
+                props.isSleep ? 'feature_summary_action_txt_2' :
+                  (state.durationStatus ? 'feature_summary_action_txt_12' : 'feature_summary_action_txt_1')
+              )}</Text>
+              <View style={styles.filletCorner}>
+                <Text style={styles.rightTitle}>{formateDurationTime().endTime}</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <Spacer />
+        {/* Delete btn */}
+        {props.mode === 'edit' &&
+          <View style={styles.cardContainer}>
+            <DeleteButton
+              text={I18n.getLang('edit_timeschedule_bttn_text')}
+              onPress={() => {
+                props.deleteDialog(scheduleItem).then(() => {
+                  navigation.goBack()
+                })
+              }}
+            />
+          </View>
+        }
+        <Spacer />
+      </ScrollView>
+    </Page>
+  )
+}
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    marginHorizontal: cx(24)
+  },
+  textField: {
+    marginHorizontal: cx(24)
+  },
+  picker: {
+    marginHorizontal: cx(24),
+    marginVertical: cx(15),
+    color: 'rgb(35,35,38)',
+  },
+  week: {
+
+  },
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+    marginBottom: cx(10)
+  },
+  skillListItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    height: cx(30),
+    alignItems: 'center',
+    marginVertical: cx(5)
+  },
+  summaryContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    marginBottom: cx(10)
+  },
+  summaryImg: {
+    height: cx(12),
+    width: cx(12),
+    marginRight: cx(6)
+  },
+  summaryLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: cx(90),
+  },
+  leftTitle: {
+    fontSize: cx(14),
+    color: '#000',
+  },
+  summaryRight: {
+    flexDirection: 'column',
+    marginLeft: cx(21),
+    borderRadius: cx(16),
+    backgroundColor: '#cbcbcb',
+  },
+  rightItem: {
+    paddingHorizontal: cx(12),
+    color: '#000',
+  },
+  rightTitle: {
+    paddingLeft: cx(12),
+    paddingRight: cx(12),
+    fontSize: cx(10),
+    textAlign: 'center',
+    alignSelf: 'flex-start'
+  },
+  filletCorner: {
+    flexDirection: 'row',
+    backgroundColor: '#cbcbcb',
+    borderRadius: cx(16),
+    alignSelf: 'flex-start'
+  }
+})
+
 export default SleepWakeUpDetailPage