@ledvance/ui-biz-bundle 1.1.69 → 1.1.71

package/src/modules/timeSchedule/TimeScheduleEditpage.tsx

@@ -1,766 +1,766 @@
-import React, { useCallback, useEffect } from 'react'
-import { FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import Page from '@ledvance/base/src/components/Page'
-import TextField from '@ledvance/base/src/components/TextField'
-import I18n from '@ledvance/base/src/i18n'
-import { useNavigation, useRoute } from '@react-navigation/native'
-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 { SwitchButton, Utils } from 'tuya-panel-kit'
-import Spacer from '@ledvance/base/src/components/Spacer'
-import DeleteButton from '@ledvance/base/src/components/DeleteButton'
-import { loopText, toFixed } from '@ledvance/base/src/utils/common'
-import { NativeApi } from '@ledvance/base/src/api/native'
-import { isUVCFanDevice, useDeviceId } from '@ledvance/base/src/models/modules/NativePropsSlice'
-import res from '@ledvance/base/src/res'
-import { useReactive } from 'ahooks'
-import { dpItem, TimeSchedulePageRouteParams } from './TimeSchedulePage'
-import { cloneDeep, differenceBy, isEmpty, isEqual } from 'lodash'
-import DeviceState from './DeviceState'
-import { getHexByHSV, getHSVByHex } from '@ledvance/base/src/utils'
-import { Buffer } from 'buffer'
-import { dp2Obj, obj2Dp } from './mix/MixLightActions'
-import { dp2Obj as sencePp2Obj, obj2Dp as senceObj2Dp } from '../scene/SceneAction'
-import { COLOUR, SCENE, WHITE } from '../../hooks/DeviceDpStateHooks'
-import { ColorList } from './components/ColorList'
-
-const { convertX: cx } = Utils.RatioUtils
-
-export interface ScheduleItemDp extends dpItem {
-  enable: boolean
-}
-
-interface TimeScheduleEditPageParams extends TimeSchedulePageRouteParams {
-  mode: 'add' | 'edit'
-  scheduleItem: any,
-  dps: ScheduleItemDp[]
-  dpCodes: Record<any, any>
-  reloadData: () => void
-  deleteDialog: (item: any) => Promise<void>
-}
-
-const TimeScheduleEditPage = () => {
-  const navigation = useNavigation()
-  const devId = useDeviceId()
-  const route = useRoute()
-  const isUVCFan = isUVCFanDevice()
-  const props = cloneDeep(route.params) as TimeScheduleEditPageParams
-  const { scheduleItem, dps, reloadData, deleteDialog, dpCodes } = props
-  const state = useReactive({
-    loading: false,
-    hour: '00',
-    minute: '00',
-    loop: [0, 0, 0, 0, 0, 0, 0],
-    isNotification: false,
-    name: '',
-    selectedSkill: [] as ScheduleItemDp[],
-    skillList: [] as ScheduleItemDp[],
-    isManual: true,
-    singleActions: {
-      enable: true,  // colorLightSwitch
-      whiteLightSwitch: true,
-      isColor: true,
-      h: 0,
-      s: 100,
-      v: 100,
-      temperature: 100,
-      brightness: 100,
-      colorDiskActiveKey: 0,
-      colors: ColorList[0],
-      activeKey: 1,
-      fanEnable: true,
-      fanSpeed: 1,
-      fanMode: 'normal',
-    },
-    mixActions: {
-      whiteLightSwitch: true,
-      colorLightSwitch: false,
-      mixRgbcwEnabled: true,
-      hue: 360,
-      sat: 100,
-      lightness: 100,
-      brightness: 100,
-      colorTempPercent: 100,
-    },
-    actionScene: {} as any,
-    dpsValue: {} as Record<string, any>,
-  })
-  console.log(props, '< --- props')
-  useEffect(() => {
-    // 设置功能列表
-    if (props.mode === 'edit' && scheduleItem) {
-      state.hour = scheduleItem.time.split(':')[0]
-      state.minute = scheduleItem.time.split(':')[1]
-      state.name = scheduleItem.aliasName
-      state.isNotification = !!scheduleItem.isAppPush
-      state.loop = scheduleItem.loops.split('').map((mItem: string) => parseInt(mItem))
-      state.selectedSkill = props.isCeilingLight ? props.dps : dps.reduce((pre, cur) => {
-        if (scheduleItem.dps[cur.dpId] !== undefined) {
-          const result = { ...cur, enable: scheduleItem.dps[cur.dpId] }
-          pre.push(result)
-        }
-        return pre
-      }, [] as ScheduleItemDp[])
-      state.skillList = differenceBy(dps, state.selectedSkill, 'dpId')
-
-      if (props.dps2lightData) {
-        console.log(scheduleItem.dps, '< --- dps')
-        const lightData = props.dps2lightData(scheduleItem.dps)
-        console.log(lightData, '< --- lightData')
-        state.singleActions = {
-          ...state.singleActions,
-          ...lightData.singleActions,
-        }
-        state.isManual = lightData.isManual
-        state.actionScene = lightData.actionScene
-        
-        return
-      }
-
-      // single
-      if (scheduleItem.dps[dpCodes.switch_led] !== undefined) {
-        state.singleActions.enable = scheduleItem.dps[dpCodes.switch_led]
-      }
-      if (scheduleItem.dps[dpCodes.work_mode] !== undefined) {
-        state.singleActions.isColor = scheduleItem.dps[dpCodes.work_mode] === COLOUR
-      }
-      if (scheduleItem.dps[dpCodes.fan_switch] !== undefined) {
-        state.singleActions.fanEnable = scheduleItem.dps[dpCodes.fan_switch]
-      }
-      state.singleActions.brightness = scheduleItem.dps[dpCodes.bright_value] / 10 || 100
-      state.singleActions.temperature = scheduleItem.dps[dpCodes.temp_value] / 10 || 100
-      state.singleActions.fanSpeed = scheduleItem.dps[dpCodes.fan_speed] || 1
-      state.singleActions.fanMode = scheduleItem.dps[dpCodes.fan_mode] || 'normal'
-      const hsv = getHSVByHex(scheduleItem.dps[dpCodes.colour_data] || '0000000003e8')
-      state.singleActions.h = hsv.h
-      state.singleActions.s = Math.round(hsv.s / 10)
-      state.singleActions.v = Math.round(hsv.v / 10)
-
-      // mix
-      if (scheduleItem.dps[dpCodes.mix_rgbcw] !== undefined) {
-        const base64String = Buffer.from(scheduleItem.dps[dpCodes.mix_rgbcw], 'base64').toString('hex')
-        state.mixActions = dp2Obj(base64String)
-      }
-
-      if (scheduleItem.dps[dpCodes.scene_data] !== undefined) {
-        state.actionScene = sencePp2Obj(scheduleItem.dps[dpCodes.scene_data], !!props.isFanLamp, isUVCFan)
-        state.isManual = false
-      }
-      if (scheduleItem.dps[dpCodes.mix_light_scene] !== undefined) {
-        const sceneDp = scheduleItem.dps[dpCodes.mix_light_scene]
-        state.actionScene = Buffer.from(sceneDp, 'base64').toString('hex')
-        state.isManual = false
-      }
-
-    } else {
-      const date = new Date()
-      state.hour = toFixed(date.getHours(), 2)
-      state.minute = toFixed(date.getMinutes(), 2)
-      // 当dps长度只有1个的时候或者是mixLight灯时默认选中,
-      if (!showClearIcon()) {
-        state.selectedSkill = dps.map(item => ({
-          ...item,
-          enable: true,
-        }))
-      } else {
-        state.skillList = dps.map(item => ({
-          ...item,
-          enable: true,
-        }))
-      }
-    }
-  }, [])
-
-  const selectWeekAction = (idx: number) => {
-    state.loop = state.loop.map((item, tempIndex) => {
-      if (tempIndex === idx - 1) {
-        return item > 0 ? 0 : 1
-      }
-      return item
-    })
-  }
-
-  const manualCheck = () => {
-    return state.isManual && state.selectedSkill.length
-  }
-  
-  // 只支持风扇灯跟普通灯
-  const sceneCheck = () => {
-    if(props.isCeilingLight){
-      return (state.actionScene?.mainLamp?.nodes?.length) || (state.actionScene?.secondlyLamp?.nodes?.length)
-    }
-    return !state.isManual && state.skillList.length === 0 && state.actionScene && (state?.actionScene?.nodes || state?.actionScene?.value)
-  }
-  
-  const saveEnable = () => {
-    return !state.loading
-        && state.name.length && state.name.length <= 32
-        && (manualCheck() || sceneCheck())
-        && [
-        !isEqual(scheduleItem?.aliasName, state.name),
-        !isEqual(scheduleItem?.time, [state.hour, state.minute].join(':')),
-        !isEqual(scheduleItem?.loops, state.loop.join('')),
-        !isEqual(!!scheduleItem?.isAppPush, state.isNotification),
-        !isEqual(scheduleItem?.dps, getSendDps()),
-      ].some(e => e)
-  }
-
-  const saveAction = () => {
-    if (!saveEnable() || state.loading) {
-      return
-    }
-
-    state.loading = true
-    const params = {
-      time: [state.hour, state.minute].join(':'),
-      loops: state.loop.join(''),
-      dps: getAllDps(),
-      aliasName: state.name,
-      status: true,
-      notification: state.isNotification,
-    }
-
-    if (scheduleItem) {
-      NativeApi.editTimer(
-        devId,
-        {
-          ...params,
-          id: scheduleItem.id,
-        },
-        res => {
-          if (res?.result) {
-            reloadData()
-            navigation.goBack()
-            state.loading = false
-          } else {
-            state.loading = false
-          }
-
-        },
-      )
-    } else {
-      NativeApi.addTimer(
-        devId,
-        params,
-        res => {
-          if (res?.result) {
-            reloadData()
-            navigation.goBack()
-            state.loading = false
-          } else {
-            state.loading = false
-          }
-        },
-      )
-    }
-  }
-
-  const getSendDps = () => {
-    if (props.lightData2dps) {
-      return props.lightData2dps({
-        singleActions: state.singleActions,
-        mixActions: state.mixActions,
-        actionScene: !isEmpty(state.actionScene) ? state.actionScene : undefined,
-        isManual: state.isManual,
-      })
-    }
-    if (state.isManual) {
-      if (props.isDIMLamp) {
-        return {
-          [dpCodes.bright_value]: state.singleActions.brightness * 10,
-        }
-      } else if (props.isFanLamp) {
-        let v = {}
-        const hasFan = !!state.selectedSkill.find(item => item.value.includes('fan'))
-        const hasLight = !!state.selectedSkill.find(item => item.value.includes('light'))
-        if (hasFan) {
-          v = {
-            ...v,
-            [dpCodes.fan_mode]: state.singleActions.fanMode,
-            [dpCodes.fan_speed]: state.singleActions.fanSpeed,
-          }
-        }
-        if (hasLight) {
-          v = {
-            ...v,
-            [dpCodes.work_mode]: WHITE,
-            [dpCodes.bright_value]: state.singleActions.brightness * 10,
-            [dpCodes.temp_value]: state.singleActions.temperature * 10,
-          }
-        }
-        return v
-      }
-      if (props.isTWLamp) {
-        return {
-          [dpCodes.work_mode]: WHITE,
-          [dpCodes.bright_value]: state.singleActions.brightness * 10,
-          [dpCodes.temp_value]: state.singleActions.temperature * 10,
-        }
-      }
-      if (props.isRGBWLamp) {
-        if (state.singleActions.isColor) {
-          const colorString = getHexByHSV({
-            h: state.singleActions.h,
-            s: state.singleActions.s * 10,
-            v: state.singleActions.v * 10,
-          })
-          return {
-            [dpCodes.work_mode]: COLOUR,
-            [dpCodes.colour_data]: colorString,
-          }
-        }
-        return {
-          [dpCodes.work_mode]: WHITE,
-          [dpCodes.temp_value]: state.singleActions.temperature * 10,
-          [dpCodes.bright_value]: state.singleActions.brightness * 10,
-        }
-
-      } else if (props.isMixRGBWLamp) {
-        const dpsString = obj2Dp(state.mixActions)
-        return {
-          [dpCodes.switch_led]: true,
-          [dpCodes.mix_rgbcw]: Buffer.from(dpsString, 'hex').toString('base64'),
-        }
-      } else if (props.isGlassRGBWLamp) {
-        const colorString = getHexByHSV({
-          h: state.singleActions.h,
-          s: state.singleActions.s * 10,
-          v: state.singleActions.v * 10,
-        })
-        return {
-          [dpCodes.work_mode]: COLOUR,
-          [dpCodes.colour_data]: colorString,
-        }
-      } else if (props.isGARDOT) {
-        const colorString = getHexByHSV({
-          h: state.singleActions.h,
-          s: state.singleActions.s * 10,
-          v: state.singleActions.v * 10,
-        })
-        return {
-          [dpCodes.work_mode]: COLOUR,
-          [dpCodes.colour_data]: colorString,
-        }
-      } else {
-        const colorString = getHexByHSV({
-          h: state.singleActions.h,
-          s: state.singleActions.s * 10,
-          v: state.singleActions.v * 10,
-        })
-        return {
-          [dpCodes.switch_led]: true,
-          [dpCodes.colour_data]: colorString,
-        }
-      }
-    } else {
-      if (props.isMixRGBWLamp) {
-        const v = {
-          [dpCodes.mix_light_scene]: Buffer.from(state.actionScene?.value, 'hex').toString('base64'),
-          [dpCodes.switch_led]: true,
-          [dpCodes.work_mode]: SCENE,
-        }
-        return props.isFanLamp ? {
-          ...v,
-          [dpCodes.fan_switch]: state.actionScene.fanEnable,
-          [dpCodes.fan_speed]: state.actionScene.fanSpeed,
-        } : v
-      } else {
-        const v = {
-          [dpCodes.switch_led]: true,
-          // @ts-ignore
-          [dpCodes.scene_data]: senceObj2Dp({
-            id: Number(state?.actionScene?.id),
-            nodes: state?.actionScene?.nodes,
-          }, !!props.isFanLamp, isUVCFan),
-          [dpCodes.work_mode]: SCENE,
-        }
-        return props.isFanLamp ? {
-          ...v,
-          [dpCodes.fan_switch]: state.actionScene.fanEnable,
-          [dpCodes.fan_speed]: state.actionScene.fanSpeed,
-        } : v
-      }
-    }
-
-  }
-
-  const getAllDps = () => {
-    const dpsValue = getSendDps()
-    if (state.isManual && !props.isMixRGBWLamp) {
-      let v = {}
-      state.selectedSkill.forEach(skill => {
-        v[skill.dpId] = skill.enable
-      })
-      return {
-        ...v,
-        ...dpsValue,
-      }
-    } else {
-      return dpsValue
-    }
-  }
-
-  const setSendDps = useCallback((actions, type) => {
-    state[type] = actions
-  }, [])
-
-  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 handelSkill = (handelType: string, skill: ScheduleItemDp) => {
-    if (handelType === 'add') {
-      state.selectedSkill = [...state.selectedSkill, skill]
-      state.skillList = state.skillList.filter(item => item.dpId !== skill.dpId)
-    } else {
-      state.skillList = [...state.skillList, skill]
-      state.selectedSkill = state.selectedSkill.filter(item => item.dpId !== skill.dpId)
-    }
-  }
-
-  const hasSelected = () => {
-    return !!state.selectedSkill.length
-  }
-
-  const changeSkillEnable = useCallback((dpId: string, enable: boolean) => {
-    state.selectedSkill = state.selectedSkill.map((skill) => {
-      if (dpId === skill.dpId) {
-        skill.enable = enable
-      }
-      return skill
-    })
-  }, [state.selectedSkill])
-
-  const showClearIcon = () => {
-    return dps.length > 1 && !props.isMixRGBWLamp && !props.isCeilingLight
-  }
-
-  return (
-    <Page
-      backText={I18n.getLang('motion_detection_add_time_schedule_system_back_text')}
-      rightButtonIcon={saveEnable() ? res.ic_check : res.ic_uncheck}
-      rightButtonIconClick={() => saveAction()}
-      rightButtonDisabled={!saveEnable()}
-      showBackDialog={true}
-      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
-      backDialogContent={I18n.getLang('cancel_dialog_leave_unsaved_timeschedule_note')}>
-      <ScrollView
-        nestedScrollEnabled={true}
-        showsHorizontalScrollIndicator={false}
-        showsVerticalScrollIndicator={false}>
-        <LdvTopName
-          title={I18n.getLang(props.mode === 'add' ? 'motion_detection_add_time_schedule_headline_text' : 'edit_timeschedule_headline_text')}/>
-        <View style={styles.content}>
-          <TextField
-            value={state.name}
-            placeholder={I18n.getLang('motion_detection_add_time_schedule_selectionfield_text')}
-            onChangeText={(t: string) => {
-              state.name = t
-            }}
-            showError={state.name.length > 32}
-            maxLength={33}
-            errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}/>
-          {/* pick */}
-          <LdvPickerView
-            style={styles.picker}
-            hour={state.hour}
-            minute={state.minute}
-            setHour={v => (state.hour = v)}
-            setMinute={v => (state.minute = v)}
-          />
-          {/* week */}
-          <LdvWeekView
-            value={state.loop}
-            style={styles.zeroMarginHorizontal}
-            onSelect={selectWeekAction}/>
-          <Text style={styles.loopText}>{loopText(state.loop, `${state.hour}:${state.minute}`)}</Text>
-          {/* Apply for */}
-          <View>
-            <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>
-              )
-            })}
-          </View>
-          {/* Device state */}
-          <View>
-            <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
-          </View>
-          <DeviceState
-            singleActions={state.singleActions}
-            mixActions={state.mixActions}
-            actionScene={state.actionScene}
-            dpCodes={dpCodes}
-            dps={state.skillList}
-            selectedDps={state.selectedSkill}
-            scheduleItem={scheduleItem}
-            isManual={state.isManual}
-            setIsManual={useCallback((v) => {
-              state.isManual = v
-            }, [])}
-            setSendDps={setSendDps}
-            changeSkillEnable={changeSkillEnable}
-            isDIMLamp={props.isDIMLamp}
-            isOnlyRGBLamp={props.isOnlyRGBLamp}
-            isRGBLamp={props.isRGBLamp}
-            isRGBWLamp={props.isRGBWLamp}
-            isMixRGBWLamp={props.isMixRGBWLamp}
-            isTWLamp={props.isTWLamp}
-            isFanLamp={props.isFanLamp}
-            isSupportMode={props.isSupportMode}
-            isSupportColor={props.isSupportColor}
-            isSupportBrightness={props.isSupportBrightness}
-            isSupportTemperature={props.isSupportTemperature}
-            isSupportMood={props.isSupportMood}
-            isStringLight={props.isStringLight}
-            isStripLight={props.isStripLight} 
-            fantasyFeatureId={props.fantasyFeatureId}
-            isCeilingLight={props.isCeilingLight}
-            />
-          {!hasSelected() && <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Image style={{ width: cx(16), height: cx(16), tintColor: '#FF9500' }} source={res.ic_warning_amber}/>
-              <Text style={{
-                color: '#FF9500',
-                marginLeft: cx(5),
-              }}>{I18n.getLang('timeschedule_add_schedule_no_device_warning_text')}</Text>
-          </View>}
-          {/* Settings */}
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
-          <View style={styles.switchButton}>
-            <Text style={styles.text}>{I18n.getLang('timeschedule_add_schedule_text2')}</Text>
-            <SwitchButton
-              value={state.isNotification}
-              onValueChange={value => {
-                state.isNotification = value
-              }}/>
-          </View>
-          {/* Summary */}
-          <View>
-            <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, `${state.hour}:${state.minute}`)}</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}>{[state.hour, state.minute].join(':')}</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(16), flex: 1}}>
-                {!!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.dpId}>
-                            <Text style={[styles.rightItem]}
-                            >{item.label}</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.dpId}>
-                            <Text style={[styles.rightItem]}
-                            >{item.label}</Text>
-                          </View>
-                        ))
-                      }</View>
-                  </>}
-                </>}
-              </View>
-            </View>
-            <Spacer height={cx(40)}/>
-            {props.mode === 'edit' && <View style={{ marginBottom: cx(24) }}>
-                <DeleteButton
-                    text={I18n.getLang('edit_timeschedule_bttn_text')}
-                    onPress={() => {
-                      deleteDialog(scheduleItem).then(() => {
-                        navigation.goBack()
-                      })
-                    }}
-                />
-            </View>}
-          </View>
-        </View>
-      </ScrollView>
-    </Page>
-  )
-}
-
-const styles = StyleSheet.create({
-  content: {
-    marginHorizontal: cx(24),
-  },
-  picker: {
-    marginHorizontal: cx(24),
-    marginVertical: cx(15),
-    color: 'rgb(35,35,38)',
-  },
-  zeroMarginHorizontal: {
-    marginHorizontal: 0,
-  },
-  loopText: {
-    fontSize: cx(14),
-    fontFamily: 'PingFangSC-Medium',
-    color: '#999999',
-    marginTop: cx(10),
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    marginTop: cx(30),
-    marginBottom: cx(10),
-  },
-  switchButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: cx(10),
-  },
-  text: {
-    color: '#000',
-  },
-  switchCard: {
-    paddingVertical: cx(16),
-  },
-  switchCardContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  switchCardTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  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),
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(16),
-  },
-  rightItem: {
-    paddingHorizontal: cx(12),
-    color: '#000',
-  },
-})
-
+import React, { useCallback, useEffect } from 'react'
+import { FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import Page from '@ledvance/base/src/components/Page'
+import TextField from '@ledvance/base/src/components/TextField'
+import I18n from '@ledvance/base/src/i18n'
+import { useNavigation, useRoute } from '@react-navigation/native'
+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 { SwitchButton, Utils } from 'tuya-panel-kit'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import DeleteButton from '@ledvance/base/src/components/DeleteButton'
+import { loopText, toFixed } from '@ledvance/base/src/utils/common'
+import { NativeApi } from '@ledvance/base/src/api/native'
+import { isUVCFanDevice, useDeviceId } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import res from '@ledvance/base/src/res'
+import { useReactive } from 'ahooks'
+import { dpItem, TimeSchedulePageRouteParams } from './TimeSchedulePage'
+import { cloneDeep, differenceBy, isEmpty, isEqual } from 'lodash'
+import DeviceState from './DeviceState'
+import { getHexByHSV, getHSVByHex } from '@ledvance/base/src/utils'
+import { Buffer } from 'buffer'
+import { dp2Obj, obj2Dp } from './mix/MixLightActions'
+import { dp2Obj as sencePp2Obj, obj2Dp as senceObj2Dp } from '../scene/SceneAction'
+import { COLOUR, SCENE, WHITE } from '../../hooks/DeviceDpStateHooks'
+import { ColorList } from './components/ColorList'
+
+const { convertX: cx } = Utils.RatioUtils
+
+export interface ScheduleItemDp extends dpItem {
+  enable: boolean
+}
+
+interface TimeScheduleEditPageParams extends TimeSchedulePageRouteParams {
+  mode: 'add' | 'edit'
+  scheduleItem: any,
+  dps: ScheduleItemDp[]
+  dpCodes: Record<any, any>
+  reloadData: () => void
+  deleteDialog: (item: any) => Promise<void>
+}
+
+const TimeScheduleEditPage = () => {
+  const navigation = useNavigation()
+  const devId = useDeviceId()
+  const route = useRoute()
+  const isUVCFan = isUVCFanDevice()
+  const props = cloneDeep(route.params) as TimeScheduleEditPageParams
+  const { scheduleItem, dps, reloadData, deleteDialog, dpCodes } = props
+  const state = useReactive({
+    loading: false,
+    hour: '00',
+    minute: '00',
+    loop: [0, 0, 0, 0, 0, 0, 0],
+    isNotification: false,
+    name: '',
+    selectedSkill: [] as ScheduleItemDp[],
+    skillList: [] as ScheduleItemDp[],
+    isManual: true,
+    singleActions: {
+      enable: true,  // colorLightSwitch
+      whiteLightSwitch: true,
+      isColor: true,
+      h: 0,
+      s: 100,
+      v: 100,
+      temperature: 100,
+      brightness: 100,
+      colorDiskActiveKey: 0,
+      colors: ColorList[0],
+      activeKey: 1,
+      fanEnable: true,
+      fanSpeed: 1,
+      fanMode: 'normal',
+    },
+    mixActions: {
+      whiteLightSwitch: true,
+      colorLightSwitch: false,
+      mixRgbcwEnabled: true,
+      hue: 360,
+      sat: 100,
+      lightness: 100,
+      brightness: 100,
+      colorTempPercent: 100,
+    },
+    actionScene: {} as any,
+    dpsValue: {} as Record<string, any>,
+  })
+  console.log(props, '< --- props')
+  useEffect(() => {
+    // 设置功能列表
+    if (props.mode === 'edit' && scheduleItem) {
+      state.hour = scheduleItem.time.split(':')[0]
+      state.minute = scheduleItem.time.split(':')[1]
+      state.name = scheduleItem.aliasName
+      state.isNotification = !!scheduleItem.isAppPush
+      state.loop = scheduleItem.loops.split('').map((mItem: string) => parseInt(mItem))
+      state.selectedSkill = props.isCeilingLight ? props.dps : dps.reduce((pre, cur) => {
+        if (scheduleItem.dps[cur.dpId] !== undefined) {
+          const result = { ...cur, enable: scheduleItem.dps[cur.dpId] }
+          pre.push(result)
+        }
+        return pre
+      }, [] as ScheduleItemDp[])
+      state.skillList = differenceBy(dps, state.selectedSkill, 'dpId')
+
+      if (props.dps2lightData) {
+        console.log(scheduleItem.dps, '< --- dps')
+        const lightData = props.dps2lightData(scheduleItem.dps)
+        console.log(lightData, '< --- lightData')
+        state.singleActions = {
+          ...state.singleActions,
+          ...lightData.singleActions,
+        }
+        state.isManual = lightData.isManual
+        state.actionScene = lightData.actionScene
+        
+        return
+      }
+
+      // single
+      if (scheduleItem.dps[dpCodes.switch_led] !== undefined) {
+        state.singleActions.enable = scheduleItem.dps[dpCodes.switch_led]
+      }
+      if (scheduleItem.dps[dpCodes.work_mode] !== undefined) {
+        state.singleActions.isColor = scheduleItem.dps[dpCodes.work_mode] === COLOUR
+      }
+      if (scheduleItem.dps[dpCodes.fan_switch] !== undefined) {
+        state.singleActions.fanEnable = scheduleItem.dps[dpCodes.fan_switch]
+      }
+      state.singleActions.brightness = scheduleItem.dps[dpCodes.bright_value] / 10 || 100
+      state.singleActions.temperature = scheduleItem.dps[dpCodes.temp_value] / 10 || 100
+      state.singleActions.fanSpeed = scheduleItem.dps[dpCodes.fan_speed] || 1
+      state.singleActions.fanMode = scheduleItem.dps[dpCodes.fan_mode] || 'normal'
+      const hsv = getHSVByHex(scheduleItem.dps[dpCodes.colour_data] || '0000000003e8')
+      state.singleActions.h = hsv.h
+      state.singleActions.s = Math.round(hsv.s / 10)
+      state.singleActions.v = Math.round(hsv.v / 10)
+
+      // mix
+      if (scheduleItem.dps[dpCodes.mix_rgbcw] !== undefined) {
+        const base64String = Buffer.from(scheduleItem.dps[dpCodes.mix_rgbcw], 'base64').toString('hex')
+        state.mixActions = dp2Obj(base64String)
+      }
+
+      if (scheduleItem.dps[dpCodes.scene_data] !== undefined) {
+        state.actionScene = sencePp2Obj(scheduleItem.dps[dpCodes.scene_data], !!props.isFanLamp, isUVCFan)
+        state.isManual = false
+      }
+      if (scheduleItem.dps[dpCodes.mix_light_scene] !== undefined) {
+        const sceneDp = scheduleItem.dps[dpCodes.mix_light_scene]
+        state.actionScene = Buffer.from(sceneDp, 'base64').toString('hex')
+        state.isManual = false
+      }
+
+    } else {
+      const date = new Date()
+      state.hour = toFixed(date.getHours(), 2)
+      state.minute = toFixed(date.getMinutes(), 2)
+      // 当dps长度只有1个的时候或者是mixLight灯时默认选中,
+      if (!showClearIcon()) {
+        state.selectedSkill = dps.map(item => ({
+          ...item,
+          enable: true,
+        }))
+      } else {
+        state.skillList = dps.map(item => ({
+          ...item,
+          enable: true,
+        }))
+      }
+    }
+  }, [])
+
+  const selectWeekAction = (idx: number) => {
+    state.loop = state.loop.map((item, tempIndex) => {
+      if (tempIndex === idx - 1) {
+        return item > 0 ? 0 : 1
+      }
+      return item
+    })
+  }
+
+  const manualCheck = () => {
+    return state.isManual && state.selectedSkill.length
+  }
+  
+  // 只支持风扇灯跟普通灯
+  const sceneCheck = () => {
+    if(props.isCeilingLight){
+      return (state.actionScene?.mainLamp?.nodes?.length) || (state.actionScene?.secondlyLamp?.nodes?.length)
+    }
+    return !state.isManual && state.skillList.length === 0 && state.actionScene && (state?.actionScene?.nodes || state?.actionScene?.value)
+  }
+  
+  const saveEnable = () => {
+    return !state.loading
+        && state.name.length && state.name.length <= 32
+        && (manualCheck() || sceneCheck())
+        && [
+        !isEqual(scheduleItem?.aliasName, state.name),
+        !isEqual(scheduleItem?.time, [state.hour, state.minute].join(':')),
+        !isEqual(scheduleItem?.loops, state.loop.join('')),
+        !isEqual(!!scheduleItem?.isAppPush, state.isNotification),
+        !isEqual(scheduleItem?.dps, getSendDps()),
+      ].some(e => e)
+  }
+
+  const saveAction = () => {
+    if (!saveEnable() || state.loading) {
+      return
+    }
+
+    state.loading = true
+    const params = {
+      time: [state.hour, state.minute].join(':'),
+      loops: state.loop.join(''),
+      dps: getAllDps(),
+      aliasName: state.name,
+      status: true,
+      notification: state.isNotification,
+    }
+
+    if (scheduleItem) {
+      NativeApi.editTimer(
+        devId,
+        {
+          ...params,
+          id: scheduleItem.id,
+        },
+        res => {
+          if (res?.result) {
+            reloadData()
+            navigation.goBack()
+            state.loading = false
+          } else {
+            state.loading = false
+          }
+
+        },
+      )
+    } else {
+      NativeApi.addTimer(
+        devId,
+        params,
+        res => {
+          if (res?.result) {
+            reloadData()
+            navigation.goBack()
+            state.loading = false
+          } else {
+            state.loading = false
+          }
+        },
+      )
+    }
+  }
+
+  const getSendDps = () => {
+    if (props.lightData2dps) {
+      return props.lightData2dps({
+        singleActions: state.singleActions,
+        mixActions: state.mixActions,
+        actionScene: !isEmpty(state.actionScene) ? state.actionScene : undefined,
+        isManual: state.isManual,
+      })
+    }
+    if (state.isManual) {
+      if (props.isDIMLamp) {
+        return {
+          [dpCodes.bright_value]: state.singleActions.brightness * 10,
+        }
+      } else if (props.isFanLamp) {
+        let v = {}
+        const hasFan = !!state.selectedSkill.find(item => item.value.includes('fan'))
+        const hasLight = !!state.selectedSkill.find(item => item.value.includes('light'))
+        if (hasFan) {
+          v = {
+            ...v,
+            [dpCodes.fan_mode]: state.singleActions.fanMode,
+            [dpCodes.fan_speed]: state.singleActions.fanSpeed,
+          }
+        }
+        if (hasLight) {
+          v = {
+            ...v,
+            [dpCodes.work_mode]: WHITE,
+            [dpCodes.bright_value]: state.singleActions.brightness * 10,
+            [dpCodes.temp_value]: state.singleActions.temperature * 10,
+          }
+        }
+        return v
+      }
+      if (props.isTWLamp) {
+        return {
+          [dpCodes.work_mode]: WHITE,
+          [dpCodes.bright_value]: state.singleActions.brightness * 10,
+          [dpCodes.temp_value]: state.singleActions.temperature * 10,
+        }
+      }
+      if (props.isRGBWLamp) {
+        if (state.singleActions.isColor) {
+          const colorString = getHexByHSV({
+            h: state.singleActions.h,
+            s: state.singleActions.s * 10,
+            v: state.singleActions.v * 10,
+          })
+          return {
+            [dpCodes.work_mode]: COLOUR,
+            [dpCodes.colour_data]: colorString,
+          }
+        }
+        return {
+          [dpCodes.work_mode]: WHITE,
+          [dpCodes.temp_value]: state.singleActions.temperature * 10,
+          [dpCodes.bright_value]: state.singleActions.brightness * 10,
+        }
+
+      } else if (props.isMixRGBWLamp) {
+        const dpsString = obj2Dp(state.mixActions)
+        return {
+          [dpCodes.switch_led]: true,
+          [dpCodes.mix_rgbcw]: Buffer.from(dpsString, 'hex').toString('base64'),
+        }
+      } else if (props.isGlassRGBWLamp) {
+        const colorString = getHexByHSV({
+          h: state.singleActions.h,
+          s: state.singleActions.s * 10,
+          v: state.singleActions.v * 10,
+        })
+        return {
+          [dpCodes.work_mode]: COLOUR,
+          [dpCodes.colour_data]: colorString,
+        }
+      } else if (props.isGARDOT) {
+        const colorString = getHexByHSV({
+          h: state.singleActions.h,
+          s: state.singleActions.s * 10,
+          v: state.singleActions.v * 10,
+        })
+        return {
+          [dpCodes.work_mode]: COLOUR,
+          [dpCodes.colour_data]: colorString,
+        }
+      } else {
+        const colorString = getHexByHSV({
+          h: state.singleActions.h,
+          s: state.singleActions.s * 10,
+          v: state.singleActions.v * 10,
+        })
+        return {
+          [dpCodes.switch_led]: true,
+          [dpCodes.colour_data]: colorString,
+        }
+      }
+    } else {
+      if (props.isMixRGBWLamp) {
+        const v = {
+          [dpCodes.mix_light_scene]: Buffer.from(state.actionScene?.value, 'hex').toString('base64'),
+          [dpCodes.switch_led]: true,
+          [dpCodes.work_mode]: SCENE,
+        }
+        return props.isFanLamp ? {
+          ...v,
+          [dpCodes.fan_switch]: state.actionScene.fanEnable,
+          [dpCodes.fan_speed]: state.actionScene.fanSpeed,
+        } : v
+      } else {
+        const v = {
+          [dpCodes.switch_led]: true,
+          // @ts-ignore
+          [dpCodes.scene_data]: senceObj2Dp({
+            id: Number(state?.actionScene?.id),
+            nodes: state?.actionScene?.nodes,
+          }, !!props.isFanLamp, isUVCFan),
+          [dpCodes.work_mode]: SCENE,
+        }
+        return props.isFanLamp ? {
+          ...v,
+          [dpCodes.fan_switch]: state.actionScene.fanEnable,
+          [dpCodes.fan_speed]: state.actionScene.fanSpeed,
+        } : v
+      }
+    }
+
+  }
+
+  const getAllDps = () => {
+    const dpsValue = getSendDps()
+    if (state.isManual && !props.isMixRGBWLamp) {
+      let v = {}
+      state.selectedSkill.forEach(skill => {
+        v[skill.dpId] = skill.enable
+      })
+      return {
+        ...v,
+        ...dpsValue,
+      }
+    } else {
+      return dpsValue
+    }
+  }
+
+  const setSendDps = useCallback((actions, type) => {
+    state[type] = actions
+  }, [])
+
+  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 handelSkill = (handelType: string, skill: ScheduleItemDp) => {
+    if (handelType === 'add') {
+      state.selectedSkill = [...state.selectedSkill, skill]
+      state.skillList = state.skillList.filter(item => item.dpId !== skill.dpId)
+    } else {
+      state.skillList = [...state.skillList, skill]
+      state.selectedSkill = state.selectedSkill.filter(item => item.dpId !== skill.dpId)
+    }
+  }
+
+  const hasSelected = () => {
+    return !!state.selectedSkill.length
+  }
+
+  const changeSkillEnable = useCallback((dpId: string, enable: boolean) => {
+    state.selectedSkill = state.selectedSkill.map((skill) => {
+      if (dpId === skill.dpId) {
+        skill.enable = enable
+      }
+      return skill
+    })
+  }, [state.selectedSkill])
+
+  const showClearIcon = () => {
+    return dps.length > 1 && !props.isMixRGBWLamp && !props.isCeilingLight
+  }
+
+  return (
+    <Page
+      backText={I18n.getLang('motion_detection_add_time_schedule_system_back_text')}
+      rightButtonIcon={saveEnable() ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={() => saveAction()}
+      rightButtonDisabled={!saveEnable()}
+      showBackDialog={true}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang('cancel_dialog_leave_unsaved_timeschedule_note')}>
+      <ScrollView
+        nestedScrollEnabled={true}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}>
+        <LdvTopName
+          title={I18n.getLang(props.mode === 'add' ? 'motion_detection_add_time_schedule_headline_text' : 'edit_timeschedule_headline_text')}/>
+        <View style={styles.content}>
+          <TextField
+            value={state.name}
+            placeholder={I18n.getLang('motion_detection_add_time_schedule_selectionfield_text')}
+            onChangeText={(t: string) => {
+              state.name = t
+            }}
+            showError={state.name.length > 32}
+            maxLength={33}
+            errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}/>
+          {/* pick */}
+          <LdvPickerView
+            style={styles.picker}
+            hour={state.hour}
+            minute={state.minute}
+            setHour={v => (state.hour = v)}
+            setMinute={v => (state.minute = v)}
+          />
+          {/* week */}
+          <LdvWeekView
+            value={state.loop}
+            style={styles.zeroMarginHorizontal}
+            onSelect={selectWeekAction}/>
+          <Text style={styles.loopText}>{loopText(state.loop, `${state.hour}:${state.minute}`)}</Text>
+          {/* Apply for */}
+          <View>
+            <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>
+              )
+            })}
+          </View>
+          {/* Device state */}
+          <View>
+            <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
+          </View>
+          <DeviceState
+            singleActions={state.singleActions}
+            mixActions={state.mixActions}
+            actionScene={state.actionScene}
+            dpCodes={dpCodes}
+            dps={state.skillList}
+            selectedDps={state.selectedSkill}
+            scheduleItem={scheduleItem}
+            isManual={state.isManual}
+            setIsManual={useCallback((v) => {
+              state.isManual = v
+            }, [])}
+            setSendDps={setSendDps}
+            changeSkillEnable={changeSkillEnable}
+            isDIMLamp={props.isDIMLamp}
+            isOnlyRGBLamp={props.isOnlyRGBLamp}
+            isRGBLamp={props.isRGBLamp}
+            isRGBWLamp={props.isRGBWLamp}
+            isMixRGBWLamp={props.isMixRGBWLamp}
+            isTWLamp={props.isTWLamp}
+            isFanLamp={props.isFanLamp}
+            isSupportMode={props.isSupportMode}
+            isSupportColor={props.isSupportColor}
+            isSupportBrightness={props.isSupportBrightness}
+            isSupportTemperature={props.isSupportTemperature}
+            isSupportMood={props.isSupportMood}
+            isStringLight={props.isStringLight}
+            isStripLight={props.isStripLight} 
+            fantasyFeatureId={props.fantasyFeatureId}
+            isCeilingLight={props.isCeilingLight}
+            />
+          {!hasSelected() && <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Image style={{ width: cx(16), height: cx(16), tintColor: '#FF9500' }} source={res.ic_warning_amber}/>
+              <Text style={{
+                color: '#FF9500',
+                marginLeft: cx(5),
+              }}>{I18n.getLang('timeschedule_add_schedule_no_device_warning_text')}</Text>
+          </View>}
+          {/* Settings */}
+          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
+          <View style={styles.switchButton}>
+            <Text style={styles.text}>{I18n.getLang('timeschedule_add_schedule_text2')}</Text>
+            <SwitchButton
+              value={state.isNotification}
+              onValueChange={value => {
+                state.isNotification = value
+              }}/>
+          </View>
+          {/* Summary */}
+          <View>
+            <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, `${state.hour}:${state.minute}`)}</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}>{[state.hour, state.minute].join(':')}</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(16), flex: 1}}>
+                {!!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.dpId}>
+                            <Text style={[styles.rightItem]}
+                            >{item.label}</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.dpId}>
+                            <Text style={[styles.rightItem]}
+                            >{item.label}</Text>
+                          </View>
+                        ))
+                      }</View>
+                  </>}
+                </>}
+              </View>
+            </View>
+            <Spacer height={cx(40)}/>
+            {props.mode === 'edit' && <View style={{ marginBottom: cx(24) }}>
+                <DeleteButton
+                    text={I18n.getLang('edit_timeschedule_bttn_text')}
+                    onPress={() => {
+                      deleteDialog(scheduleItem).then(() => {
+                        navigation.goBack()
+                      })
+                    }}
+                />
+            </View>}
+          </View>
+        </View>
+      </ScrollView>
+    </Page>
+  )
+}
+
+const styles = StyleSheet.create({
+  content: {
+    marginHorizontal: cx(24),
+  },
+  picker: {
+    marginHorizontal: cx(24),
+    marginVertical: cx(15),
+    color: 'rgb(35,35,38)',
+  },
+  zeroMarginHorizontal: {
+    marginHorizontal: 0,
+  },
+  loopText: {
+    fontSize: cx(14),
+    fontFamily: 'PingFangSC-Medium',
+    color: '#999999',
+    marginTop: cx(10),
+  },
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+    marginTop: cx(30),
+    marginBottom: cx(10),
+  },
+  switchButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: cx(10),
+  },
+  text: {
+    color: '#000',
+  },
+  switchCard: {
+    paddingVertical: cx(16),
+  },
+  switchCardContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  switchCardTitle: {
+    color: '#000',
+    fontSize: cx(16),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  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),
+    backgroundColor: '#cbcbcb',
+    borderRadius: cx(16),
+  },
+  rightItem: {
+    paddingHorizontal: cx(12),
+    color: '#000',
+  },
+})
+
 export default TimeScheduleEditPage