@ledvance/ui-biz-bundle 1.1.69 → 1.1.70

package/src/newModules/mood/MixDynamicMoodEditor.tsx

@@ -1,786 +1,786 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
-import {
-  FlatList,
-  Image,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import { Utils } from 'tuya-panel-kit';
-import { useReactive } from 'ahooks';
-import { cloneDeep, find, isEqual } from 'lodash';
-import Page from '@ledvance/base/src/components/Page';
-import Strings from '@ledvance/base/src/i18n';
-import { StaticMoodEditorPageParams, StaticMoodEditorPageState } from './StaticMoodEditorPage';
-import { useNavigation, useRoute } from '@react-navigation/native';
-import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils';
-import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
-import res from '@ledvance/base/src/res';
-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 LdvSlider from '@ledvance/base/src/components/ldvSlider';
-import TextButton from '@ledvance/base/src/components/TextButton';
-import {
-  MoodNodeTransitionMode,
-  stripLightMoodMode,
-  lightMoodMode,
-  StripLightMoodMode,
-} from './Interface';
-import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton';
-import {ui_biz_routerKey} from '../../navigation/Routers'
-import { SelectPageParams } from '@ledvance/ui-biz-bundle/src/modules/select/SelectPage';
-import I18n from '@ledvance/base/src/i18n';
-import Segmented from '@ledvance/base/src/components/Segmented';
-import { MoodNodeInfo } from './Interface';
-import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView';
-import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
-import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView';
-import { showDialog } from '@ledvance/base/src/utils/common';
-
-const cx = Utils.RatioUtils.convertX;
-interface MixDynamicMoodEditorPageState extends StaticMoodEditorPageState {
-  mainBucketSelected: boolean;
-  secondaryBucketSelected: boolean;
-  mainNodeIdx: number;
-  secondaryIdx: number;
-  sceneMode: StripLightMoodMode;
-}
-const MixDynamicMoodEditorPage = () => {
-  const navigation = useNavigation();
-  const routeParams = useRoute().params as StaticMoodEditorPageParams;
-  const params = cloneDeep(routeParams);
-  const moduleParams = params.moduleParams;
-  const state = useReactive<MixDynamicMoodEditorPageState>({
-    headline: '',
-    mood: params.currentMood,
-    mainNode: params.currentMood.mainLamp.nodes[params.currentMood.mainLamp.nodes.length - 1],
-    secondaryNode:
-      params.currentMood.secondaryLamp.nodes[params.currentMood.secondaryLamp.nodes.length - 1],
-    mainNodeIdx: params.currentMood.mainLamp.nodes.length - 1,
-    secondaryIdx: params.currentMood.secondaryLamp.nodes.length - 1,
-    mainBucketSelected: false,
-    secondaryBucketSelected: false,
-    loading: false,
-    sceneMode: moduleParams.isCeilingLight ? stripLightMoodMode : lightMoodMode,
-  });
-  useEffect(() => {
-    state.headline = Strings.getLang(
-      params.mode === 'add'
-        ? 'add_new_dynamic_mood_headline_text'
-        : 'edit_static_mood_headline_text'
-    );
-  }, [params.mode]);
-
-  const getColorBlockColor = useCallback((node: MoodNodeInfo) => {
-    const s = Math.round(mapFloatToRange(node.s / 100, 30, 100));
-    if (node.isColorNode) {
-      return hsv2Hex(node.h, s, 100);
-    } else {
-      return cctToColor(node.colorTemp.toFixed());
-    }
-  }, []);
-
-  const getNodeColor = useCallback((node: MoodNodeInfo) => {
-    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 createSelectModeData = useCallback(
-    (mode: number, moodMode: StripLightMoodMode) => {
-      return Object.values(moodMode).map(scene => {
-        return {
-          text: scene.title,
-          selected: scene.mode === mode,
-          value: scene.mode,
-        };
-      });
-    },
-    []
-  );
-
-  const createSelectOtherData = useCallback((otherData, expand) => {
-    return otherData.map(other => {
-      return {
-        text: other.label,
-        selected: other.value === expand,
-        value: other.value,
-      };
-    });
-  }, []);
-
-  const getSelectOther = useCallback((otherData, expand) => {
-    const currentOther = otherData.find(other => other.value === expand);
-    return currentOther.label;
-  }, []);
-
-  const nameRepeat = useMemo(() => {
-    return params.nameRepeat(state.mood)
-  }, [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={Strings.getLang('mesh_device_detail_mode')}
-      showBackDialog={!checkMoodChanged}
-      backDialogTitle={Strings.getLang(
-        params.mode === 'add'
-          ? 'string_light_pp_dialog_sm_add_headline_c'
-          : 'manage_user_unsaved_changes_dialog_headline'
-      )}
-      backDialogContent={Strings.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 newMood = cloneDeep(state.mood)
-        if(moduleParams.isMixLight){
-          if(moduleParams.isSupportBrightness){
-            newMood.mainLamp.type = 1
-          }
-          if(moduleParams.isSupportBrightness && moduleParams.isSupportTemperature){
-            newMood.mainLamp.type = 2
-          }
-          if(moduleParams.isSupportColor){
-            newMood.secondaryLamp.type = 3
-          }
-        }
-        const res = await params.modDeleteMood(params.mode, newMood);
-        if (res.success) {
-          navigation.navigate(ui_biz_routerKey.ui_biz_mood);
-        }
-        state.loading = false;
-      }}
-      loading={state.loading}
-    >
-      <ScrollView style={{ flex: 1 }} nestedScrollEnabled={true}>
-        <View style={styles.root}>
-          <TextField
-            style={styles.name}
-            value={state.mood.name}
-            placeholder={Strings.getLang('edit_static_mood_inputfield_topic_text')}
-            onChangeText={text => {
-              state.mood.name = text;
-            }}
-            maxLength={33}
-            showError={state.mood.name.length > 32 || nameRepeat}
-            tipColor={nameRepeat ? '#f00' : undefined}
-            tipIcon={nameRepeat ? res.ic_text_field_input_error : undefined}
-            errorText={Strings.getLang(
-              nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text'
-            )}
-          />
-          <Card style={styles.adjustCard}>
-            <LdvSwitch
-              title={I18n.getLang('light_sources_tile_main_lighting_headline')}
-              color="#fff"
-              colorAlpha={1}
-              enable={!!state.mood.mainLamp.enable}
-              setEnable={v => {
-                if (v && !state.mood.mainLamp.nodes.length) {
-                  state.mood.mainLamp.nodes.push(
-                    {
-                      h: 0,
-                      s: 0,
-                      v: 0,
-                      brightness: 100,
-                      colorTemp: 0,
-                      isColorNode: false,
-                    },
-                    {
-                      h: 0,
-                      s: 0,
-                      v: 0,
-                      brightness: 100,
-                      colorTemp: 0,
-                      isColorNode: false,
-                    }
-                  );
-                  state.mood.mainLamp.mode = MoodNodeTransitionMode.Gradient;
-                  state.mood.mainLamp.speed = 75;
-                  state.mainNodeIdx = 1;
-                  state.mainNode = state.mood.mainLamp.nodes[1];
-                }
-
-                state.mood.mainLamp.enable = v;
-              }}
-              showSwitch={!!moduleParams.isMixLight}
-            />
-            {(!moduleParams.isMixLight || state.mood.mainLamp.enable) && (
-              <>
-                <TextFieldStyleButton
-                  style={styles.transitionMode}
-                  text={lightMoodMode[state.mood.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: createSelectModeData(state.mood.mainLamp.mode, lightMoodMode),
-                      onSelect: selectPageData => {
-                        state.mood.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.mood.mainLamp.speed}
-                  onValueChange={() => {}}
-                  onSlidingComplete={value => {
-                    state.mood.mainLamp.speed = value;
-                  }}
-                />
-                <Spacer height={cx(16)} />
-                <View style={styles.nodesAdjust}>
-                  <View style={styles.adjustButtons}>
-                    <TouchableOpacity
-                      onPress={() => {
-                        state.mainBucketSelected = true;
-                      }}
-                    >
-                      <Image
-                        style={[
-                          styles.adjustButton,
-                          { tintColor: state.mainBucketSelected ? '#f60' : '#666' },
-                        ]}
-                        source={res.ic_paint_bucket}
-                      />
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                      onPress={() => {
-                        state.mainBucketSelected = false;
-                      }}
-                    >
-                      <Image
-                        style={[
-                          styles.adjustButton,
-                          { tintColor: state.mainBucketSelected ? '#666' : '#f60' },
-                        ]}
-                        source={res.ic_colorize}
-                      />
-                    </TouchableOpacity>
-                  </View>
-                  <FlatList
-                    data={state.mood.mainLamp.nodes}
-                    style={styles.nodeList}
-                    renderItem={({ item, index }) => {
-                      return (
-                        <View style={styles.nodeItem}>
-                          <TouchableOpacity
-                            style={[
-                              styles.nodeBlock,
-                              {
-                                backgroundColor: getNodeColor(item),
-                              },
-                            ]}
-                            onPress={() => {
-                              state.mainNodeIdx = index;
-                              state.mainNode = state.mood.mainLamp.nodes[index];
-                            }}
-                          />
-                          <TouchableOpacity
-                            style={styles.nodeDeleteBtn}
-                            disabled={state.mood.mainLamp.nodes.length < 3}
-                            onPress={() => {
-                              state.mood.mainLamp.nodes.splice(index, 1);
-                              state.mainNodeIdx = state.mood.mainLamp.nodes.length - 1;
-                            }}
-                          >
-                            <Image
-                              style={[
-                                styles.nodeDeleteIcon,
-                                {
-                                  tintColor: state.mood.mainLamp.nodes.length < 3 ? '#ccc' : '#666',
-                                },
-                              ]}
-                              source={res.ic_mood_del}
-                            />
-                          </TouchableOpacity>
-                        </View>
-                      );
-                    }}
-                    keyExtractor={(_, index) => `${index}`}
-                    ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
-                    ListFooterComponent={() => {
-                      if (state.mood.mainLamp.nodes.length >= 8) {
-                        return <></>;
-                      }
-                      return (
-                        <View>
-                          <Spacer height={cx(12)} />
-                          <TouchableOpacity
-                            style={styles.nodeAddBtn}
-                            onPress={() => {
-                              const node = {
-                                ...state.mood.mainLamp.nodes[state.mainNodeIdx],
-                              };
-                              state.mood.mainLamp.nodes.push(node);
-                              state.mainNodeIdx = state.mood.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.mood.mainLamp.nodes[state.mainNodeIdx].colorTemp}
-                  brightness={state.mood.mainLamp.nodes[state.mainNodeIdx].brightness}
-                  onBrightnessChangeComplete={bright => {
-                    state.mood.mainLamp.nodes.forEach((node, idx) => {
-                      if (state.mainBucketSelected) {
-                        node.brightness = bright;
-                      }
-                      if (state.mainNodeIdx === idx) {
-                        node.brightness = bright;
-                      }
-                    });
-                  }}
-                  onCCTChangeComplete={cct => {
-                    state.mood.mainLamp.nodes.forEach((node, idx) => {
-                      if (state.mainBucketSelected) {
-                        node.colorTemp = cct;
-                      }
-                      if (state.mainNodeIdx === 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={!!state.mood.secondaryLamp.enable}
-              setEnable={v => {
-                state.mood.secondaryLamp.enable = v;
-                if (v && !state.mood.secondaryLamp.nodes.length) {
-                  state.mood.secondaryLamp.nodes.push(
-                    {
-                      h: 0,
-                      s: 100,
-                      v: 100,
-                      brightness: 0,
-                      colorTemp: 0,
-                      isColorNode: true,
-                    },
-                    {
-                      h: 0,
-                      s: 100,
-                      v: 100,
-                      brightness: 0,
-                      colorTemp: 0,
-                      isColorNode: true,
-                    }
-                  );
-                  state.mood.secondaryLamp.mode = MoodNodeTransitionMode.Gradient;
-                  state.mood.secondaryLamp.speed = 75;
-                  state.secondaryIdx = 1;
-                  state.secondaryNode = state.mood.secondaryLamp.nodes[1];
-                }
-              }}
-              showSwitch={!!moduleParams.isMixLight}
-            />
-            {(!moduleParams.isMixLight || state.mood.secondaryLamp.enable) && (
-              <>
-                <TextFieldStyleButton
-                  style={styles.transitionMode}
-                  text={state.sceneMode[state.mood.secondaryLamp.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(
-                        state.mood.secondaryLamp.mode,
-                        state.sceneMode
-                      ),
-                      onSelect: selectPageData => {
-                        state.mood.secondaryLamp.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.secondaryLamp.speed}
-                  onValueChange={() => {}}
-                  onSlidingComplete={value => {
-                    state.mood.secondaryLamp.speed = value;
-                  }}
-                />
-                <Spacer height={cx(16)} />
-                {state.sceneMode[state.mood.secondaryLamp.mode]?.turnOn && (
-                  <View style={styles.transitionMode}>
-                    <Segmented
-                      value={state.mood.secondaryLamp.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.secondaryLamp.direction = Number(v))}
-                    />
-                    <Spacer />
-                  </View>
-                )}
-                {state.sceneMode[state.mood.secondaryLamp.mode]?.paragraph && (
-                  <View style={styles.transitionMode}>
-                    <Segmented
-                      value={state.mood.secondaryLamp.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.secondaryLamp.segmented = Number(v))}
-                    />
-                    <Spacer />
-                  </View>
-                )}
-                {state.sceneMode[state.mood.secondaryLamp.mode]?.other && (
-                  <>
-                    <TextFieldStyleButton
-                      style={styles.transitionMode}
-                      text={getSelectOther(
-                        state.sceneMode[state.mood.secondaryLamp.mode]?.other,
-                        state.mood.secondaryLamp.expand
-                      )}
-                      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.secondaryLamp.mode]?.other,
-                            state.mood.secondaryLamp.expand
-                          ),
-                          onSelect: selectPageData => {
-                            state.mood.secondaryLamp.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.secondaryBucketSelected = true;
-                      }}
-                    >
-                      <Image
-                        style={[
-                          styles.adjustButton,
-                          { tintColor: state.secondaryBucketSelected ? '#f60' : '#666' },
-                        ]}
-                        source={res.ic_paint_bucket}
-                      />
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                      onPress={() => {
-                        state.secondaryBucketSelected = false;
-                      }}
-                    >
-                      <Image
-                        style={[
-                          styles.adjustButton,
-                          { tintColor: state.secondaryBucketSelected ? '#666' : '#f60' },
-                        ]}
-                        source={res.ic_colorize}
-                      />
-                    </TouchableOpacity>
-                  </View>
-                  <FlatList
-                    data={state.mood.secondaryLamp.nodes}
-                    style={styles.nodeList}
-                    renderItem={({ item, index }) => {
-                      return (
-                        <View style={styles.nodeItem}>
-                          <TouchableOpacity
-                            style={[
-                              styles.nodeBlock,
-                              {
-                                backgroundColor: getNodeColor(item),
-                              },
-                            ]}
-                            onPress={() => {
-                              state.secondaryIdx = index;
-                            }}
-                          />
-                          <TouchableOpacity
-                            style={styles.nodeDeleteBtn}
-                            disabled={state.mood.secondaryLamp.nodes.length < 3}
-                            onPress={() => {
-                              state.mood.secondaryLamp.nodes.splice(index, 1);
-                              state.secondaryIdx = state.mood.secondaryLamp.nodes.length - 1;
-                            }}
-                          >
-                            <Image
-                              style={[
-                                styles.nodeDeleteIcon,
-                                {
-                                  tintColor:
-                                    state.mood.secondaryLamp.nodes.length < 3 ? '#ccc' : '#666',
-                                },
-                              ]}
-                              source={res.ic_mood_del}
-                            />
-                          </TouchableOpacity>
-                        </View>
-                      );
-                    }}
-                    keyExtractor={(_, index) => `${index}`}
-                    ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
-                    ListFooterComponent={() => {
-                      if (state.mood.secondaryLamp.nodes.length >= 8) {
-                        return <></>;
-                      }
-                      return (
-                        <View>
-                          <Spacer height={cx(12)} />
-                          <TouchableOpacity
-                            style={styles.nodeAddBtn}
-                            onPress={() => {
-                              const node = {
-                                ...state.mood.secondaryLamp.nodes[state.secondaryIdx],
-                              };
-                              state.mood.secondaryLamp.nodes.push(node);
-                              state.secondaryIdx = state.mood.secondaryLamp.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(state.secondaryNode) },
-                    ]}
-                  />
-                </View>
-                <Spacer />
-                <ColorAdjustView
-                  h={state.secondaryNode.h}
-                  s={state.secondaryNode.s}
-                  v={state.secondaryNode.v}
-                  reserveSV={true}
-                  onHSVChange={() => {}}
-                  onHSVChangeComplete={(h, s, v) => {
-                    state.mood.secondaryLamp.nodes.forEach((node, idx) => {
-                      if (state.secondaryBucketSelected) {
-                        node.h = h;
-                        node.s = s;
-                        node.v = v;
-                      }
-                      if (state.secondaryIdx === idx) {
-                        node.h = h;
-                        node.s = s;
-                        node.v = v;
-                      }
-                    });
-                  }}
-                />
-                <Spacer height={cx(10)} />
-              </>
-            )}
-          </Card>
-
-          {params.mode === 'edit' && (
-            <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
-              <TextButton
-                style={styles.deleteBtn}
-                textStyle={styles.deleteBtnText}
-                text={Strings.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.modDeleteMood('del', state.mood);
-                      state.loading = false;
-                      if (res.success) {
-                        navigation.navigate(ui_biz_routerKey.ui_biz_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),
-  },
-  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 MixDynamicMoodEditorPage;
-export function getTransitionModeString(transitionMode: MoodNodeTransitionMode): string {
-  if (transitionMode === MoodNodeTransitionMode.Jump) {
-    return Strings.getLang('other_lights_modes_jump_text');
-  }
-  return Strings.getLang('other_lights_modes_gradient_text');
-}
+import React, { useCallback, useEffect, useMemo } from 'react';
+import {
+  FlatList,
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { Utils } from 'tuya-panel-kit';
+import { useReactive } from 'ahooks';
+import { cloneDeep, find, isEqual } from 'lodash';
+import Page from '@ledvance/base/src/components/Page';
+import Strings from '@ledvance/base/src/i18n';
+import { StaticMoodEditorPageParams, StaticMoodEditorPageState } from './StaticMoodEditorPage';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils';
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
+import res from '@ledvance/base/src/res';
+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 LdvSlider from '@ledvance/base/src/components/ldvSlider';
+import TextButton from '@ledvance/base/src/components/TextButton';
+import {
+  MoodNodeTransitionMode,
+  stripLightMoodMode,
+  lightMoodMode,
+  StripLightMoodMode,
+} from './Interface';
+import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton';
+import {ui_biz_routerKey} from '../../navigation/Routers'
+import { SelectPageParams } from '@ledvance/ui-biz-bundle/src/modules/select/SelectPage';
+import I18n from '@ledvance/base/src/i18n';
+import Segmented from '@ledvance/base/src/components/Segmented';
+import { MoodNodeInfo } from './Interface';
+import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView';
+import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
+import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView';
+import { showDialog } from '@ledvance/base/src/utils/common';
+
+const cx = Utils.RatioUtils.convertX;
+interface MixDynamicMoodEditorPageState extends StaticMoodEditorPageState {
+  mainBucketSelected: boolean;
+  secondaryBucketSelected: boolean;
+  mainNodeIdx: number;
+  secondaryIdx: number;
+  sceneMode: StripLightMoodMode;
+}
+const MixDynamicMoodEditorPage = () => {
+  const navigation = useNavigation();
+  const routeParams = useRoute().params as StaticMoodEditorPageParams;
+  const params = cloneDeep(routeParams);
+  const moduleParams = params.moduleParams;
+  const state = useReactive<MixDynamicMoodEditorPageState>({
+    headline: '',
+    mood: params.currentMood,
+    mainNode: params.currentMood.mainLamp.nodes[params.currentMood.mainLamp.nodes.length - 1],
+    secondaryNode:
+      params.currentMood.secondaryLamp.nodes[params.currentMood.secondaryLamp.nodes.length - 1],
+    mainNodeIdx: params.currentMood.mainLamp.nodes.length - 1,
+    secondaryIdx: params.currentMood.secondaryLamp.nodes.length - 1,
+    mainBucketSelected: false,
+    secondaryBucketSelected: false,
+    loading: false,
+    sceneMode: moduleParams.isCeilingLight ? stripLightMoodMode : lightMoodMode,
+  });
+  useEffect(() => {
+    state.headline = Strings.getLang(
+      params.mode === 'add'
+        ? 'add_new_dynamic_mood_headline_text'
+        : 'edit_static_mood_headline_text'
+    );
+  }, [params.mode]);
+
+  const getColorBlockColor = useCallback((node: MoodNodeInfo) => {
+    const s = Math.round(mapFloatToRange(node.s / 100, 30, 100));
+    if (node.isColorNode) {
+      return hsv2Hex(node.h, s, 100);
+    } else {
+      return cctToColor(node.colorTemp.toFixed());
+    }
+  }, []);
+
+  const getNodeColor = useCallback((node: MoodNodeInfo) => {
+    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 createSelectModeData = useCallback(
+    (mode: number, moodMode: StripLightMoodMode) => {
+      return Object.values(moodMode).map(scene => {
+        return {
+          text: scene.title,
+          selected: scene.mode === mode,
+          value: scene.mode,
+        };
+      });
+    },
+    []
+  );
+
+  const createSelectOtherData = useCallback((otherData, expand) => {
+    return otherData.map(other => {
+      return {
+        text: other.label,
+        selected: other.value === expand,
+        value: other.value,
+      };
+    });
+  }, []);
+
+  const getSelectOther = useCallback((otherData, expand) => {
+    const currentOther = otherData.find(other => other.value === expand);
+    return currentOther.label;
+  }, []);
+
+  const nameRepeat = useMemo(() => {
+    return params.nameRepeat(state.mood)
+  }, [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={Strings.getLang('mesh_device_detail_mode')}
+      showBackDialog={!checkMoodChanged}
+      backDialogTitle={Strings.getLang(
+        params.mode === 'add'
+          ? 'string_light_pp_dialog_sm_add_headline_c'
+          : 'manage_user_unsaved_changes_dialog_headline'
+      )}
+      backDialogContent={Strings.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 newMood = cloneDeep(state.mood)
+        if(moduleParams.isMixLight){
+          if(moduleParams.isSupportBrightness){
+            newMood.mainLamp.type = 1
+          }
+          if(moduleParams.isSupportBrightness && moduleParams.isSupportTemperature){
+            newMood.mainLamp.type = 2
+          }
+          if(moduleParams.isSupportColor){
+            newMood.secondaryLamp.type = 3
+          }
+        }
+        const res = await params.modDeleteMood(params.mode, newMood);
+        if (res.success) {
+          navigation.navigate(ui_biz_routerKey.ui_biz_mood);
+        }
+        state.loading = false;
+      }}
+      loading={state.loading}
+    >
+      <ScrollView style={{ flex: 1 }} nestedScrollEnabled={true}>
+        <View style={styles.root}>
+          <TextField
+            style={styles.name}
+            value={state.mood.name}
+            placeholder={Strings.getLang('edit_static_mood_inputfield_topic_text')}
+            onChangeText={text => {
+              state.mood.name = text;
+            }}
+            maxLength={33}
+            showError={state.mood.name.length > 32 || nameRepeat}
+            tipColor={nameRepeat ? '#f00' : undefined}
+            tipIcon={nameRepeat ? res.ic_text_field_input_error : undefined}
+            errorText={Strings.getLang(
+              nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text'
+            )}
+          />
+          <Card style={styles.adjustCard}>
+            <LdvSwitch
+              title={I18n.getLang('light_sources_tile_main_lighting_headline')}
+              color="#fff"
+              colorAlpha={1}
+              enable={!!state.mood.mainLamp.enable}
+              setEnable={v => {
+                if (v && !state.mood.mainLamp.nodes.length) {
+                  state.mood.mainLamp.nodes.push(
+                    {
+                      h: 0,
+                      s: 0,
+                      v: 0,
+                      brightness: 100,
+                      colorTemp: 0,
+                      isColorNode: false,
+                    },
+                    {
+                      h: 0,
+                      s: 0,
+                      v: 0,
+                      brightness: 100,
+                      colorTemp: 0,
+                      isColorNode: false,
+                    }
+                  );
+                  state.mood.mainLamp.mode = MoodNodeTransitionMode.Gradient;
+                  state.mood.mainLamp.speed = 75;
+                  state.mainNodeIdx = 1;
+                  state.mainNode = state.mood.mainLamp.nodes[1];
+                }
+
+                state.mood.mainLamp.enable = v;
+              }}
+              showSwitch={!!moduleParams.isMixLight}
+            />
+            {(!moduleParams.isMixLight || state.mood.mainLamp.enable) && (
+              <>
+                <TextFieldStyleButton
+                  style={styles.transitionMode}
+                  text={lightMoodMode[state.mood.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: createSelectModeData(state.mood.mainLamp.mode, lightMoodMode),
+                      onSelect: selectPageData => {
+                        state.mood.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.mood.mainLamp.speed}
+                  onValueChange={() => {}}
+                  onSlidingComplete={value => {
+                    state.mood.mainLamp.speed = value;
+                  }}
+                />
+                <Spacer height={cx(16)} />
+                <View style={styles.nodesAdjust}>
+                  <View style={styles.adjustButtons}>
+                    <TouchableOpacity
+                      onPress={() => {
+                        state.mainBucketSelected = true;
+                      }}
+                    >
+                      <Image
+                        style={[
+                          styles.adjustButton,
+                          { tintColor: state.mainBucketSelected ? '#f60' : '#666' },
+                        ]}
+                        source={res.ic_paint_bucket}
+                      />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                      onPress={() => {
+                        state.mainBucketSelected = false;
+                      }}
+                    >
+                      <Image
+                        style={[
+                          styles.adjustButton,
+                          { tintColor: state.mainBucketSelected ? '#666' : '#f60' },
+                        ]}
+                        source={res.ic_colorize}
+                      />
+                    </TouchableOpacity>
+                  </View>
+                  <FlatList
+                    data={state.mood.mainLamp.nodes}
+                    style={styles.nodeList}
+                    renderItem={({ item, index }) => {
+                      return (
+                        <View style={styles.nodeItem}>
+                          <TouchableOpacity
+                            style={[
+                              styles.nodeBlock,
+                              {
+                                backgroundColor: getNodeColor(item),
+                              },
+                            ]}
+                            onPress={() => {
+                              state.mainNodeIdx = index;
+                              state.mainNode = state.mood.mainLamp.nodes[index];
+                            }}
+                          />
+                          <TouchableOpacity
+                            style={styles.nodeDeleteBtn}
+                            disabled={state.mood.mainLamp.nodes.length < 3}
+                            onPress={() => {
+                              state.mood.mainLamp.nodes.splice(index, 1);
+                              state.mainNodeIdx = state.mood.mainLamp.nodes.length - 1;
+                            }}
+                          >
+                            <Image
+                              style={[
+                                styles.nodeDeleteIcon,
+                                {
+                                  tintColor: state.mood.mainLamp.nodes.length < 3 ? '#ccc' : '#666',
+                                },
+                              ]}
+                              source={res.ic_mood_del}
+                            />
+                          </TouchableOpacity>
+                        </View>
+                      );
+                    }}
+                    keyExtractor={(_, index) => `${index}`}
+                    ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
+                    ListFooterComponent={() => {
+                      if (state.mood.mainLamp.nodes.length >= 8) {
+                        return <></>;
+                      }
+                      return (
+                        <View>
+                          <Spacer height={cx(12)} />
+                          <TouchableOpacity
+                            style={styles.nodeAddBtn}
+                            onPress={() => {
+                              const node = {
+                                ...state.mood.mainLamp.nodes[state.mainNodeIdx],
+                              };
+                              state.mood.mainLamp.nodes.push(node);
+                              state.mainNodeIdx = state.mood.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.mood.mainLamp.nodes[state.mainNodeIdx].colorTemp}
+                  brightness={state.mood.mainLamp.nodes[state.mainNodeIdx].brightness}
+                  onBrightnessChangeComplete={bright => {
+                    state.mood.mainLamp.nodes.forEach((node, idx) => {
+                      if (state.mainBucketSelected) {
+                        node.brightness = bright;
+                      }
+                      if (state.mainNodeIdx === idx) {
+                        node.brightness = bright;
+                      }
+                    });
+                  }}
+                  onCCTChangeComplete={cct => {
+                    state.mood.mainLamp.nodes.forEach((node, idx) => {
+                      if (state.mainBucketSelected) {
+                        node.colorTemp = cct;
+                      }
+                      if (state.mainNodeIdx === 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={!!state.mood.secondaryLamp.enable}
+              setEnable={v => {
+                state.mood.secondaryLamp.enable = v;
+                if (v && !state.mood.secondaryLamp.nodes.length) {
+                  state.mood.secondaryLamp.nodes.push(
+                    {
+                      h: 0,
+                      s: 100,
+                      v: 100,
+                      brightness: 0,
+                      colorTemp: 0,
+                      isColorNode: true,
+                    },
+                    {
+                      h: 0,
+                      s: 100,
+                      v: 100,
+                      brightness: 0,
+                      colorTemp: 0,
+                      isColorNode: true,
+                    }
+                  );
+                  state.mood.secondaryLamp.mode = MoodNodeTransitionMode.Gradient;
+                  state.mood.secondaryLamp.speed = 75;
+                  state.secondaryIdx = 1;
+                  state.secondaryNode = state.mood.secondaryLamp.nodes[1];
+                }
+              }}
+              showSwitch={!!moduleParams.isMixLight}
+            />
+            {(!moduleParams.isMixLight || state.mood.secondaryLamp.enable) && (
+              <>
+                <TextFieldStyleButton
+                  style={styles.transitionMode}
+                  text={state.sceneMode[state.mood.secondaryLamp.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(
+                        state.mood.secondaryLamp.mode,
+                        state.sceneMode
+                      ),
+                      onSelect: selectPageData => {
+                        state.mood.secondaryLamp.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.secondaryLamp.speed}
+                  onValueChange={() => {}}
+                  onSlidingComplete={value => {
+                    state.mood.secondaryLamp.speed = value;
+                  }}
+                />
+                <Spacer height={cx(16)} />
+                {state.sceneMode[state.mood.secondaryLamp.mode]?.turnOn && (
+                  <View style={styles.transitionMode}>
+                    <Segmented
+                      value={state.mood.secondaryLamp.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.secondaryLamp.direction = Number(v))}
+                    />
+                    <Spacer />
+                  </View>
+                )}
+                {state.sceneMode[state.mood.secondaryLamp.mode]?.paragraph && (
+                  <View style={styles.transitionMode}>
+                    <Segmented
+                      value={state.mood.secondaryLamp.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.secondaryLamp.segmented = Number(v))}
+                    />
+                    <Spacer />
+                  </View>
+                )}
+                {state.sceneMode[state.mood.secondaryLamp.mode]?.other && (
+                  <>
+                    <TextFieldStyleButton
+                      style={styles.transitionMode}
+                      text={getSelectOther(
+                        state.sceneMode[state.mood.secondaryLamp.mode]?.other,
+                        state.mood.secondaryLamp.expand
+                      )}
+                      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.secondaryLamp.mode]?.other,
+                            state.mood.secondaryLamp.expand
+                          ),
+                          onSelect: selectPageData => {
+                            state.mood.secondaryLamp.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.secondaryBucketSelected = true;
+                      }}
+                    >
+                      <Image
+                        style={[
+                          styles.adjustButton,
+                          { tintColor: state.secondaryBucketSelected ? '#f60' : '#666' },
+                        ]}
+                        source={res.ic_paint_bucket}
+                      />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                      onPress={() => {
+                        state.secondaryBucketSelected = false;
+                      }}
+                    >
+                      <Image
+                        style={[
+                          styles.adjustButton,
+                          { tintColor: state.secondaryBucketSelected ? '#666' : '#f60' },
+                        ]}
+                        source={res.ic_colorize}
+                      />
+                    </TouchableOpacity>
+                  </View>
+                  <FlatList
+                    data={state.mood.secondaryLamp.nodes}
+                    style={styles.nodeList}
+                    renderItem={({ item, index }) => {
+                      return (
+                        <View style={styles.nodeItem}>
+                          <TouchableOpacity
+                            style={[
+                              styles.nodeBlock,
+                              {
+                                backgroundColor: getNodeColor(item),
+                              },
+                            ]}
+                            onPress={() => {
+                              state.secondaryIdx = index;
+                            }}
+                          />
+                          <TouchableOpacity
+                            style={styles.nodeDeleteBtn}
+                            disabled={state.mood.secondaryLamp.nodes.length < 3}
+                            onPress={() => {
+                              state.mood.secondaryLamp.nodes.splice(index, 1);
+                              state.secondaryIdx = state.mood.secondaryLamp.nodes.length - 1;
+                            }}
+                          >
+                            <Image
+                              style={[
+                                styles.nodeDeleteIcon,
+                                {
+                                  tintColor:
+                                    state.mood.secondaryLamp.nodes.length < 3 ? '#ccc' : '#666',
+                                },
+                              ]}
+                              source={res.ic_mood_del}
+                            />
+                          </TouchableOpacity>
+                        </View>
+                      );
+                    }}
+                    keyExtractor={(_, index) => `${index}`}
+                    ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
+                    ListFooterComponent={() => {
+                      if (state.mood.secondaryLamp.nodes.length >= 8) {
+                        return <></>;
+                      }
+                      return (
+                        <View>
+                          <Spacer height={cx(12)} />
+                          <TouchableOpacity
+                            style={styles.nodeAddBtn}
+                            onPress={() => {
+                              const node = {
+                                ...state.mood.secondaryLamp.nodes[state.secondaryIdx],
+                              };
+                              state.mood.secondaryLamp.nodes.push(node);
+                              state.secondaryIdx = state.mood.secondaryLamp.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(state.secondaryNode) },
+                    ]}
+                  />
+                </View>
+                <Spacer />
+                <ColorAdjustView
+                  h={state.secondaryNode.h}
+                  s={state.secondaryNode.s}
+                  v={state.secondaryNode.v}
+                  reserveSV={true}
+                  onHSVChange={() => {}}
+                  onHSVChangeComplete={(h, s, v) => {
+                    state.mood.secondaryLamp.nodes.forEach((node, idx) => {
+                      if (state.secondaryBucketSelected) {
+                        node.h = h;
+                        node.s = s;
+                        node.v = v;
+                      }
+                      if (state.secondaryIdx === idx) {
+                        node.h = h;
+                        node.s = s;
+                        node.v = v;
+                      }
+                    });
+                  }}
+                />
+                <Spacer height={cx(10)} />
+              </>
+            )}
+          </Card>
+
+          {params.mode === 'edit' && (
+            <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
+              <TextButton
+                style={styles.deleteBtn}
+                textStyle={styles.deleteBtnText}
+                text={Strings.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.modDeleteMood('del', state.mood);
+                      state.loading = false;
+                      if (res.success) {
+                        navigation.navigate(ui_biz_routerKey.ui_biz_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),
+  },
+  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 MixDynamicMoodEditorPage;
+export function getTransitionModeString(transitionMode: MoodNodeTransitionMode): string {
+  if (transitionMode === MoodNodeTransitionMode.Jump) {
+    return Strings.getLang('other_lights_modes_jump_text');
+  }
+  return Strings.getLang('other_lights_modes_gradient_text');
+}