@ledvance/ui-biz-bundle 1.1.69 → 1.1.71

package/src/modules/mood/FantasyMoodEditPage.tsx

@@ -1,582 +1,582 @@
-import Page from '@ledvance/base/src/components/Page'
-import I18n from '@ledvance/base/src/i18n'
-import { useNavigation, useRoute } from '@react-navigation/native'
-import { StackNavigationProp } from '@react-navigation/stack'
-import React, { useCallback, useEffect, useMemo } from 'react'
-import { useReactive } from 'ahooks'
-import { useWorkMode, COLOUR, SCENE } from 'hooks/DeviceDpStateHooks'
-import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils'
-import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
-import res from '@ledvance/base/src/res'
-import { cloneDeep, find, isEqual, maxBy } from 'lodash'
-import { FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import TextField from '@ledvance/base/src/components/TextField'
-import Card from '@ledvance/base/src/components/Card'
-import Spacer from '@ledvance/base/src/components/Spacer'
-import LampAdjustView from '@ledvance/base/src/components/LampAdjustView'
-import { Utils } from 'tuya-panel-kit'
-import LdvSlider from '@ledvance/base/src/components/ldvSlider'
-import { useDeviceId, useFlagMode } from '@ledvance/base/src/models/modules/NativePropsSlice'
-import TextButton from '@ledvance/base/src/components/TextButton'
-import { stringLightSceneMode, stripLightSceneMode, StripSceneUIState, StripNodeInfo, StripLightSceneMode } from '../scene/SceneInfo'
-import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton'
-import { SelectPageParams } from '../select/SelectPage'
-import { showDeleteMoodDialog } from './tools'
-import { ui_biz_routerKey } from '../../navigation/Routers'
-import { FantasyMoodPageProps } from './FantasyMood'
-import Segmented from '@ledvance/base/src/components/Segmented'
-import { saveFantasyScene, useFantasyScene } from '../scene/SceneAction'
-import { saveFlagMode } from 'modules/flags/FlagActions'
-const cx = Utils.RatioUtils.convertX
-
-interface FantasyMoodEditPageState {
-  headline: string
-  mood: StripSceneUIState
-  currentNode: StripNodeInfo
-  paintBucketSelected: boolean
-  sceneMode: StripLightSceneMode
-}
-
-export interface FantasyMoodEditParams {
-  mode: 'add' | 'edit'
-  currentMood: StripSceneUIState
-  moods: StripSceneUIState[]
-  onSave: () => void
-  moduleParams: FantasyMoodPageProps
-}
-const FantasyMoodEditPage = () => {
-  const navigation = useNavigation<StackNavigationProp<any>>()
-  const routeParams = useRoute().params as FantasyMoodEditParams
-  const params = cloneDeep(routeParams)
-  const moduleParams = params.moduleParams
-  const deviceId = useDeviceId()
-  const [workMode, setWorkMode] = useWorkMode(moduleParams.workModeDpCode)
-  const [flagMode, setFlagMode] = useFlagMode()
-  const [fantasyId, setFantasyScene] = useFantasyScene(params.moduleParams.sceneDpCode, params.moduleParams.workModeDpCode, params.moduleParams.switchLedDpCode, moduleParams.isStringLight)
-  const state = useReactive<FantasyMoodEditPageState>({
-    headline: '',
-    mood: params.currentMood,
-    currentNode: params.currentMood.nodes[params.currentMood.nodes.length - 1],
-    paintBucketSelected: false,
-    sceneMode: params.moduleParams.isStringLight ? stringLightSceneMode : stripLightSceneMode
-  })
-
-  useEffect(() => {
-    state.headline = I18n.getLang(params.mode === 'add' ? 'add_new_dynamic_mood_headline_text' : 'edit_static_mood_headline_text')
-  }, [params.mode])
-
-  const getColorBlockColor = useCallback(() => {
-    const s = Math.round(mapFloatToRange(state.currentNode.s / 100, 30, 100))
-    if (state.currentNode.isColorNode) {
-      return hsv2Hex(state.currentNode.h, s, 100)
-    }
-    if (moduleParams.isSupportTemperature) {
-      return cctToColor(state.currentNode.colorTemp.toFixed())
-    }
-  }, [state.currentNode, state.currentNode.colorTemp])
-  const getNodeColor = useCallback((node: StripNodeInfo) => {
-    if (node.isColorNode) {
-      const s = Math.round(mapFloatToRange(node.s / 100, 30, 100))
-      return hsv2Hex(node.h, s, 100)
-    }
-    return cctToColor(node.colorTemp.toFixed())
-  }, [])
-
-  const onPost = useCallback(async (isDelete: boolean) => {
-    const maxModeObject = maxBy(params.moods, 'id');
-    const currentMood = {
-      ...state.mood,
-      nodes: state.mood.nodes.map(node => {
-        if (node.isColorNode) {
-          node.brightness = 0;
-          node.colorTemp = 0;
-        } else {
-          node.h = 0
-          node.s = 0
-          node.v = 0
-        }
-        return node
-      }),
-      id: params.mode === 'add' ? maxModeObject && maxModeObject.id > 200 ? maxModeObject.id + 1 : 201 : state.mood.id
-    }
-
-    const list = params.mode === 'add' ? [currentMood,...params.moods] :
-      isDelete ? params.moods.filter(mood => mood.id !== currentMood.id) :
-        params.moods.map(mood => {
-          return mood.id === currentMood.id ? currentMood : mood
-        })
-    const saveRes = await saveFantasyScene(deviceId, params.moduleParams.featureId, list, moduleParams.isStringLight)
-    if (saveRes.success) {
-      if(flagMode?.flagMode){
-        saveFlagMode(deviceId, JSON.stringify({
-          flagMode: false,
-          flagId: undefined
-        })).then()
-        setFlagMode({
-          flagMode: false,
-          flagId: undefined
-        })
-      }
-      if (list.length > 0) {
-        if (isDelete && workMode === SCENE) {
-          if(currentMood.id === fantasyId) {
-            await setFantasyScene(list[0])
-          }
-        } else if(!isDelete){
-          await setFantasyScene(currentMood)
-        }
-      } else {
-        await setWorkMode(COLOUR)
-      }
-    }
-    navigation.navigate(ui_biz_routerKey.ui_biz_fantasy_mood)
-    routeParams.onSave()
-  }, [params.moods])
-
-  const onPreview = async () => {
-    const maxModeObject = maxBy(params.moods, 'id');
-    const currentMood = {
-      ...state.mood,
-      nodes: state.mood.nodes.map(node => {
-        if (node.isColorNode) {
-          node.brightness = 0;
-          node.colorTemp = 0;
-        } else {
-          node.h = 0
-          node.s = 0
-          node.v = 0
-        }
-        return node
-      }),
-      id: params.mode === 'add' ? maxModeObject && maxModeObject.id > 200 ? maxModeObject.id + 1 : 201 : state.mood.id
-    }
-
-    await setFantasyScene(currentMood)
-  }
-
-  const createSelectModeData = useCallback(() => {
-    return Object.values(state.sceneMode).map(scene => {
-      return {
-        text: scene.title,
-        selected: scene.mode === state.mood.mode,
-        value: scene.mode,
-      }
-    })
-  }, [state.mood.mode, state.sceneMode])
-
-  const createSelectOtherData = useCallback((otherData) =>{
-    return otherData.map(other =>{
-      return {
-        text: other.label,
-        selected: other.value === state.mood.expand,
-        value: other.value,
-      }
-    })
-  }, [state.mood.expand])
-
-  const getSelectOther = useCallback((otherData) =>{
-    const currentOther = otherData.find(other => other.value === state.mood.expand)
-    return currentOther.label
-  }, [state.mood.expand])
-
-  const nameRepeat = useMemo(() => {
-    return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name))
-  }, [state.mood.name])
-
-  const checkMoodChanged = useMemo(() =>{
-    return isEqual(state.mood, params.currentMood)
-  }, [JSON.stringify(state.mood), params.currentMood])
-
-  const canSaveMoodData = useMemo(() =>{
-    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodChanged)
-  }, [nameRepeat, state.mood.name, checkMoodChanged, params.mode])
-
-  return (
-    <Page
-      backText={I18n.getLang('mesh_device_detail_mode')}
-      showBackDialog={!checkMoodChanged}
-      backDialogTitle={
-        I18n.getLang(params.mode === 'add' ?
-          'string_light_pp_dialog_sm_add_headline_c' :
-          'manage_user_unsaved_changes_dialog_headline')
-      }
-      backDialogContent={
-        I18n.getLang(params.mode === 'add' ?
-          'strip_light_static_mood_add_step_2_dialog_text' :
-          'strip_light_static_mood_editor_step_2_dialog_text')
-      }
-      headlineText={state.headline}
-      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
-      rightButtonIconClick={async () => {
-        if (!canSaveMoodData) {
-          return
-        }
-        await onPost(false)
-      }}>
-      <ScrollView
-        style={{ flex: 1 }}
-        nestedScrollEnabled={true}>
-        <View style={styles.root}>
-          <TextField
-            style={styles.name}
-            value={state.mood.name}
-            placeholder={I18n.getLang('edit_static_mood_inputfield_topic_text')}
-            onChangeText={text => {
-              state.mood.name = text
-            }}
-            showError={state.mood.name.length > 32 || nameRepeat}
-            maxLength={33}
-            tipColor={nameRepeat ? '#f00' : undefined}
-            tipIcon={nameRepeat ? res.ic_text_field_input_error : undefined}
-            errorText={I18n.getLang(nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text')} />
-          <Card style={styles.adjustCard}>
-            <Spacer height={cx(16)} />
-            <View style={styles.lightPreviewLine}>
-              <Text style={styles.light}>
-                {I18n.getLang('light_sources_tile_tw_lighting_headline')}
-              </Text>
-              <TextButton text={I18n.getLang('mood_preview')} onPress={onPreview} />
-            </View>
-            <Spacer height={cx(18)} />
-            <TextFieldStyleButton
-              style={styles.transitionMode}
-              text={state.sceneMode[state.mood.mode]?.title}
-              placeholder={I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline')}
-              onPress={() => {
-                const paramsSelect: SelectPageParams<number> = {
-                  title: I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline'),
-                  data: createSelectModeData(),
-                  onSelect: selectPageData => {
-                    state.mood.mode = selectPageData.value
-                  },
-                }
-                navigation.navigate(ui_biz_routerKey.ui_biz_select_page, paramsSelect)
-              }} />
-            <Spacer height={cx(10)} />
-            <LdvSlider
-              title={I18n.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
-              value={state.mood.speed}
-              onValueChange={() => { }}
-              onSlidingComplete={value => {
-                state.mood.speed = value
-              }} />
-            <Spacer height={cx(16)} />
-            {state.sceneMode[state.mood.mode]?.turnOn && <View style={styles.transitionMode}>
-              <Segmented
-                value={state.mood.direction}
-                options={[
-                  {
-                    label: I18n.getLang('add_new_dynamic_mood_strip_lights_switch_tab_text1'),
-                    value: 0
-                  },
-                  {
-                    label: I18n.getLang('add_new_dynamic_mood_strip_lights_switch_tab_text2'),
-                    value: 1
-                  },
-                ]}
-                onChange={(v) => state.mood.direction = Number(v)}
-              />
-              <Spacer />
-            </View>}
-            {state.sceneMode[state.mood.mode]?.paragraph && <View style={styles.transitionMode}>
-              <Segmented
-                value={state.mood.segmented}
-                options={[
-                  {
-                    label: I18n.getLang('add_new_dynamic_mood_strip_lights_switch_tab_text3'),
-                    value: 0
-                  },
-                  {
-                    label: I18n.getLang('add_new_dynamic_mood_strip_lights_switch_tab_text4'),
-                    value: 1
-                  },
-                ]}
-                onChange={(v) => state.mood.segmented = Number(v)}
-              />
-              <Spacer />
-            </View>}
-            {state.sceneMode[state.mood.mode]?.other && <>
-              <TextFieldStyleButton
-                style={styles.transitionMode}
-                text={getSelectOther(state.sceneMode[state.mood.mode]?.other)}
-                placeholder={I18n.getLang('add_new_dynamic_mood_strip_lights_selectionfield2_topic_text')}
-                onPress={() => {
-                  const paramsSelect: SelectPageParams<number> = {
-                    title: I18n.getLang('add_new_dynamic_mood_strip_lights_selectionfield2_topic_text'),
-                    data: createSelectOtherData(state.sceneMode[state.mood.mode]?.other),
-                    onSelect: selectPageData => {
-                      state.mood.expand = selectPageData.value
-                    },
-                  }
-                  navigation.navigate(ui_biz_routerKey.ui_biz_select_page, paramsSelect)
-                }} />
-              <Spacer />
-            </>}
-            <View style={styles.nodesAdjust}>
-              <View style={styles.adjustButtons}>
-                <TouchableOpacity
-                  onPress={() => {
-                    state.paintBucketSelected = true
-                  }}>
-                  <Image
-                    style={[styles.adjustButton, { tintColor: state.paintBucketSelected ? '#f60' : '#666' }]}
-                    source={res.ic_paint_bucket} />
-                </TouchableOpacity>
-                <TouchableOpacity
-                  onPress={() => {
-                    state.paintBucketSelected = false
-                  }}>
-                  <Image
-                    style={[styles.adjustButton, { tintColor: state.paintBucketSelected ? '#666' : '#f60' }]}
-                    source={res.ic_colorize} />
-                </TouchableOpacity>
-              </View>
-              <FlatList
-                data={state.mood.nodes}
-                style={styles.nodeList}
-                renderItem={({ item, index }) => {
-                  return (
-                    <View style={styles.nodeItem}>
-                      <TouchableOpacity
-                        style={[
-                          styles.nodeBlock,
-                          {
-                            backgroundColor: getNodeColor(item),
-                          },
-                        ]}
-                        onPress={() => {
-                          state.currentNode = item
-                        }} />
-                      <TouchableOpacity
-                        style={styles.nodeDeleteBtn}
-                        disabled={state.mood.nodes.length < 3}
-                        onPress={() => {
-                          state.mood.nodes.splice(index, 1)
-                          state.currentNode = state.mood.nodes[state.mood.nodes.length - 1]
-                        }}>
-                        <Image
-                          style={[
-                            styles.nodeDeleteIcon,
-                            {
-                              tintColor: state.mood.nodes.length < 3 ? '#ccc' : '#666',
-                            },
-                          ]}
-                          source={res.ic_mood_del} />
-                      </TouchableOpacity>
-                    </View>
-                  )
-                }}
-                keyExtractor={(_, index) => `${index}`}
-                ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
-                ListFooterComponent={() => {
-                  if (state.mood.nodes.length >= 8) {
-                    return (<></>)
-                  }
-                  return (
-                    <View>
-                      <Spacer height={cx(12)} />
-                      <TouchableOpacity
-                        style={styles.nodeAddBtn}
-                        onPress={() => {
-                          const node = {
-                            ...state.currentNode,
-                          }
-                          state.mood.nodes.push(node)
-                          state.currentNode = node
-                        }}>
-                        <Image
-                          style={{
-                            width: cx(18),
-                            height: cx(18),
-                            tintColor: '#000',
-                          }}
-                          source={{ uri: res.add }} />
-                      </TouchableOpacity>
-                    </View>
-                  )
-                }} />
-            </View>
-            <Spacer />
-            <View style={styles.lightLine}>
-              <Text style={styles.light}>
-                {I18n.getLang('add_new_dynamic_mood_lights_field_headline2_text')}
-              </Text>
-              <View style={[styles.preview, { backgroundColor: getColorBlockColor() }]} />
-            </View>
-            <Spacer />
-            <LampAdjustView
-              isSupportColor={moduleParams.isSupportColor}
-              isSupportBrightness={!moduleParams.isStripLight && moduleParams.isSupportBrightness}
-              isSupportTemperature={!moduleParams.isStripLight && moduleParams.isSupportTemperature}
-              isColorMode={state.currentNode.isColorNode}
-              reserveSV={true}
-              setIsColorMode={isColorMode => {
-                if (state.paintBucketSelected) {
-                  state.mood.nodes.forEach(node => {
-                    node.isColorNode = isColorMode
-                  })
-                } else {
-                  state.currentNode.isColorNode = isColorMode
-                }
-              }}
-              h={state.currentNode.h}
-              s={state.currentNode.s}
-              v={state.currentNode.v}
-              onHSVChange={() => {}}
-              onHSVChangeComplete={(h, s, v) => {
-                if (state.paintBucketSelected) {
-                  state.mood.nodes.forEach(node => {
-                    node.isColorNode = true
-                    node.h = h
-                    node.s = s
-                    node.v = v
-                  })
-                } else {
-                  state.currentNode.h = h
-                  state.currentNode.s = s
-                  state.currentNode.v = v
-                }
-              }}
-              colorTemp={state.currentNode.colorTemp}
-              brightness={state.currentNode.brightness}
-              onCCTChange={() => {}}
-              onCCTChangeComplete={cct => {
-                if (state.paintBucketSelected) {
-                  state.mood.nodes.forEach(node => {
-                    node.isColorNode = false
-                    node.colorTemp = cct
-                  })
-                } else {
-                  state.currentNode.colorTemp = cct
-                }
-              }}
-              onBrightnessChange={() => {}}
-              onBrightnessChangeComplete={brightness => {
-                if (state.paintBucketSelected) {
-                  state.mood.nodes.forEach(node => {
-                    node.isColorNode = false
-                    node.brightness = brightness
-                  })
-                } else {
-                  state.currentNode.brightness = brightness
-                }
-              }} />
-          </Card>
-          <Spacer />
-          {params.mode === 'edit' &&
-            <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
-              <TextButton
-                style={styles.deleteBtn}
-                textStyle={styles.deleteBtnText}
-                text={I18n.getLang('edit_static_mood_button_delete_text')}
-                onPress={() => {
-                  showDeleteMoodDialog(async (_, { close }) => {
-                    close()
-                    await onPost(true)
-                  })
-                }} />
-            </View>}
-          <Spacer />
-        </View>
-      </ScrollView>
-    </Page>
-  )
-}
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-  name: {
-    marginHorizontal: cx(24),
-  },
-  adjustCard: {
-    marginVertical: cx(12),
-    marginHorizontal: cx(24),
-  },
-  fanAdjustCard: {
-    marginHorizontal: cx(24),
-  },
-  lightLine: {
-    flexDirection: 'row',
-    marginHorizontal: cx(16)
-  },
-  lightPreviewLine: {
-    flexDirection: 'row',
-    marginHorizontal: cx(16),
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  light: {
-    color: '#000',
-    fontSize: cx(18),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  transitionMode: {
-    marginHorizontal: cx(16),
-  },
-  preview: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  nodesAdjust: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  adjustButtons: {
-    width: cx(44),
-    marginStart: cx(16),
-  },
-  adjustButton: {
-    width: cx(44),
-    height: cx(44),
-  },
-  nodeList: {
-    flex: 1,
-    marginHorizontal: cx(16),
-  },
-  nodeItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  nodeBlock: {
-    flex: 1,
-    height: cx(40),
-    borderRadius: cx(8),
-  },
-  nodeDeleteBtn: {
-    width: cx(24),
-    height: cx(30),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  nodeDeleteIcon: {
-    width: cx(16),
-    height: cx(16),
-  },
-  nodeAddBtn: {
-    height: cx(40),
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginEnd: cx(26),
-    borderRadius: cx(8),
-    borderWidth: cx(1),
-    borderStyle: 'dashed',
-    borderColor: '#666',
-    backgroundColor: '#f6f6f6',
-  },
-  deleteBtn: {
-    width: '100%',
-    height: cx(50),
-    backgroundColor: '#666',
-    borderRadius: cx(8),
-  },
-  deleteBtnText: {
-    color: '#fff',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-})
-export default FantasyMoodEditPage
+import Page from '@ledvance/base/src/components/Page'
+import I18n from '@ledvance/base/src/i18n'
+import { useNavigation, useRoute } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { useReactive } from 'ahooks'
+import { useWorkMode, COLOUR, SCENE } from 'hooks/DeviceDpStateHooks'
+import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+import res from '@ledvance/base/src/res'
+import { cloneDeep, find, isEqual, maxBy } from 'lodash'
+import { FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import TextField from '@ledvance/base/src/components/TextField'
+import Card from '@ledvance/base/src/components/Card'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import LampAdjustView from '@ledvance/base/src/components/LampAdjustView'
+import { Utils } from 'tuya-panel-kit'
+import LdvSlider from '@ledvance/base/src/components/ldvSlider'
+import { useDeviceId, useFlagMode } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import TextButton from '@ledvance/base/src/components/TextButton'
+import { stringLightSceneMode, stripLightSceneMode, StripSceneUIState, StripNodeInfo, StripLightSceneMode } from '../scene/SceneInfo'
+import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton'
+import { SelectPageParams } from '../select/SelectPage'
+import { showDeleteMoodDialog } from './tools'
+import { ui_biz_routerKey } from '../../navigation/Routers'
+import { FantasyMoodPageProps } from './FantasyMood'
+import Segmented from '@ledvance/base/src/components/Segmented'
+import { saveFantasyScene, useFantasyScene } from '../scene/SceneAction'
+import { saveFlagMode } from 'modules/flags/FlagActions'
+const cx = Utils.RatioUtils.convertX
+
+interface FantasyMoodEditPageState {
+  headline: string
+  mood: StripSceneUIState
+  currentNode: StripNodeInfo
+  paintBucketSelected: boolean
+  sceneMode: StripLightSceneMode
+}
+
+export interface FantasyMoodEditParams {
+  mode: 'add' | 'edit'
+  currentMood: StripSceneUIState
+  moods: StripSceneUIState[]
+  onSave: () => void
+  moduleParams: FantasyMoodPageProps
+}
+const FantasyMoodEditPage = () => {
+  const navigation = useNavigation<StackNavigationProp<any>>()
+  const routeParams = useRoute().params as FantasyMoodEditParams
+  const params = cloneDeep(routeParams)
+  const moduleParams = params.moduleParams
+  const deviceId = useDeviceId()
+  const [workMode, setWorkMode] = useWorkMode(moduleParams.workModeDpCode)
+  const [flagMode, setFlagMode] = useFlagMode()
+  const [fantasyId, setFantasyScene] = useFantasyScene(params.moduleParams.sceneDpCode, params.moduleParams.workModeDpCode, params.moduleParams.switchLedDpCode, moduleParams.isStringLight)
+  const state = useReactive<FantasyMoodEditPageState>({
+    headline: '',
+    mood: params.currentMood,
+    currentNode: params.currentMood.nodes[params.currentMood.nodes.length - 1],
+    paintBucketSelected: false,
+    sceneMode: params.moduleParams.isStringLight ? stringLightSceneMode : stripLightSceneMode
+  })
+
+  useEffect(() => {
+    state.headline = I18n.getLang(params.mode === 'add' ? 'add_new_dynamic_mood_headline_text' : 'edit_static_mood_headline_text')
+  }, [params.mode])
+
+  const getColorBlockColor = useCallback(() => {
+    const s = Math.round(mapFloatToRange(state.currentNode.s / 100, 30, 100))
+    if (state.currentNode.isColorNode) {
+      return hsv2Hex(state.currentNode.h, s, 100)
+    }
+    if (moduleParams.isSupportTemperature) {
+      return cctToColor(state.currentNode.colorTemp.toFixed())
+    }
+  }, [state.currentNode, state.currentNode.colorTemp])
+  const getNodeColor = useCallback((node: StripNodeInfo) => {
+    if (node.isColorNode) {
+      const s = Math.round(mapFloatToRange(node.s / 100, 30, 100))
+      return hsv2Hex(node.h, s, 100)
+    }
+    return cctToColor(node.colorTemp.toFixed())
+  }, [])
+
+  const onPost = useCallback(async (isDelete: boolean) => {
+    const maxModeObject = maxBy(params.moods, 'id');
+    const currentMood = {
+      ...state.mood,
+      nodes: state.mood.nodes.map(node => {
+        if (node.isColorNode) {
+          node.brightness = 0;
+          node.colorTemp = 0;
+        } else {
+          node.h = 0
+          node.s = 0
+          node.v = 0
+        }
+        return node
+      }),
+      id: params.mode === 'add' ? maxModeObject && maxModeObject.id > 200 ? maxModeObject.id + 1 : 201 : state.mood.id
+    }
+
+    const list = params.mode === 'add' ? [currentMood,...params.moods] :
+      isDelete ? params.moods.filter(mood => mood.id !== currentMood.id) :
+        params.moods.map(mood => {
+          return mood.id === currentMood.id ? currentMood : mood
+        })
+    const saveRes = await saveFantasyScene(deviceId, params.moduleParams.featureId, list, moduleParams.isStringLight)
+    if (saveRes.success) {
+      if(flagMode?.flagMode){
+        saveFlagMode(deviceId, JSON.stringify({
+          flagMode: false,
+          flagId: undefined
+        })).then()
+        setFlagMode({
+          flagMode: false,
+          flagId: undefined
+        })
+      }
+      if (list.length > 0) {
+        if (isDelete && workMode === SCENE) {
+          if(currentMood.id === fantasyId) {
+            await setFantasyScene(list[0])
+          }
+        } else if(!isDelete){
+          await setFantasyScene(currentMood)
+        }
+      } else {
+        await setWorkMode(COLOUR)
+      }
+    }
+    navigation.navigate(ui_biz_routerKey.ui_biz_fantasy_mood)
+    routeParams.onSave()
+  }, [params.moods])
+
+  const onPreview = async () => {
+    const maxModeObject = maxBy(params.moods, 'id');
+    const currentMood = {
+      ...state.mood,
+      nodes: state.mood.nodes.map(node => {
+        if (node.isColorNode) {
+          node.brightness = 0;
+          node.colorTemp = 0;
+        } else {
+          node.h = 0
+          node.s = 0
+          node.v = 0
+        }
+        return node
+      }),
+      id: params.mode === 'add' ? maxModeObject && maxModeObject.id > 200 ? maxModeObject.id + 1 : 201 : state.mood.id
+    }
+
+    await setFantasyScene(currentMood)
+  }
+
+  const createSelectModeData = useCallback(() => {
+    return Object.values(state.sceneMode).map(scene => {
+      return {
+        text: scene.title,
+        selected: scene.mode === state.mood.mode,
+        value: scene.mode,
+      }
+    })
+  }, [state.mood.mode, state.sceneMode])
+
+  const createSelectOtherData = useCallback((otherData) =>{
+    return otherData.map(other =>{
+      return {
+        text: other.label,
+        selected: other.value === state.mood.expand,
+        value: other.value,
+      }
+    })
+  }, [state.mood.expand])
+
+  const getSelectOther = useCallback((otherData) =>{
+    const currentOther = otherData.find(other => other.value === state.mood.expand)
+    return currentOther.label
+  }, [state.mood.expand])
+
+  const nameRepeat = useMemo(() => {
+    return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name))
+  }, [state.mood.name])
+
+  const checkMoodChanged = useMemo(() =>{
+    return isEqual(state.mood, params.currentMood)
+  }, [JSON.stringify(state.mood), params.currentMood])
+
+  const canSaveMoodData = useMemo(() =>{
+    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodChanged)
+  }, [nameRepeat, state.mood.name, checkMoodChanged, params.mode])
+
+  return (
+    <Page
+      backText={I18n.getLang('mesh_device_detail_mode')}
+      showBackDialog={!checkMoodChanged}
+      backDialogTitle={
+        I18n.getLang(params.mode === 'add' ?
+          'string_light_pp_dialog_sm_add_headline_c' :
+          'manage_user_unsaved_changes_dialog_headline')
+      }
+      backDialogContent={
+        I18n.getLang(params.mode === 'add' ?
+          'strip_light_static_mood_add_step_2_dialog_text' :
+          'strip_light_static_mood_editor_step_2_dialog_text')
+      }
+      headlineText={state.headline}
+      rightButtonIcon={canSaveMoodData ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={async () => {
+        if (!canSaveMoodData) {
+          return
+        }
+        await onPost(false)
+      }}>
+      <ScrollView
+        style={{ flex: 1 }}
+        nestedScrollEnabled={true}>
+        <View style={styles.root}>
+          <TextField
+            style={styles.name}
+            value={state.mood.name}
+            placeholder={I18n.getLang('edit_static_mood_inputfield_topic_text')}
+            onChangeText={text => {
+              state.mood.name = text
+            }}
+            showError={state.mood.name.length > 32 || nameRepeat}
+            maxLength={33}
+            tipColor={nameRepeat ? '#f00' : undefined}
+            tipIcon={nameRepeat ? res.ic_text_field_input_error : undefined}
+            errorText={I18n.getLang(nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text')} />
+          <Card style={styles.adjustCard}>
+            <Spacer height={cx(16)} />
+            <View style={styles.lightPreviewLine}>
+              <Text style={styles.light}>
+                {I18n.getLang('light_sources_tile_tw_lighting_headline')}
+              </Text>
+              <TextButton text={I18n.getLang('mood_preview')} onPress={onPreview} />
+            </View>
+            <Spacer height={cx(18)} />
+            <TextFieldStyleButton
+              style={styles.transitionMode}
+              text={state.sceneMode[state.mood.mode]?.title}
+              placeholder={I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline')}
+              onPress={() => {
+                const paramsSelect: SelectPageParams<number> = {
+                  title: I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline'),
+                  data: createSelectModeData(),
+                  onSelect: selectPageData => {
+                    state.mood.mode = selectPageData.value
+                  },
+                }
+                navigation.navigate(ui_biz_routerKey.ui_biz_select_page, paramsSelect)
+              }} />
+            <Spacer height={cx(10)} />
+            <LdvSlider
+              title={I18n.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
+              value={state.mood.speed}
+              onValueChange={() => { }}
+              onSlidingComplete={value => {
+                state.mood.speed = value
+              }} />
+            <Spacer height={cx(16)} />
+            {state.sceneMode[state.mood.mode]?.turnOn && <View style={styles.transitionMode}>
+              <Segmented
+                value={state.mood.direction}
+                options={[
+                  {
+                    label: I18n.getLang('add_new_dynamic_mood_strip_lights_switch_tab_text1'),
+                    value: 0
+                  },
+                  {
+                    label: I18n.getLang('add_new_dynamic_mood_strip_lights_switch_tab_text2'),
+                    value: 1
+                  },
+                ]}
+                onChange={(v) => state.mood.direction = Number(v)}
+              />
+              <Spacer />
+            </View>}
+            {state.sceneMode[state.mood.mode]?.paragraph && <View style={styles.transitionMode}>
+              <Segmented
+                value={state.mood.segmented}
+                options={[
+                  {
+                    label: I18n.getLang('add_new_dynamic_mood_strip_lights_switch_tab_text3'),
+                    value: 0
+                  },
+                  {
+                    label: I18n.getLang('add_new_dynamic_mood_strip_lights_switch_tab_text4'),
+                    value: 1
+                  },
+                ]}
+                onChange={(v) => state.mood.segmented = Number(v)}
+              />
+              <Spacer />
+            </View>}
+            {state.sceneMode[state.mood.mode]?.other && <>
+              <TextFieldStyleButton
+                style={styles.transitionMode}
+                text={getSelectOther(state.sceneMode[state.mood.mode]?.other)}
+                placeholder={I18n.getLang('add_new_dynamic_mood_strip_lights_selectionfield2_topic_text')}
+                onPress={() => {
+                  const paramsSelect: SelectPageParams<number> = {
+                    title: I18n.getLang('add_new_dynamic_mood_strip_lights_selectionfield2_topic_text'),
+                    data: createSelectOtherData(state.sceneMode[state.mood.mode]?.other),
+                    onSelect: selectPageData => {
+                      state.mood.expand = selectPageData.value
+                    },
+                  }
+                  navigation.navigate(ui_biz_routerKey.ui_biz_select_page, paramsSelect)
+                }} />
+              <Spacer />
+            </>}
+            <View style={styles.nodesAdjust}>
+              <View style={styles.adjustButtons}>
+                <TouchableOpacity
+                  onPress={() => {
+                    state.paintBucketSelected = true
+                  }}>
+                  <Image
+                    style={[styles.adjustButton, { tintColor: state.paintBucketSelected ? '#f60' : '#666' }]}
+                    source={res.ic_paint_bucket} />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={() => {
+                    state.paintBucketSelected = false
+                  }}>
+                  <Image
+                    style={[styles.adjustButton, { tintColor: state.paintBucketSelected ? '#666' : '#f60' }]}
+                    source={res.ic_colorize} />
+                </TouchableOpacity>
+              </View>
+              <FlatList
+                data={state.mood.nodes}
+                style={styles.nodeList}
+                renderItem={({ item, index }) => {
+                  return (
+                    <View style={styles.nodeItem}>
+                      <TouchableOpacity
+                        style={[
+                          styles.nodeBlock,
+                          {
+                            backgroundColor: getNodeColor(item),
+                          },
+                        ]}
+                        onPress={() => {
+                          state.currentNode = item
+                        }} />
+                      <TouchableOpacity
+                        style={styles.nodeDeleteBtn}
+                        disabled={state.mood.nodes.length < 3}
+                        onPress={() => {
+                          state.mood.nodes.splice(index, 1)
+                          state.currentNode = state.mood.nodes[state.mood.nodes.length - 1]
+                        }}>
+                        <Image
+                          style={[
+                            styles.nodeDeleteIcon,
+                            {
+                              tintColor: state.mood.nodes.length < 3 ? '#ccc' : '#666',
+                            },
+                          ]}
+                          source={res.ic_mood_del} />
+                      </TouchableOpacity>
+                    </View>
+                  )
+                }}
+                keyExtractor={(_, index) => `${index}`}
+                ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
+                ListFooterComponent={() => {
+                  if (state.mood.nodes.length >= 8) {
+                    return (<></>)
+                  }
+                  return (
+                    <View>
+                      <Spacer height={cx(12)} />
+                      <TouchableOpacity
+                        style={styles.nodeAddBtn}
+                        onPress={() => {
+                          const node = {
+                            ...state.currentNode,
+                          }
+                          state.mood.nodes.push(node)
+                          state.currentNode = node
+                        }}>
+                        <Image
+                          style={{
+                            width: cx(18),
+                            height: cx(18),
+                            tintColor: '#000',
+                          }}
+                          source={{ uri: res.add }} />
+                      </TouchableOpacity>
+                    </View>
+                  )
+                }} />
+            </View>
+            <Spacer />
+            <View style={styles.lightLine}>
+              <Text style={styles.light}>
+                {I18n.getLang('add_new_dynamic_mood_lights_field_headline2_text')}
+              </Text>
+              <View style={[styles.preview, { backgroundColor: getColorBlockColor() }]} />
+            </View>
+            <Spacer />
+            <LampAdjustView
+              isSupportColor={moduleParams.isSupportColor}
+              isSupportBrightness={!moduleParams.isStripLight && moduleParams.isSupportBrightness}
+              isSupportTemperature={!moduleParams.isStripLight && moduleParams.isSupportTemperature}
+              isColorMode={state.currentNode.isColorNode}
+              reserveSV={true}
+              setIsColorMode={isColorMode => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = isColorMode
+                  })
+                } else {
+                  state.currentNode.isColorNode = isColorMode
+                }
+              }}
+              h={state.currentNode.h}
+              s={state.currentNode.s}
+              v={state.currentNode.v}
+              onHSVChange={() => {}}
+              onHSVChangeComplete={(h, s, v) => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = true
+                    node.h = h
+                    node.s = s
+                    node.v = v
+                  })
+                } else {
+                  state.currentNode.h = h
+                  state.currentNode.s = s
+                  state.currentNode.v = v
+                }
+              }}
+              colorTemp={state.currentNode.colorTemp}
+              brightness={state.currentNode.brightness}
+              onCCTChange={() => {}}
+              onCCTChangeComplete={cct => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = false
+                    node.colorTemp = cct
+                  })
+                } else {
+                  state.currentNode.colorTemp = cct
+                }
+              }}
+              onBrightnessChange={() => {}}
+              onBrightnessChangeComplete={brightness => {
+                if (state.paintBucketSelected) {
+                  state.mood.nodes.forEach(node => {
+                    node.isColorNode = false
+                    node.brightness = brightness
+                  })
+                } else {
+                  state.currentNode.brightness = brightness
+                }
+              }} />
+          </Card>
+          <Spacer />
+          {params.mode === 'edit' &&
+            <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
+              <TextButton
+                style={styles.deleteBtn}
+                textStyle={styles.deleteBtnText}
+                text={I18n.getLang('edit_static_mood_button_delete_text')}
+                onPress={() => {
+                  showDeleteMoodDialog(async (_, { close }) => {
+                    close()
+                    await onPost(true)
+                  })
+                }} />
+            </View>}
+          <Spacer />
+        </View>
+      </ScrollView>
+    </Page>
+  )
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  name: {
+    marginHorizontal: cx(24),
+  },
+  adjustCard: {
+    marginVertical: cx(12),
+    marginHorizontal: cx(24),
+  },
+  fanAdjustCard: {
+    marginHorizontal: cx(24),
+  },
+  lightLine: {
+    flexDirection: 'row',
+    marginHorizontal: cx(16)
+  },
+  lightPreviewLine: {
+    flexDirection: 'row',
+    marginHorizontal: cx(16),
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  light: {
+    color: '#000',
+    fontSize: cx(18),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  transitionMode: {
+    marginHorizontal: cx(16),
+  },
+  preview: {
+    width: cx(20),
+    height: cx(20),
+    marginStart: cx(12),
+    borderRadius: cx(4),
+  },
+  nodesAdjust: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  adjustButtons: {
+    width: cx(44),
+    marginStart: cx(16),
+  },
+  adjustButton: {
+    width: cx(44),
+    height: cx(44),
+  },
+  nodeList: {
+    flex: 1,
+    marginHorizontal: cx(16),
+  },
+  nodeItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  nodeBlock: {
+    flex: 1,
+    height: cx(40),
+    borderRadius: cx(8),
+  },
+  nodeDeleteBtn: {
+    width: cx(24),
+    height: cx(30),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  nodeDeleteIcon: {
+    width: cx(16),
+    height: cx(16),
+  },
+  nodeAddBtn: {
+    height: cx(40),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginEnd: cx(26),
+    borderRadius: cx(8),
+    borderWidth: cx(1),
+    borderStyle: 'dashed',
+    borderColor: '#666',
+    backgroundColor: '#f6f6f6',
+  },
+  deleteBtn: {
+    width: '100%',
+    height: cx(50),
+    backgroundColor: '#666',
+    borderRadius: cx(8),
+  },
+  deleteBtnText: {
+    color: '#fff',
+    fontSize: cx(16),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+})
+export default FantasyMoodEditPage