@ledvance/group-ui-biz-bundle 1.0.0

package/src/modules/time_schedule/TimeScheduleDetailPage.tsx

@@ -0,0 +1,704 @@
+import React, { useCallback, useEffect, useMemo } from "react";
+import { FlatList, ScrollView, StyleSheet, Text, View } 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 TextField from "@ledvance/base/src/components/TextField";
+import { cloneDeep, isEqual } from "lodash";
+import { useCreation, useReactive } from "ahooks";
+import { SwitchButton, TimerPicker, Utils } from "tuya-panel-kit";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import LdvWeekView from '@ledvance/base/src/components/weekSelect'
+import { loopText, showDialog } from "@ledvance/base/src/utils/common";
+import Card from "@ledvance/base/src/components/Card";
+import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
+import ApplyForDeviceList from '@ledvance/base/src/components/ApplyForDeviceList'
+import LampAdjustView from "@ledvance/base/src/components/LampAdjustView";
+import { Timer } from './Interface'
+import res from "@ledvance/base/src/res";
+import { useGroupDevices, useMoods, useUAGroupInfo } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { TimeSchedulePageParams } from "./TimeSchedulePage";
+import { Result } from "@ledvance/base/src/models/modules/Result";
+import DeleteButton from "@ledvance/base/src/components/DeleteButton";
+import InfoText from "@ledvance/base/src/components/InfoText";
+import SegmentControl from "@ledvance/base/src/components/segmentControl";
+import { getHSVByHex, getHexByHSV } from "@ledvance/base/src/utils";
+import MoodItem from "../mood/MoodItem";
+import { dp2Obj, getRemoteSceneList, obj2Dp, stripDp2Obj, stripObj2Dp } from "../mood/SceneAction";
+import FanAdjustView from "@ledvance/base/src/components/FanAdjustView";
+import { SceneMode } from "../mood/SceneInfo";
+import StripAdjustView, { ColorList } from "@ledvance/base/src/components/StripAdjustView"
+import { WorkMode } from "@ledvance/base/src/utils/interface";
+import { Buffer } from 'buffer'
+
+const { convertX: cx } = Utils.RatioUtils;
+const { toFixedString } = Utils.NumberUtils;
+interface TimeScheduleDetailPageParams extends TimeSchedulePageParams {
+  mode: 'add' | 'edit'
+  timeSchedule: Timer,
+  modDeleteTimeSchedule: (mode: 'add' | 'edit' | 'del', timeSchedule: Timer, ids: string) => Promise<Result<any>>
+  refreshFn: () => void
+}
+const TimeScheduleDetailPage = () => {
+  const navigation = useNavigation()
+  const uaGroupInfo = useUAGroupInfo()
+  const [groupDevices] = useGroupDevices()
+  const [moods, setMoods] = useMoods()
+  const props = cloneDeep(useRoute().params) as TimeScheduleDetailPageParams
+  const state = useReactive({
+    timeSchedule: props.mode === 'add' ? newTimeSchedule() : cloneDeep(props.timeSchedule),
+    isManual: true,  // manual ,mood
+    isColorMode: true,
+    switchLed: true, // light
+    switchSocket: true,
+    switchFan: true,
+    brightness: 100,
+    temperature: 0,
+    hsv: defaultHsv(),
+    stripState: defaultStripState(),
+    scene: '',
+    loading: false
+  })
+
+  const tabList = useCreation(() => {
+    const isSupportWhite = props.isSupportBrightness || props.isSupportTemperature
+    const tabs = [
+      { key: 1, title: I18n.getLang('add_new_static_mood_lights_schedule_switch_tab_color_text') },
+      { key: 0, title: I18n.getLang('add_new_static_mood_lights_schedule_switch_tab_white_text') },
+      { key: 3, title: I18n.getLang('add_new_dynamic_mood_strip_lights_schedule_switch_tab_combination_text') },
+    ]
+    if (!isSupportWhite) {
+      return tabs.filter(tab => tab.key !== 0)
+    }
+    if (!props.isSupportColor) {
+      return tabs.filter(tab => tab.key === 0)
+    }
+    return tabs
+  }, [])
+
+  const getSceneByDp = (sceneDp: string) => {
+    if (props.sceneDataDp2Obj) {
+      return props.sceneDataDp2Obj(sceneDp)
+    }
+    const isFantasy = props.isStringLight || props.isStripLight
+    return isFantasy ? stripDp2Obj(Buffer.from(sceneDp, 'base64').toString('hex'), props.isStringLight) : dp2Obj(sceneDp, props.isSupportFan, props.isSupportUVC)
+  }
+
+  const getDpByScene = (scene: any) => {
+    if (props.sceneDataObj2Dp) {
+      return props.sceneDataObj2Dp(scene)
+    }
+    const isFantasy = props.isStringLight || props.isStripLight
+    return isFantasy ? Buffer.from(stripObj2Dp(scene, props.isStringLight), 'hex').toString('base64') : obj2Dp(scene, props.isSupportFan, props.isSupportUVC)
+  }
+
+  const modeId = useMemo(() => {
+    if (state.scene) {
+      return getSceneByDp(state.scene).id
+    }
+    return -1
+  }, [state.scene])
+
+  useEffect(() => {
+    if (!(moods && moods.length) && props.sceneDataCode) {
+      getRemoteSceneList(uaGroupInfo.tyGroupId.toString(), {
+        isSupportColor: props.isSupportColor,
+        isSupportTemperature: props.isSupportTemperature,
+        isSupportBrightness: props.isSupportBrightness,
+        isStringLight: props.isStringLight,
+        isStripLight: props.isStripLight
+      }).then(res => {
+        if (res.success && res.data) {
+          setMoods(res.data)
+          if (props.mode === 'add') state.scene = getDpByScene(res.data[0])
+        }
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    if (props.mode === 'edit' && props.timeSchedule) {
+      const dps = JSON.parse(props.timeSchedule.dps)
+      if (props.switchLedCode && dps.hasOwnProperty(props.switchLedCode)) {
+        state.switchLed = dps[props.switchLedCode]
+      }
+      if (props.tempValueCode && dps.hasOwnProperty(props.tempValueCode)) {
+        state.temperature = Math.round(dps[props.tempValueCode] / 10)
+        state.isColorMode = false
+      }
+      if (props.brightValueCode && dps.hasOwnProperty(props.brightValueCode)) {
+        state.brightness = Math.round(dps[props.brightValueCode] / 10)
+        state.isColorMode = false
+      }
+      if (props.colorDataCode && dps.hasOwnProperty(props.colorDataCode)) {
+        if (props.colorDataDp2Obj) {
+          const color = props.colorDataDp2Obj(dps[props.colorDataCode])
+          state.hsv = {
+            h: color.h,
+            s: Math.round(color.s / 10),
+            v: Math.round(color.v / 10),
+          }
+          return
+        }
+        const hsv = getHSVByHex(dps[props.colorDataCode])
+        state.hsv = {
+          h: hsv.h,
+          s: Math.round(hsv.s / 10),
+          v: Math.round(hsv.v / 10),
+        }
+      }
+      if (props.sceneDataCode && dps.hasOwnProperty(props.sceneDataCode)) {
+        if (dps[props.sceneDataCode]) {
+          state.scene = dps[props.sceneDataCode]
+        } else {
+          state.scene = getDpByScene(moods[0])
+        }
+        state.isManual = false
+      }
+      if (props.drawToolDataCode && dps.hasOwnProperty(props.drawToolDataCode)) {
+        if (props.drawToolDataDp2Obj && dps[props.drawToolDataCode]) {
+          const { hsv, brightness, temperature, stripState, isColor } = props.drawToolDataDp2Obj(dps[props.drawToolDataCode])
+          state.brightness = brightness
+          state.temperature = temperature
+          state.hsv = cloneDeep(hsv)
+          if (stripState) {
+            state.stripState = cloneDeep(stripState)
+          }
+          state.isColorMode = !!isColor
+        }
+      }
+    } else {
+      if (moods && moods.length) {
+        state.scene = getDpByScene(moods[0])
+      }
+    }
+  }, [props.mode, JSON.stringify(props.timeSchedule), JSON.stringify(moods)])
+
+
+  const getFormateTime = useCallback((time: number | string) => {
+    if (typeof time === 'number') {
+      return `${toFixedString(Math.trunc(time / 60), 2)}:${toFixedString(time % 60, 2)}`
+    }
+    if (typeof time === 'string') {
+      const t = time.split(':')
+      return Number(t[0]) * 60 + Number(t[1])
+    }
+    return time
+  }, [])
+
+  const getActionOnOff = useMemo(() => {
+    const off = [] as string[]
+    const on = [] as string[]
+    if (props.switchLedCode) {
+      if (state.switchLed) {
+        on.push(I18n.getLang('light_sources_tile_tw_lighting_headline'))
+      } else {
+        off.push(I18n.getLang('light_sources_tile_tw_lighting_headline'))
+      }
+    }
+    if (props.switchSocket) {
+      if (state.switchSocket) {
+        on.push(I18n.getLang('feature_summary_action_component_5'))
+      } else {
+        off.push(I18n.getLang('feature_summary_action_component_5'))
+      }
+    }
+    if (props.switchFan) {
+      if (state.switchFan) {
+        on.push(I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline'))
+      } else {
+        off.push(I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline'))
+      }
+    }
+    return {
+      on, off
+    }
+  }, [state.switchLed, state.switchSocket, state.switchFan])
+
+  const getActions = useCallback(() => {
+    const actions = {
+      time: state.timeSchedule.time,
+      dps: {}
+    }
+    if (state.isManual) {
+      if (state.switchLed) {
+        if (props.drawToolDataObj2Dp && props.drawToolDataCode) {
+          actions.dps[props.drawToolDataCode] = props.drawToolDataObj2Dp({
+            hsv: state.hsv,
+            stripState: state.stripState,
+            brightness: state.brightness,
+            temperature: state.temperature,
+            isColor: state.isColorMode
+          })
+          const whiteMode = props.isStringLight ? !state.isColorMode : state.stripState.activeKey === 0
+          actions.dps[props.workModeCode] = whiteMode ? WorkMode.White : WorkMode.Colour
+
+        } else if (state.isColorMode) {
+          if (props.colorDataCode) {
+            const hsv = {
+              ...state.hsv,
+              s: state.hsv.s * 10,
+              v: state.hsv.v * 10,
+            }
+            if (props.colorDataObj2Dp) {
+              actions.dps[props.colorDataCode] = props.colorDataObj2Dp(hsv)
+            } else {
+              const hex = getHexByHSV(hsv)
+              actions.dps[props.colorDataCode] = hex
+            }
+          }
+          actions.dps[props.workModeCode] = WorkMode.Colour
+        } else {
+          if (props.brightValueCode) {
+            actions.dps[props.brightValueCode] = state.brightness * 10
+          }
+          if (props.tempValueCode) {
+            actions.dps[props.tempValueCode] = state.temperature * 10
+          }
+          actions.dps[props.workModeCode] = WorkMode.White
+        }
+      }
+      if (props.switchLedCode) {
+        actions.dps[props.switchLedCode] = state.switchLed
+      }
+    } else {
+      if (props.sceneDataCode) {
+        actions.dps[props.sceneDataCode] = state.scene
+      }
+      actions.dps[props.workModeCode] = WorkMode.Scene
+      if (props.switchLedCode) {
+        actions.dps[props.switchLedCode] = true
+      }
+    }
+    console.log(state, '< --- state')
+    console.log(actions, '< --- actions')
+    return JSON.stringify(actions)
+  }, [state.timeSchedule.time, state.switchLed, state.brightness, state.temperature])
+
+  const isModify = useMemo(() => {
+    const schedule = props.mode === 'add' ? newTimeSchedule() : props.timeSchedule
+    const before = {
+      aliasName: schedule.aliasName,
+      time: schedule.time,
+      isAppPush: schedule.isAppPush,
+      loops: schedule.loops
+    }
+    const now = {
+      aliasName: state.timeSchedule.aliasName,
+      time: state.timeSchedule.time,
+      isAppPush: state.timeSchedule.isAppPush,
+      loops: state.timeSchedule.loops
+    }
+    if (props.mode === 'add') {
+      return isEqual(before, now)
+    } else {
+      return isEqual({
+        ...before,
+        dps: JSON.stringify({
+          time: before.time,
+          dps: JSON.parse(schedule.dps)
+        })
+      }, {
+        ...now,
+        dps: getActions()
+      })
+    }
+  }, [JSON.stringify(state)])
+
+  const allowSubmit = useMemo(() => {
+    return !!(state.timeSchedule.aliasName.length && state.timeSchedule.aliasName.length < 33) && !isModify
+  }, [state.timeSchedule.aliasName, isModify])
+
+  const gradientMode = useMemo(() => (
+    props.isStringLight ? SceneMode.StringGradient : props.isStripLight ? SceneMode.StripGradient : SceneMode.SourceGradient
+  ), [props.isStringLight, props.isStripLight, SceneMode])
+
+  return (
+    <Page
+      backText={I18n.getLang('motion_detection_add_time_schedule_system_back_text')}
+      headlineText={I18n.getLang(props.mode === 'add' ? 'motion_detection_add_time_schedule_headline_text' : 'edit_timeschedule_headline_text')}
+      rightButtonIcon={allowSubmit ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={async () => {
+        getActions()
+        return
+        if (!allowSubmit || state.loading) return
+        state.loading = true
+        const res = await props.modDeleteTimeSchedule(props.mode, {
+          ...state.timeSchedule,
+          status: 1,
+          dps: getActions()
+        }, '')
+        console.log(res, '< ---- resss')
+        state.loading = false
+        if (res.success) {
+          props.refreshFn()
+          navigation.goBack()
+        }
+      }}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang('cancel_dialog_leave_unsaved_timeschedule_note')}
+      showBackDialog={!isModify}
+      loading={state.loading}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <TextField
+          style={styles.cardContainer}
+          value={state.timeSchedule.aliasName}
+          showError={state.timeSchedule.aliasName?.length > 32}
+          maxLength={33}
+          errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}
+          placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
+          onChangeText={(t: string) => {
+            state.timeSchedule.aliasName = t;
+          }}
+        />
+
+        {/* pick */}
+        <TimerPicker
+          itemTextColor='#aeadb5'
+          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
+          is12Hours={false}
+          singlePicker={true}
+          startTime={getFormateTime(state.timeSchedule.time) as number}
+          symbol={''}
+          onTimerChange={(startTime) => {
+            state.timeSchedule.time = getFormateTime(startTime) as string
+          }} />
+        <LdvWeekView
+          value={state.timeSchedule.loops.split('').map(Number)}
+          style={styles.cardContainer}
+          onSelect={(index: number) => {
+            const rawIndex = index - 1
+            const weeks = state.timeSchedule.loops.split('')
+            weeks[rawIndex] = weeks[rawIndex] === '1' ? '0' : '1'
+            state.timeSchedule.loops = weeks.join('')
+          }} />
+        <Spacer />
+        <Text style={styles.cardContainer}>{loopText(state.timeSchedule.loops.split(''))}</Text>
+        <Spacer height={cx(30)} />
+
+        {/* device state */}
+        <Text style={[styles.itemTitle, styles.cardContainer]}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
+        <Spacer height={cx(10)} />
+        {props.isSupportMood && <SegmentControl
+          title1={I18n.getLang('timeschedule_add_schedule_switch_tab_manual_text')}
+          title2={I18n.getLang('timeschedule_add_schedule_switch_tab_mood_text')}
+          isFirst={state.isManual}
+          setIsFirst={(v: boolean) => state.isManual = v}
+        />}
+        <Spacer height={cx(10)} />
+        {state.isManual ?
+          <>
+            {!!props.switchLedCode && <Card
+              style={styles.cardContainer}
+            >
+              <LdvSwitch
+                title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+                color={'#fff'}
+                colorAlpha={1}
+                enable={state.switchLed}
+                setEnable={(enable: boolean) => {
+                  state.switchLed = enable
+                }}
+              />
+              {state.switchLed && (props.isStripLight ?
+                <StripAdjustView
+                  lampTabs={tabList}
+                  onColorDiskChange={(color, idx: K) => {
+                    state.stripState = {
+                      ...state.stripState,
+                      colors: color,
+                      colorDiskActiveKey: idx
+                    }
+                  }}
+                  colorDiskActiveKey={state.stripState.colorDiskActiveKey}
+                  activeKey={state.stripState.activeKey}
+                  onActiveKeyChange={(v) => {
+                    state.stripState = {
+                      ...state.stripState,
+                      activeKey: Number(v) as K
+                    }
+                  }}
+                  isSupportTemperature={props.isSupportTemperature}
+                  isSupportBrightness={props.isSupportBrightness}
+                  h={state.hsv.h} s={state.hsv.s} v={state.hsv.v}
+                  onHSVChange={(h, s, v) => { state.hsv = { h, s, v } }}
+                  onHSVChangeComplete={(h, s, v) => { state.hsv = { h, s, v } }}
+                  colorTemp={state.temperature}
+                  brightness={state.brightness}
+                  onCCTChange={() => { }}
+                  onCCTChangeComplete={(cct) => { state.temperature = cct }}
+                  onBrightnessChange={() => { }}
+                  onBrightnessChangeComplete={(bright) => { state.brightness = bright }}
+                /> :
+                <LampAdjustView
+                  reserveSV={true}
+                  isSupportBrightness={props.isSupportBrightness}
+                  isSupportColor={props.isSupportColor}
+                  isSupportTemperature={props.isSupportTemperature}
+                  isColorMode={state.isColorMode}
+                  setIsColorMode={(v) => { state.isColorMode = v }}
+                  h={state.hsv.h} s={state.hsv.s} v={state.hsv.v}
+                  colorTemp={state.temperature}
+                  brightness={state.brightness}
+                  onHSVChangeComplete={(h, s, v) => { state.hsv = { h, s, v } }}
+                  onHSVChange={(h, s, v) => { state.hsv = { h, s, v } }}
+                  onCCTChangeComplete={(cct) => { state.temperature = cct }}
+                  onCCTChange={(cct) => { state.temperature = cct }}
+                  onBrightnessChangeComplete={(bright) => { state.brightness = bright }}
+                  onBrightnessChange={(bright) => { state.brightness = bright }}
+                />)}
+              <ApplyForDeviceList
+                devices={cloneDeep(groupDevices)}
+              />
+              <Spacer height={cx(16)} />
+            </Card>}
+
+            {/* socket */}
+            {!!props.switchSocket && <Card
+              style={styles.cardContainer}
+            >
+              <LdvSwitch
+                title={I18n.getLang('feature_summary_action_component_5')}
+                color={'#fff'}
+                colorAlpha={1}
+                enable={state.switchSocket}
+                setEnable={(enable: boolean) => {
+                  state.switchSocket = enable
+                }}
+              />
+              <ApplyForDeviceList
+                devices={cloneDeep(groupDevices)}
+              />
+              <Spacer height={cx(16)} />
+            </Card>}
+
+            {/* Fan */}
+            {props.isSupportFan && <FanAdjustView
+              fanEnable={state.switchFan}
+              fanSpeed={1}
+              onFanSpeedChangeComplete={() => { }}
+              onFanSwitch={(enable) => {
+                state.switchFan = enable
+              }}
+              isSupportMode={true}
+            />}
+          </> :
+          <FlatList
+            data={cloneDeep(moods)}
+            renderItem={({ item }) => {
+              return (
+                <MoodItem
+                  enable={modeId === item.id}
+                  mood={item}
+                  type={gradientMode === item.mode ? 'gradient' : 'separate'}
+                  onSwitch={async _ => {
+                    state.scene = getDpByScene(item)
+                  }} />
+              )
+            }}
+            ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
+            ItemSeparatorComponent={() => (<Spacer />)}
+            ListFooterComponent={() => (<View style={{ marginHorizontal: cx(8) }}>
+              <Spacer height={cx(16)} />
+              <ApplyForDeviceList
+                devices={cloneDeep(groupDevices)}
+              />
+            </View>)}
+            keyExtractor={item => `${item.id}`} />
+        }
+        <Spacer height={cx(30)} />
+        <Text style={[styles.itemTitle, styles.cardContainer]}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
+        <View style={[styles.switchButton, styles.cardContainer]}>
+          <Text style={styles.text}>{I18n.getLang('timeschedule_add_schedule_text2')}</Text>
+          <SwitchButton
+            value={state.timeSchedule.isAppPush}
+            onValueChange={value => {
+              state.timeSchedule.isAppPush = value
+            }} />
+        </View>
+        <Spacer />
+
+        {/* summary */}
+        <Text style={[styles.itemTitle, styles.cardContainer]}>{I18n.getLang('add_sleepschedule_one_source_subheadline4_text')}</Text>
+        <Spacer height={cx(10)} />
+        <View style={styles.summaryContainer}>
+          <InfoText
+            icon={res.summary_icon1}
+            text={I18n.getLang('feature_summary_frequency_headline')}
+            iconStyle={styles.summaryImg}
+            textStyle={styles.leftTitle}
+            style={styles.summaryLeft}
+          />
+          <View style={styles.summaryRight}>
+            <Text style={styles.rightItem}>{loopText(state.timeSchedule.loops.split(''), state.timeSchedule.time)}</Text>
+          </View>
+        </View>
+        <View style={styles.summaryContainer}>
+          <InfoText
+            icon={res.summary_icon2}
+            text={I18n.getLang('feature_summary_time_headline')}
+            iconStyle={styles.summaryImg}
+            textStyle={styles.leftTitle}
+            style={styles.summaryLeft}
+          />
+          <View style={styles.summaryRight}>
+            <Text style={styles.rightItem}>{state.timeSchedule.time}</Text>
+          </View>
+        </View>
+        <View style={[styles.summaryContainer, { alignItems: 'flex-start' }]}>
+          <InfoText
+            icon={res.summary_icon3}
+            text={I18n.getLang('motion_detection_add_time_schedule_actions_text1')}
+            iconStyle={styles.summaryImg}
+            textStyle={styles.leftTitle}
+            style={styles.summaryLeft}
+          />
+          <View style={{ marginLeft: cx(16) }}>
+            {!!getActionOnOff.on.length && <View>
+              <Text style={{ marginLeft: cx(5) }}>{I18n.getLang('feature_summary_action_txt_1')}</Text>
+              <View style={{ flexDirection: 'row' }}>{
+                getActionOnOff.on.map(item => (
+                  <View style={[styles.summaryRight, { marginLeft: cx(5), marginBottom: cx(5) }]}
+                    key={item}>
+                    <Text style={[styles.rightItem]}
+                    >{item}</Text>
+                  </View>
+                ))
+              }</View>
+            </View>}
+            {!!getActionOnOff.off.length && <View>
+              <Text style={{ marginLeft: cx(5) }}>{I18n.getLang('feature_summary_action_txt_2')}</Text>
+              <View style={{ flexDirection: 'row' }}>{
+                getActionOnOff.off.map(item => (
+                  <View style={[styles.summaryRight, { marginLeft: cx(5), marginBottom: cx(5) }]}
+                    key={item}>
+                    <Text style={[styles.rightItem]}
+                    >{item}</Text>
+                  </View>
+                ))}
+              </View>
+            </View>}
+          </View>
+        </View>
+        <Spacer height={cx(30)} />
+
+        {/* delete */}
+        {props.mode === 'edit' && <View style={{ marginHorizontal: cx(24) }}>
+          <DeleteButton
+            text={I18n.getLang('edit_timeschedule_bttn_text')}
+            onPress={() => {
+              showDialog({
+                method: 'confirm',
+                title: I18n.getLang('cancel_dialog_delete_item_timeschedule_titel'),
+                subTitle: I18n.getLang('cancel_dialog_delete_item_timeschedule_description'),
+                onConfirm: async (_, { close }) => {
+                  state.loading = true
+                  close()
+                  const res = await props.modDeleteTimeSchedule('del', {
+                    ...state.timeSchedule,
+                    status: 2
+                  }, state.timeSchedule.id.toString())
+                  state.loading = false
+                  if (res.success) {
+                    props.refreshFn()
+                    navigation.goBack()
+                  }
+                },
+              })
+            }}
+          />
+          <Spacer />
+        </View>}
+      </ScrollView>
+    </Page>
+  )
+}
+
+const newTimeSchedule = () => {
+  return {
+    status: 1,
+    loops: '0000000',
+    isAppPush: false,
+    aliasName: '',
+    time: `${toFixedString(new Date().getHours(), 2)}:${toFixedString(new Date().getMinutes(), 2)}`,
+    dps: '',
+    id: -1
+  }
+}
+
+const defaultHsv = () => {
+  return {
+    h: 0,
+    s: 50,
+    v: 80
+  }
+}
+type K = 0 | 1 | 3
+export interface StripState {
+  colorDiskActiveKey: number
+  colors: string[]
+  activeKey: K
+}
+
+const defaultStripState = (): StripState => {
+  return {
+    colorDiskActiveKey: 0,
+    colors: ColorList[0],
+    activeKey: 1,
+  }
+}
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    marginHorizontal: cx(24)
+  },
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  summaryContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    marginBottom: cx(10),
+    marginHorizontal: cx(24)
+  },
+  summaryImg: {
+    height: cx(12),
+    width: cx(12),
+    tintColor: '#000'
+  },
+  summaryLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: cx(90),
+  },
+  leftTitle: {
+    fontSize: cx(14),
+    color: '#000',
+    marginTop: 0
+  },
+  summaryRight: {
+    flexDirection: 'column',
+    marginLeft: cx(21),
+    backgroundColor: '#cbcbcb',
+    borderRadius: cx(16),
+  },
+  rightItem: {
+    paddingHorizontal: cx(12),
+    color: '#000',
+  },
+  switchButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: cx(10),
+  },
+  text: {
+    color: '#000',
+  },
+})
+
+export default TimeScheduleDetailPage