@ledvance/ui-biz-bundle 1.1.69 → 1.1.71

package/src/modules/mood/MixMood/MixMoodEditPage.tsx

@@ -1,722 +1,722 @@
-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 { 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 } 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 { Utils } from 'tuya-panel-kit'
-import LdvSlider from '@ledvance/base/src/components/ldvSlider'
-import TextButton from '@ledvance/base/src/components/TextButton'
-import { stripLightSceneMode, StripNodeInfo, SceneNodeInfo, StripLightSceneMode, CeilingLightSceneMode, StripSceneInfo } from '../../scene/SceneInfo'
-import { MixSceneInfo, MixMainLampInfo, MixSceneNodeInfo } from './MixSceneBeans'
-import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton'
-import { SelectPageParams } from '../../select/SelectPage'
-import { ui_biz_routerKey } from '../../../navigation/Routers'
-import { MixMoodPageProps } from '@ledvance/ui-biz-bundle/src/modules/mood/MixMood/MixMoodPage'
-import Segmented from '@ledvance/base/src/components/Segmented'
-import LdvSwitch from '@ledvance/base/src/components/ldvSwitch'
-import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView'
-import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView'
-import { Result } from '@ledvance/base/src/models/modules/Result'
-import { showDialog } from '@ledvance/base/src/utils/common'
-import { defSecondly } from './AddMixMoodPage'
-const cx = Utils.RatioUtils.convertX
-
-interface MixMoodEditPageState {
-  headline: string
-  mood: MixSceneInfo
-  currentColorNodeIdx: number
-  currentWhiteNodeIdx: number
-  paintBucketSelected: boolean
-  paintWhiteBucketSelected: boolean
-  sceneMode: StripLightSceneMode
-  mainLamp: MixMainLampInfo
-  secondlyLamp: StripSceneInfo
-  loading: boolean
-}
-
-export interface MixMoodEditParams {
-  mode: 'add' | 'edit'
-  isStatic: boolean
-  currentMood: MixSceneInfo
-  moods: MixSceneInfo[]
-  modDeleteFlag: (mode: 'add' | 'edit' | 'del', currentMood: MixSceneInfo) => Promise<Result<any>>
-  onSave: () => void
-  moduleParams: MixMoodPageProps
-}
-const RgbcMoodEditPage = () => {
-  const navigation = useNavigation<StackNavigationProp<any>>()
-  const routeParams = useRoute().params as MixMoodEditParams
-  const params = cloneDeep(routeParams)
-  const moduleParams = params.moduleParams
-  const { mainLamp, secondlyLamp } = params.currentMood
-  const state = useReactive<MixMoodEditPageState>({
-    headline: '',
-    mood: params.currentMood,
-    mainLamp,
-    secondlyLamp,
-    currentWhiteNodeIdx: mainLamp.nodes?.length ? mainLamp.nodes.length - 1 : 0,
-    currentColorNodeIdx: secondlyLamp.nodes?.length ? secondlyLamp.nodes?.length - 1 : 0,
-    paintBucketSelected: false,
-    paintWhiteBucketSelected: false,
-    sceneMode: stripLightSceneMode,
-    loading: false
-  })
-
-  useEffect(() => {
-    state.headline = I18n.getLang(params.mode === 'add' ?
-      (params.isStatic ? 'add_new_static_mood_headline_text' : 'add_new_dynamic_mood_headline_text') :
-      (params.isStatic ? 'edit_static_mood_headline_text' : 'edit_static_mood_headline_text'))
-  }, [params.mode, params.isStatic])
-
-  const getColorBlockColor = useCallback(() => {
-    if (state.secondlyLamp?.nodes?.length) {
-      const currentNode = state.secondlyLamp?.nodes?.[state.currentColorNodeIdx]
-      const s = Math.round(mapFloatToRange(currentNode.s / 100, 30, 100))
-      if (currentNode.isColorNode) {
-        return hsv2Hex(currentNode.h, s, 100)
-      }
-    }
-    return '#fff'
-  }, [state.currentColorNodeIdx, state.secondlyLamp?.nodes])
-
-  const getNodeColor = useCallback((node: MixSceneNodeInfo, isColorNode) => {
-    if (isColorNode) {
-      return hsv2Hex(node.h, node.s, node.v)
-    } else {
-      return cctToColor(node.colorTemp)
-    }
-  }, [])
-
-  const createSecondlySelectModeData = useCallback(() => {
-    return Object.values(state.sceneMode).map(scene => {
-      return {
-        text: scene.title,
-        selected: scene.mode === state.secondlyLamp.mode,
-        value: scene.mode,
-      }
-    })
-  }, [state.secondlyLamp.mode, state.sceneMode])
-
-  const createMainSelectModeData = useCallback(() => {
-    return Object.values(CeilingLightSceneMode).map(scene => {
-      return {
-        text: scene.title,
-        selected: scene.mode === state.mainLamp.mode,
-        value: scene.mode,
-      }
-    })
-  }, [state.mainLamp.mode])
-
-  const createSelectOtherData = useCallback((otherData) => {
-    return otherData.map(other => {
-      return {
-        text: other.label,
-        selected: other.value === state.secondlyLamp.expand,
-        value: other.value,
-      }
-    })
-  }, [state.secondlyLamp.expand])
-
-  const getSelectOther = useCallback((otherData) => {
-    const currentOther = otherData.find(other => other.value === state.secondlyLamp.expand)
-    return currentOther.label
-  }, [state.secondlyLamp.expand])
-
-  const checkMoodDataChanged = useMemo(() =>{
-    return isEqual({
-      ...state.mood,
-      mainLamp: state.mainLamp,
-      secondlyLamp: state.secondlyLamp
-    }, params.currentMood)
-  }, [params.currentMood, state.mood, state.mainLamp, state.secondlyLamp])
-
-  const nameRepeat = useMemo(() => {
-    return !!find(params.moods, m => ((m.mainLamp.id !== state.mood.mainLamp.id && (params.isStatic ? params.isStatic : m.secondlyLamp.id !== state.mood.secondlyLamp.id)) && m.name === state.mood.name))
-  }, [state.mood.name, params.isStatic])
-
-  const canSaveMoodData = useMemo(() =>{
-    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodDataChanged)
-  }, [nameRepeat, state.mood.name, checkMoodDataChanged, params.mode])
-
-  return (
-    <Page
-      backText={I18n.getLang('mesh_device_detail_mode')}
-      showBackDialog={!checkMoodDataChanged}
-      loading={state.loading}
-      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(state.loading || !canSaveMoodData) return
-        state.loading = true
-        const res = await params.modDeleteFlag(params.mode, {
-          ...state.mood,
-          mainLamp: state.mainLamp,
-          secondlyLamp: params.isStatic ? defSecondly : state.secondlyLamp
-        })
-        state.loading = false
-        if (res.success) {
-          navigation.navigate(ui_biz_routerKey.ui_biz_mix_mood)
-        }
-      }}>
-      <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')} />
-          {params.isStatic ? <Card style={styles.adjustCard}>
-            <LdvSwitch
-              title={I18n.getLang('light_sources_tile_main_lighting_headline')}
-              color="#fff"
-              colorAlpha={1}
-              enable={false}
-              setEnable={() => { }}
-              showSwitch={false}
-            />
-            <ColorTempAdjustView
-              isSupportBrightness={moduleParams.isSupportBrightness}
-              isSupportTemperature={moduleParams.isSupportTemperature}
-              colorTemp={state.mainLamp.nodes[state.currentWhiteNodeIdx].colorTemp}
-              brightness={state.mainLamp.nodes[state.currentWhiteNodeIdx].brightness}
-              onBrightnessChangeComplete={(bright) => {
-                state.mainLamp.nodes.forEach(node => {
-                  node.brightness = bright
-                })
-              }}
-              onCCTChangeComplete={(cct) => {
-                state.mainLamp.nodes.forEach(node => {
-                  node.colorTemp = cct
-                })
-              }}
-            />
-            <Spacer height={cx(16)}/>
-          </Card> :
-            <>
-              <Card style={styles.adjustCard}>
-                <LdvSwitch
-                  title={I18n.getLang('light_sources_tile_main_lighting_headline')}
-                  color="#fff"
-                  colorAlpha={1}
-                  enable={false}
-                  setEnable={() => { }}
-                  showSwitch={false}
-                />
-                <TextFieldStyleButton
-                  style={styles.transitionMode}
-                  text={CeilingLightSceneMode[state.mainLamp.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: createMainSelectModeData(),
-                      onSelect: selectPageData => {
-                        state.mainLamp.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.mainLamp.speed}
-                  onValueChange={() => { }}
-                  onSlidingComplete={value => {
-                    state.mainLamp.speed = value
-                  }} />
-                <Spacer height={cx(16)} />
-                <View style={styles.nodesAdjust}>
-                  <View style={styles.adjustButtons}>
-                    <TouchableOpacity
-                      onPress={() => {
-                        state.paintWhiteBucketSelected = true
-                      }}>
-                      <Image
-                        style={[styles.adjustButton, { tintColor: state.paintWhiteBucketSelected ? '#f60' : '#666' }]}
-                        source={res.ic_paint_bucket} />
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                      onPress={() => {
-                        state.paintWhiteBucketSelected = false
-                      }}>
-                      <Image
-                        style={[styles.adjustButton, { tintColor: state.paintWhiteBucketSelected ? '#666' : '#f60' }]}
-                        source={res.ic_colorize} />
-                    </TouchableOpacity>
-                  </View>
-                  <FlatList
-                    data={state.mainLamp.nodes}
-                    style={styles.nodeList}
-                    renderItem={({ item, index }) => {
-                      return (
-                        <View style={styles.nodeItem}>
-                          <TouchableOpacity
-                            style={[
-                              styles.nodeBlock,
-                              {
-                                backgroundColor: getNodeColor(item, false),
-                              },
-                            ]}
-                            onPress={() => {
-                              state.currentWhiteNodeIdx = index
-                            }} />
-                          <TouchableOpacity
-                            style={styles.nodeDeleteBtn}
-                            disabled={state.mainLamp.nodes.length < 3}
-                            onPress={() => {
-                              state.mainLamp.nodes.splice(index, 1)
-                              state.currentWhiteNodeIdx = state.mainLamp.nodes.length - 1
-                            }}>
-                            <Image
-                              style={[
-                                styles.nodeDeleteIcon,
-                                {
-                                  tintColor: state.mainLamp.nodes.length < 3 ? '#ccc' : '#666',
-                                },
-                              ]}
-                              source={res.ic_mood_del} />
-                          </TouchableOpacity>
-                        </View>
-                      )
-                    }}
-                    keyExtractor={(_, index) => `${index}`}
-                    ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
-                    ListFooterComponent={() => {
-                      if (state.mainLamp.nodes.length >= 8) {
-                        return (<></>)
-                      }
-                      return (
-                        <View>
-                          <Spacer height={cx(12)} />
-                          <TouchableOpacity
-                            style={styles.nodeAddBtn}
-                            onPress={() => {
-                              const node = {
-                                ...state.mainLamp.nodes[state.currentWhiteNodeIdx],
-                              }
-                              state.mainLamp.nodes.push(node)
-                              state.currentWhiteNodeIdx = state.mainLamp.nodes.length - 1
-                            }}>
-                            <Image
-                              style={{
-                                width: cx(18),
-                                height: cx(18),
-                                tintColor: '#000',
-                              }}
-                              source={{ uri: res.add }} />
-                          </TouchableOpacity>
-                        </View>
-                      )
-                    }} />
-                </View>
-                <Spacer />
-                <ColorTempAdjustView
-                  isSupportBrightness={moduleParams.isSupportBrightness}
-                  isSupportTemperature={moduleParams.isSupportTemperature}
-                  colorTemp={state.mainLamp.nodes[state.currentWhiteNodeIdx].colorTemp}
-                  brightness={state.mainLamp.nodes[state.currentWhiteNodeIdx].brightness}
-                  onBrightnessChangeComplete={(bright) => {
-                    state.mainLamp.nodes.forEach((node, idx) => {
-                      if (state.paintWhiteBucketSelected) {
-                        node.brightness = bright
-                      }
-                      if (state.currentWhiteNodeIdx === idx) {
-                        node.brightness = bright
-                      }
-                    })
-                  }}
-                  onCCTChangeComplete={(cct) => {
-                    state.mainLamp.nodes.forEach((node, idx) => {
-                      if (state.paintWhiteBucketSelected) {
-                        node.colorTemp = cct
-                      }
-                      if (state.currentWhiteNodeIdx === idx) {
-                        node.colorTemp = cct
-                      }
-                    })
-                  }}
-                />
-                <Spacer height={cx(10)} />
-              </Card>
-              <Card style={styles.adjustCard}>
-                <LdvSwitch
-                  title={I18n.getLang('light_sources_tile_sec_lighting_headline')}
-                  color={'#fff'}
-                  colorAlpha={1}
-                  enable={false}
-                  setEnable={() => { }}
-                  showSwitch={false}
-                />
-                <TextFieldStyleButton
-                  style={styles.transitionMode}
-                  text={state.sceneMode[state.secondlyLamp.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: createSecondlySelectModeData(),
-                      onSelect: selectPageData => {
-                        state.secondlyLamp.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.secondlyLamp.speed}
-                  onValueChange={() => { }}
-                  onSlidingComplete={value => {
-                    state.secondlyLamp.speed = value
-                  }} />
-                <Spacer height={cx(16)} />
-                {state.sceneMode[state.secondlyLamp.mode]?.turnOn && <View style={styles.transitionMode}>
-                  <Segmented
-                    value={state.secondlyLamp.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.secondlyLamp.direction = Number(v)}
-                  />
-                  <Spacer />
-                </View>}
-                {state.sceneMode[state.secondlyLamp.mode]?.paragraph && <View style={styles.transitionMode}>
-                  <Segmented
-                    value={state.secondlyLamp.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.secondlyLamp.segmented = Number(v)}
-                  />
-                  <Spacer />
-                </View>}
-                {state.sceneMode[state.secondlyLamp.mode]?.other && <>
-                  <TextFieldStyleButton
-                    style={styles.transitionMode}
-                    text={getSelectOther(state.sceneMode[state.secondlyLamp.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.secondlyLamp.mode]?.other),
-                        onSelect: selectPageData => {
-                          state.secondlyLamp.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.secondlyLamp.nodes}
-                    style={styles.nodeList}
-                    renderItem={({ item, index }) => {
-                      return (
-                        <View style={styles.nodeItem}>
-                          <TouchableOpacity
-                            style={[
-                              styles.nodeBlock,
-                              {
-                                backgroundColor: getNodeColor(item, true),
-                              },
-                            ]}
-                            onPress={() => {
-                              state.currentColorNodeIdx = index
-                            }} />
-                          <TouchableOpacity
-                            style={styles.nodeDeleteBtn}
-                            disabled={state.secondlyLamp.nodes.length < 3}
-                            onPress={() => {
-                              state.secondlyLamp.nodes.splice(index, 1)
-                              state.currentColorNodeIdx = state.secondlyLamp.nodes.length - 1
-                            }}>
-                            <Image
-                              style={[
-                                styles.nodeDeleteIcon,
-                                {
-                                  tintColor: state.secondlyLamp.nodes.length < 3 ? '#ccc' : '#666',
-                                },
-                              ]}
-                              source={res.ic_mood_del} />
-                          </TouchableOpacity>
-                        </View>
-                      )
-                    }}
-                    keyExtractor={(_, index) => `${index}`}
-                    ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
-                    ListFooterComponent={() => {
-                      if (state.secondlyLamp.nodes.length >= 8) {
-                        return (<></>)
-                      }
-                      return (
-                        <View>
-                          <Spacer height={cx(12)} />
-                          <TouchableOpacity
-                            style={styles.nodeAddBtn}
-                            onPress={() => {
-                              const node = {
-                                ...state.secondlyLamp?.nodes?.[state.currentColorNodeIdx],
-                              }
-                              state.secondlyLamp.nodes.push(node)
-                              state.currentColorNodeIdx = state.secondlyLamp.nodes.length - 1
-                            }}>
-                            <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 />
-                <ColorAdjustView
-                  h={state.secondlyLamp.nodes[state.currentColorNodeIdx]?.h}
-                  s={state.secondlyLamp.nodes[state.currentColorNodeIdx]?.s}
-                  v={state.secondlyLamp.nodes[state.currentColorNodeIdx]?.v}
-                  onHSVChange={() => { }}
-                  onHSVChangeComplete={(h, s, v) => {
-                    state.secondlyLamp.nodes.forEach((node, idx) => {
-                      if (state.paintBucketSelected) {
-                        node.h = h
-                        node.s = s
-                        node.v = v
-                      }
-                      if (state.currentColorNodeIdx === idx) {
-                        node.h = h
-                        node.s = s
-                        node.v = v
-                      }
-                    })
-                  }}
-                />
-                <Spacer height={cx(10)} />
-              </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={() => {
-                  showDialog({
-                    method: 'confirm',
-                    title: I18n.getLang('string_light_pp_dialog_sm_ed_headline_d'),
-                    subTitle: I18n.getLang('strip_light_static_mood_edit_dialog_text'),
-                    onConfirm: async (_, { close }) => {
-                      close()
-                      state.loading = true 
-                      const res = await params.modDeleteFlag('del', state.mood)
-                      state.loading = false 
-                      if(res.success){
-                        navigation.navigate(ui_biz_routerKey.ui_biz_mix_mood)
-                      }
-                    }
-                  })
-                }} />
-            </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),
-  },
-  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),
-    borderWidth: 1,
-    borderColor: '#ccc'
-  },
-  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 const defWhiteNode: SceneNodeInfo[] = [
-  {
-    h: 0,
-    s: 0,
-    v: 0,
-    brightness: 100,
-    colorTemp: 0,
-    switchingInterval: 50,
-    transitionTime: 50,
-    transitionMode: 1,
-    isColorNode: false
-  },
-  {
-    h: 0,
-    s: 0,
-    v: 0,
-    brightness: 100,
-    colorTemp: 0,
-    switchingInterval: 50,
-    transitionTime: 50,
-    transitionMode: 1,
-    isColorNode: false
-  },
-]
-
-export const defColorNode: StripNodeInfo[] = [
-  { h: 0, s: 100, v: 100, brightness: 0, colorTemp: 0, isColorNode: true },
-  { h: 0, s: 100, v: 100, brightness: 0, colorTemp: 0, isColorNode: true },
-]
-
+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 { 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 } 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 { Utils } from 'tuya-panel-kit'
+import LdvSlider from '@ledvance/base/src/components/ldvSlider'
+import TextButton from '@ledvance/base/src/components/TextButton'
+import { stripLightSceneMode, StripNodeInfo, SceneNodeInfo, StripLightSceneMode, CeilingLightSceneMode, StripSceneInfo } from '../../scene/SceneInfo'
+import { MixSceneInfo, MixMainLampInfo, MixSceneNodeInfo } from './MixSceneBeans'
+import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton'
+import { SelectPageParams } from '../../select/SelectPage'
+import { ui_biz_routerKey } from '../../../navigation/Routers'
+import { MixMoodPageProps } from '@ledvance/ui-biz-bundle/src/modules/mood/MixMood/MixMoodPage'
+import Segmented from '@ledvance/base/src/components/Segmented'
+import LdvSwitch from '@ledvance/base/src/components/ldvSwitch'
+import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView'
+import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView'
+import { Result } from '@ledvance/base/src/models/modules/Result'
+import { showDialog } from '@ledvance/base/src/utils/common'
+import { defSecondly } from './AddMixMoodPage'
+const cx = Utils.RatioUtils.convertX
+
+interface MixMoodEditPageState {
+  headline: string
+  mood: MixSceneInfo
+  currentColorNodeIdx: number
+  currentWhiteNodeIdx: number
+  paintBucketSelected: boolean
+  paintWhiteBucketSelected: boolean
+  sceneMode: StripLightSceneMode
+  mainLamp: MixMainLampInfo
+  secondlyLamp: StripSceneInfo
+  loading: boolean
+}
+
+export interface MixMoodEditParams {
+  mode: 'add' | 'edit'
+  isStatic: boolean
+  currentMood: MixSceneInfo
+  moods: MixSceneInfo[]
+  modDeleteFlag: (mode: 'add' | 'edit' | 'del', currentMood: MixSceneInfo) => Promise<Result<any>>
+  onSave: () => void
+  moduleParams: MixMoodPageProps
+}
+const RgbcMoodEditPage = () => {
+  const navigation = useNavigation<StackNavigationProp<any>>()
+  const routeParams = useRoute().params as MixMoodEditParams
+  const params = cloneDeep(routeParams)
+  const moduleParams = params.moduleParams
+  const { mainLamp, secondlyLamp } = params.currentMood
+  const state = useReactive<MixMoodEditPageState>({
+    headline: '',
+    mood: params.currentMood,
+    mainLamp,
+    secondlyLamp,
+    currentWhiteNodeIdx: mainLamp.nodes?.length ? mainLamp.nodes.length - 1 : 0,
+    currentColorNodeIdx: secondlyLamp.nodes?.length ? secondlyLamp.nodes?.length - 1 : 0,
+    paintBucketSelected: false,
+    paintWhiteBucketSelected: false,
+    sceneMode: stripLightSceneMode,
+    loading: false
+  })
+
+  useEffect(() => {
+    state.headline = I18n.getLang(params.mode === 'add' ?
+      (params.isStatic ? 'add_new_static_mood_headline_text' : 'add_new_dynamic_mood_headline_text') :
+      (params.isStatic ? 'edit_static_mood_headline_text' : 'edit_static_mood_headline_text'))
+  }, [params.mode, params.isStatic])
+
+  const getColorBlockColor = useCallback(() => {
+    if (state.secondlyLamp?.nodes?.length) {
+      const currentNode = state.secondlyLamp?.nodes?.[state.currentColorNodeIdx]
+      const s = Math.round(mapFloatToRange(currentNode.s / 100, 30, 100))
+      if (currentNode.isColorNode) {
+        return hsv2Hex(currentNode.h, s, 100)
+      }
+    }
+    return '#fff'
+  }, [state.currentColorNodeIdx, state.secondlyLamp?.nodes])
+
+  const getNodeColor = useCallback((node: MixSceneNodeInfo, isColorNode) => {
+    if (isColorNode) {
+      return hsv2Hex(node.h, node.s, node.v)
+    } else {
+      return cctToColor(node.colorTemp)
+    }
+  }, [])
+
+  const createSecondlySelectModeData = useCallback(() => {
+    return Object.values(state.sceneMode).map(scene => {
+      return {
+        text: scene.title,
+        selected: scene.mode === state.secondlyLamp.mode,
+        value: scene.mode,
+      }
+    })
+  }, [state.secondlyLamp.mode, state.sceneMode])
+
+  const createMainSelectModeData = useCallback(() => {
+    return Object.values(CeilingLightSceneMode).map(scene => {
+      return {
+        text: scene.title,
+        selected: scene.mode === state.mainLamp.mode,
+        value: scene.mode,
+      }
+    })
+  }, [state.mainLamp.mode])
+
+  const createSelectOtherData = useCallback((otherData) => {
+    return otherData.map(other => {
+      return {
+        text: other.label,
+        selected: other.value === state.secondlyLamp.expand,
+        value: other.value,
+      }
+    })
+  }, [state.secondlyLamp.expand])
+
+  const getSelectOther = useCallback((otherData) => {
+    const currentOther = otherData.find(other => other.value === state.secondlyLamp.expand)
+    return currentOther.label
+  }, [state.secondlyLamp.expand])
+
+  const checkMoodDataChanged = useMemo(() =>{
+    return isEqual({
+      ...state.mood,
+      mainLamp: state.mainLamp,
+      secondlyLamp: state.secondlyLamp
+    }, params.currentMood)
+  }, [params.currentMood, state.mood, state.mainLamp, state.secondlyLamp])
+
+  const nameRepeat = useMemo(() => {
+    return !!find(params.moods, m => ((m.mainLamp.id !== state.mood.mainLamp.id && (params.isStatic ? params.isStatic : m.secondlyLamp.id !== state.mood.secondlyLamp.id)) && m.name === state.mood.name))
+  }, [state.mood.name, params.isStatic])
+
+  const canSaveMoodData = useMemo(() =>{
+    return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodDataChanged)
+  }, [nameRepeat, state.mood.name, checkMoodDataChanged, params.mode])
+
+  return (
+    <Page
+      backText={I18n.getLang('mesh_device_detail_mode')}
+      showBackDialog={!checkMoodDataChanged}
+      loading={state.loading}
+      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(state.loading || !canSaveMoodData) return
+        state.loading = true
+        const res = await params.modDeleteFlag(params.mode, {
+          ...state.mood,
+          mainLamp: state.mainLamp,
+          secondlyLamp: params.isStatic ? defSecondly : state.secondlyLamp
+        })
+        state.loading = false
+        if (res.success) {
+          navigation.navigate(ui_biz_routerKey.ui_biz_mix_mood)
+        }
+      }}>
+      <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')} />
+          {params.isStatic ? <Card style={styles.adjustCard}>
+            <LdvSwitch
+              title={I18n.getLang('light_sources_tile_main_lighting_headline')}
+              color="#fff"
+              colorAlpha={1}
+              enable={false}
+              setEnable={() => { }}
+              showSwitch={false}
+            />
+            <ColorTempAdjustView
+              isSupportBrightness={moduleParams.isSupportBrightness}
+              isSupportTemperature={moduleParams.isSupportTemperature}
+              colorTemp={state.mainLamp.nodes[state.currentWhiteNodeIdx].colorTemp}
+              brightness={state.mainLamp.nodes[state.currentWhiteNodeIdx].brightness}
+              onBrightnessChangeComplete={(bright) => {
+                state.mainLamp.nodes.forEach(node => {
+                  node.brightness = bright
+                })
+              }}
+              onCCTChangeComplete={(cct) => {
+                state.mainLamp.nodes.forEach(node => {
+                  node.colorTemp = cct
+                })
+              }}
+            />
+            <Spacer height={cx(16)}/>
+          </Card> :
+            <>
+              <Card style={styles.adjustCard}>
+                <LdvSwitch
+                  title={I18n.getLang('light_sources_tile_main_lighting_headline')}
+                  color="#fff"
+                  colorAlpha={1}
+                  enable={false}
+                  setEnable={() => { }}
+                  showSwitch={false}
+                />
+                <TextFieldStyleButton
+                  style={styles.transitionMode}
+                  text={CeilingLightSceneMode[state.mainLamp.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: createMainSelectModeData(),
+                      onSelect: selectPageData => {
+                        state.mainLamp.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.mainLamp.speed}
+                  onValueChange={() => { }}
+                  onSlidingComplete={value => {
+                    state.mainLamp.speed = value
+                  }} />
+                <Spacer height={cx(16)} />
+                <View style={styles.nodesAdjust}>
+                  <View style={styles.adjustButtons}>
+                    <TouchableOpacity
+                      onPress={() => {
+                        state.paintWhiteBucketSelected = true
+                      }}>
+                      <Image
+                        style={[styles.adjustButton, { tintColor: state.paintWhiteBucketSelected ? '#f60' : '#666' }]}
+                        source={res.ic_paint_bucket} />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                      onPress={() => {
+                        state.paintWhiteBucketSelected = false
+                      }}>
+                      <Image
+                        style={[styles.adjustButton, { tintColor: state.paintWhiteBucketSelected ? '#666' : '#f60' }]}
+                        source={res.ic_colorize} />
+                    </TouchableOpacity>
+                  </View>
+                  <FlatList
+                    data={state.mainLamp.nodes}
+                    style={styles.nodeList}
+                    renderItem={({ item, index }) => {
+                      return (
+                        <View style={styles.nodeItem}>
+                          <TouchableOpacity
+                            style={[
+                              styles.nodeBlock,
+                              {
+                                backgroundColor: getNodeColor(item, false),
+                              },
+                            ]}
+                            onPress={() => {
+                              state.currentWhiteNodeIdx = index
+                            }} />
+                          <TouchableOpacity
+                            style={styles.nodeDeleteBtn}
+                            disabled={state.mainLamp.nodes.length < 3}
+                            onPress={() => {
+                              state.mainLamp.nodes.splice(index, 1)
+                              state.currentWhiteNodeIdx = state.mainLamp.nodes.length - 1
+                            }}>
+                            <Image
+                              style={[
+                                styles.nodeDeleteIcon,
+                                {
+                                  tintColor: state.mainLamp.nodes.length < 3 ? '#ccc' : '#666',
+                                },
+                              ]}
+                              source={res.ic_mood_del} />
+                          </TouchableOpacity>
+                        </View>
+                      )
+                    }}
+                    keyExtractor={(_, index) => `${index}`}
+                    ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
+                    ListFooterComponent={() => {
+                      if (state.mainLamp.nodes.length >= 8) {
+                        return (<></>)
+                      }
+                      return (
+                        <View>
+                          <Spacer height={cx(12)} />
+                          <TouchableOpacity
+                            style={styles.nodeAddBtn}
+                            onPress={() => {
+                              const node = {
+                                ...state.mainLamp.nodes[state.currentWhiteNodeIdx],
+                              }
+                              state.mainLamp.nodes.push(node)
+                              state.currentWhiteNodeIdx = state.mainLamp.nodes.length - 1
+                            }}>
+                            <Image
+                              style={{
+                                width: cx(18),
+                                height: cx(18),
+                                tintColor: '#000',
+                              }}
+                              source={{ uri: res.add }} />
+                          </TouchableOpacity>
+                        </View>
+                      )
+                    }} />
+                </View>
+                <Spacer />
+                <ColorTempAdjustView
+                  isSupportBrightness={moduleParams.isSupportBrightness}
+                  isSupportTemperature={moduleParams.isSupportTemperature}
+                  colorTemp={state.mainLamp.nodes[state.currentWhiteNodeIdx].colorTemp}
+                  brightness={state.mainLamp.nodes[state.currentWhiteNodeIdx].brightness}
+                  onBrightnessChangeComplete={(bright) => {
+                    state.mainLamp.nodes.forEach((node, idx) => {
+                      if (state.paintWhiteBucketSelected) {
+                        node.brightness = bright
+                      }
+                      if (state.currentWhiteNodeIdx === idx) {
+                        node.brightness = bright
+                      }
+                    })
+                  }}
+                  onCCTChangeComplete={(cct) => {
+                    state.mainLamp.nodes.forEach((node, idx) => {
+                      if (state.paintWhiteBucketSelected) {
+                        node.colorTemp = cct
+                      }
+                      if (state.currentWhiteNodeIdx === idx) {
+                        node.colorTemp = cct
+                      }
+                    })
+                  }}
+                />
+                <Spacer height={cx(10)} />
+              </Card>
+              <Card style={styles.adjustCard}>
+                <LdvSwitch
+                  title={I18n.getLang('light_sources_tile_sec_lighting_headline')}
+                  color={'#fff'}
+                  colorAlpha={1}
+                  enable={false}
+                  setEnable={() => { }}
+                  showSwitch={false}
+                />
+                <TextFieldStyleButton
+                  style={styles.transitionMode}
+                  text={state.sceneMode[state.secondlyLamp.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: createSecondlySelectModeData(),
+                      onSelect: selectPageData => {
+                        state.secondlyLamp.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.secondlyLamp.speed}
+                  onValueChange={() => { }}
+                  onSlidingComplete={value => {
+                    state.secondlyLamp.speed = value
+                  }} />
+                <Spacer height={cx(16)} />
+                {state.sceneMode[state.secondlyLamp.mode]?.turnOn && <View style={styles.transitionMode}>
+                  <Segmented
+                    value={state.secondlyLamp.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.secondlyLamp.direction = Number(v)}
+                  />
+                  <Spacer />
+                </View>}
+                {state.sceneMode[state.secondlyLamp.mode]?.paragraph && <View style={styles.transitionMode}>
+                  <Segmented
+                    value={state.secondlyLamp.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.secondlyLamp.segmented = Number(v)}
+                  />
+                  <Spacer />
+                </View>}
+                {state.sceneMode[state.secondlyLamp.mode]?.other && <>
+                  <TextFieldStyleButton
+                    style={styles.transitionMode}
+                    text={getSelectOther(state.sceneMode[state.secondlyLamp.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.secondlyLamp.mode]?.other),
+                        onSelect: selectPageData => {
+                          state.secondlyLamp.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.secondlyLamp.nodes}
+                    style={styles.nodeList}
+                    renderItem={({ item, index }) => {
+                      return (
+                        <View style={styles.nodeItem}>
+                          <TouchableOpacity
+                            style={[
+                              styles.nodeBlock,
+                              {
+                                backgroundColor: getNodeColor(item, true),
+                              },
+                            ]}
+                            onPress={() => {
+                              state.currentColorNodeIdx = index
+                            }} />
+                          <TouchableOpacity
+                            style={styles.nodeDeleteBtn}
+                            disabled={state.secondlyLamp.nodes.length < 3}
+                            onPress={() => {
+                              state.secondlyLamp.nodes.splice(index, 1)
+                              state.currentColorNodeIdx = state.secondlyLamp.nodes.length - 1
+                            }}>
+                            <Image
+                              style={[
+                                styles.nodeDeleteIcon,
+                                {
+                                  tintColor: state.secondlyLamp.nodes.length < 3 ? '#ccc' : '#666',
+                                },
+                              ]}
+                              source={res.ic_mood_del} />
+                          </TouchableOpacity>
+                        </View>
+                      )
+                    }}
+                    keyExtractor={(_, index) => `${index}`}
+                    ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
+                    ListFooterComponent={() => {
+                      if (state.secondlyLamp.nodes.length >= 8) {
+                        return (<></>)
+                      }
+                      return (
+                        <View>
+                          <Spacer height={cx(12)} />
+                          <TouchableOpacity
+                            style={styles.nodeAddBtn}
+                            onPress={() => {
+                              const node = {
+                                ...state.secondlyLamp?.nodes?.[state.currentColorNodeIdx],
+                              }
+                              state.secondlyLamp.nodes.push(node)
+                              state.currentColorNodeIdx = state.secondlyLamp.nodes.length - 1
+                            }}>
+                            <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 />
+                <ColorAdjustView
+                  h={state.secondlyLamp.nodes[state.currentColorNodeIdx]?.h}
+                  s={state.secondlyLamp.nodes[state.currentColorNodeIdx]?.s}
+                  v={state.secondlyLamp.nodes[state.currentColorNodeIdx]?.v}
+                  onHSVChange={() => { }}
+                  onHSVChangeComplete={(h, s, v) => {
+                    state.secondlyLamp.nodes.forEach((node, idx) => {
+                      if (state.paintBucketSelected) {
+                        node.h = h
+                        node.s = s
+                        node.v = v
+                      }
+                      if (state.currentColorNodeIdx === idx) {
+                        node.h = h
+                        node.s = s
+                        node.v = v
+                      }
+                    })
+                  }}
+                />
+                <Spacer height={cx(10)} />
+              </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={() => {
+                  showDialog({
+                    method: 'confirm',
+                    title: I18n.getLang('string_light_pp_dialog_sm_ed_headline_d'),
+                    subTitle: I18n.getLang('strip_light_static_mood_edit_dialog_text'),
+                    onConfirm: async (_, { close }) => {
+                      close()
+                      state.loading = true 
+                      const res = await params.modDeleteFlag('del', state.mood)
+                      state.loading = false 
+                      if(res.success){
+                        navigation.navigate(ui_biz_routerKey.ui_biz_mix_mood)
+                      }
+                    }
+                  })
+                }} />
+            </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),
+  },
+  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),
+    borderWidth: 1,
+    borderColor: '#ccc'
+  },
+  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 const defWhiteNode: SceneNodeInfo[] = [
+  {
+    h: 0,
+    s: 0,
+    v: 0,
+    brightness: 100,
+    colorTemp: 0,
+    switchingInterval: 50,
+    transitionTime: 50,
+    transitionMode: 1,
+    isColorNode: false
+  },
+  {
+    h: 0,
+    s: 0,
+    v: 0,
+    brightness: 100,
+    colorTemp: 0,
+    switchingInterval: 50,
+    transitionTime: 50,
+    transitionMode: 1,
+    isColorNode: false
+  },
+]
+
+export const defColorNode: StripNodeInfo[] = [
+  { h: 0, s: 100, v: 100, brightness: 0, colorTemp: 0, isColorNode: true },
+  { h: 0, s: 100, v: 100, brightness: 0, colorTemp: 0, isColorNode: true },
+]
+
 export default RgbcMoodEditPage