@ledvance/ui-biz-bundle 1.1.69 → 1.1.71

package/src/newModules/sleepWakeUp/SleepWakeUpDetailPage.tsx

@@ -1,661 +1,661 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-import Page from '@ledvance/base/src/components/Page';
-import I18n from '@ledvance/base/src/i18n';
-import res from '@ledvance/base/src/res';
-import { TimerPicker, Utils } from 'tuya-panel-kit';
-import { useReactive, useUpdateEffect } from 'ahooks';
-import TextField from '@ledvance/base/src/components/TextField';
-import LdvPickerView from '@ledvance/base/src/components/ldvPickerView';
-import LdvWeekView from '@ledvance/base/src/components/weekSelect';
-import {
-  convertMinutesTo12HourFormat,
-  loopText,
-  showDialog,
-} from '@ledvance/base/src/utils/common';
-import Spacer from '@ledvance/base/src/components/Spacer';
-import DeleteButton from '@ledvance/base/src/components/DeleteButton';
-import { SleepWakeUpPageRouteParams } from './SleepWakeUpPage';
-import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
-import { cloneDeep, isEqual } from 'lodash';
-import { SleepUIItem, WakeUpUIItem } from './Interface';
-import { useSystemTimeFormate } from '@ledvance/base/src/models/modules/NativePropsSlice';
-import { Result } from '@ledvance/base/src/models/modules/Result';
-import LampAdjustView from '@ledvance/base/src/components/LampAdjustView';
-import Card from '@ledvance/base/src/components/Card';
-import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils';
-import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
-import { useParams } from '@ledvance/base/src/hooks/Hooks';
-import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView';
-import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView';
-import Summary from '@ledvance/base/src/components/Summary';
-
-const { convertX: cx } = Utils.RatioUtils;
-const { toFixedString } = Utils.NumberUtils;
-
-interface SleepWakeUpDetailPageProps extends SleepWakeUpPageRouteParams {
-  mode: 'add' | 'edit';
-  isSleep: boolean;
-  scheduleItem: any;
-  modDeleteTimeSchedule: (
-    mode: 'add' | 'edit' | 'del',
-    isSleep: boolean,
-    sleepWakeUp: SleepUIItem | WakeUpUIItem
-  ) => Promise<Result<any>>;
-}
-
-const SleepWakeUpDetailPage = () => {
-  const navigation = useNavigation();
-  const props = useParams<SleepWakeUpDetailPageProps>();
-  const is24HourClock = useSystemTimeFormate();
-  const state = useReactive({
-    sleepWakeUp: cloneDeep(props.scheduleItem) as WakeUpUIItem,
-    loading: false,
-  });
-
-  useEffect(() => {
-    if (props.mode !== 'edit') return;
-    if (state.sleepWakeUp.isColorMode) {
-      state.sleepWakeUp.brightness = 100;
-    } else {
-      state.sleepWakeUp.s = 100;
-      state.sleepWakeUp.v = 100;
-    }
-  }, []);
-
-  useUpdateEffect(() => {
-    if (state.sleepWakeUp.delay === 0) {
-      state.sleepWakeUp.delay = 1;
-    }
-    if (state.sleepWakeUp.delay > 24) {
-      state.sleepWakeUp.delay = 24;
-    }
-  }, [state.sleepWakeUp.delay]);
-
-  useUpdateEffect(() => {
-    if (state.sleepWakeUp.last > 24) {
-      state.sleepWakeUp.last = 24;
-    }
-  }, [state.sleepWakeUp.last]);
-
-  useUpdateEffect(() => {
-    const { startTime, endTime, delay, isSleep } = state.sleepWakeUp;
-    if (isSleep) {
-      state.sleepWakeUp.hour = Math.trunc(startTime / 60);
-      state.sleepWakeUp.minute = startTime % 60;
-      const endMin = startTime + delay * 5;
-      state.sleepWakeUp.endTime = endMin > 1440 ? endMin - 1440 : endMin;
-    } else {
-      state.sleepWakeUp.hour = Math.trunc(endTime / 60);
-      state.sleepWakeUp.minute = endTime % 60;
-      const startMin = endTime - delay * 5;
-      state.sleepWakeUp.startTime = startMin < 0 ? startMin + 1440 : startMin;
-    }
-  }, [state.sleepWakeUp.startTime, state.sleepWakeUp.delay, state.sleepWakeUp.endTime]);
-
-  const getRangeTime = (time: number, isStart?: boolean) => {
-    if (isStart) {
-      return time < 0 ? 1440 + time : time;
-    } else {
-      return time > 1440 ? time - 1440 : time;
-    }
-  };
-
-  const getBlockColor = useCallback(() => {
-    if (state.sleepWakeUp.isColorMode) {
-      const s = Math.round(mapFloatToRange(state.sleepWakeUp.s / 100, 30, 100));
-      return hsv2Hex(state.sleepWakeUp.h, s, 100);
-    }
-    return cctToColor(state.sleepWakeUp.temperature);
-  }, [state.sleepWakeUp]);
-
-  const checkItemChanged = useMemo(() =>{
-    const { isColorMode, h, s, v, brightness, temperature } = state.sleepWakeUp;
-    const currentSleepWakeUp = {
-      ...state.sleepWakeUp,
-      h: isColorMode ? h : 0,
-      s: isColorMode ? s : 0,
-      v: isColorMode ? v : 0,
-      brightness: isColorMode ? 0 : brightness,
-      temperature: isColorMode ? 0 : temperature,
-    };
-    return isEqual(props.scheduleItem, props.mode === 'add' ? state.sleepWakeUp : currentSleepWakeUp);
-  }, [props.scheduleItem, JSON.stringify(state.sleepWakeUp), props.mode])
-
-  const canSubmit = useMemo(() => {
-    return state.sleepWakeUp.name?.length > 0 && state.sleepWakeUp.name?.length < 33 && !checkItemChanged
-  }, [state.sleepWakeUp.name, checkItemChanged]);
-
-  const mixLightCard = useMemo(() => {
-    const applyList = props.applyForList.map(item => {
-      if (item.type === 'mainLight' && state.sleepWakeUp.isColorMode) {
-        return {
-          ...item,
-          enable: false,
-        };
-      }
-      if (item.type === 'secondaryLight' && !state.sleepWakeUp.isColorMode) {
-        return {
-          ...item,
-          enable: false,
-        };
-      }
-      return item;
-    });
-    return (
-      <View>
-        {applyList.map(item => (
-          <View key={item.dp}>
-            <Card style={{ marginHorizontal: cx(24) }}>
-              <LdvSwitch
-                title={item.key}
-                color={'#fff'}
-                colorAlpha={1}
-                enable={
-                  item.type === 'mainLight'
-                    ? !state.sleepWakeUp.isColorMode
-                    : state.sleepWakeUp.isColorMode
-                }
-                setEnable={(enable: boolean) => {
-                  state.sleepWakeUp.isColorMode = item.type === 'mainLight' ? !enable : enable;
-                }}
-              />
-              {item.type === 'mainLight' && !state.sleepWakeUp.isColorMode ? (
-                <View>
-                  <ColorTempAdjustView
-                    isSupportBrightness={!!props.isSupportBrightness}
-                    isSupportTemperature={!!props.isSupportTemperature}
-                    colorTemp={state.sleepWakeUp.temperature}
-                    brightness={state.sleepWakeUp.brightness}
-                    onBrightnessChangeComplete={bright => {
-                      state.sleepWakeUp.brightness = bright;
-                    }}
-                    onCCTChangeComplete={cct => {
-                      state.sleepWakeUp.temperature = cct;
-                    }}
-                  />
-                  <Spacer height={cx(16)} />
-                </View>
-              ) : item.type === 'secondaryLight' && state.sleepWakeUp.isColorMode ? (
-                <View>
-                  <ColorAdjustView
-                    h={state.sleepWakeUp.h}
-                    s={state.sleepWakeUp.s}
-                    v={state.sleepWakeUp.v}
-                    reserveSV={true}
-                    minSaturation={1}
-                    onHSVChangeComplete={(h, s, v) => {
-                      state.sleepWakeUp.h = h;
-                      state.sleepWakeUp.s = s;
-                      state.sleepWakeUp.v = v;
-                    }}
-                  />
-                  <Spacer />
-                </View>
-              ) : null}
-            </Card>
-            <Spacer />
-          </View>
-        ))}
-      </View>
-    );
-  }, [props.applyForList, JSON.stringify(state.sleepWakeUp)]);
-
-  return (
-    <Page
-      backText={I18n.getLang('add_sleepschedule_one_source_system_back_text')}
-      showBackDialog={!checkItemChanged}
-      loading={state.loading}
-      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
-      backDialogContent={I18n.getLang(
-        props.isSleep
-          ? 'cancel_dialog_leave_unsaved_sleepschedule_note'
-          : 'cancel_dialog_leave_unsaved_wakeupschedule_note'
-      )}
-      rightButtonIcon={canSubmit ? res.ic_check : res.ic_uncheck}
-      rightButtonIconClick={async () => {
-        if (!canSubmit || state.loading) return;
-        state.loading = true;
-        if (state.sleepWakeUp.isColorMode) {
-          state.sleepWakeUp.brightness = 0;
-          state.sleepWakeUp.temperature = 0;
-        } else {
-          state.sleepWakeUp.h = 0;
-          state.sleepWakeUp.s = 0;
-          state.sleepWakeUp.v = 0;
-        }
-        state.sleepWakeUp.enable = true
-        const res = await props.modDeleteTimeSchedule(
-          props.mode,
-          state.sleepWakeUp.isSleep,
-          state.sleepWakeUp
-        );
-        state.loading = false;
-        if (res.success) {
-          navigation.goBack();
-        }
-      }}
-      headlineText={I18n.getLang(
-        props.isSleep
-          ? props.mode === 'add'
-            ? 'add_sleepschedule_one_source_headline_text'
-            : 'edit_sleepschedule_headline_text'
-          : props.mode === 'add'
-            ? 'add_wakeupschedule_one_source_headline_text'
-            : 'edit_wakeupschedule_headline_text'
-      )}
-    >
-      <ScrollView
-        nestedScrollEnabled={true}
-        showsHorizontalScrollIndicator={false}
-        showsVerticalScrollIndicator={false}
-      >
-        <TextField
-          style={styles.cardContainer}
-          value={state.sleepWakeUp.name}
-          showError={state.sleepWakeUp.name?.length > 32}
-          maxLength={33}
-          errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}
-          placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
-          onChangeText={(t: string) => {
-            state.sleepWakeUp.name = t;
-          }}
-        />
-        {/* pick */}
-        <TimerPicker
-          itemTextColor="#aeadb5"
-          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
-          is12Hours={!is24HourClock}
-          singlePicker={true}
-          amText={I18n.getLang('manage_user_calendar_label_am')}
-          pmText={I18n.getLang('manage_user_calendar_label_pm')}
-          startTime={props.isSleep ? state.sleepWakeUp.startTime : state.sleepWakeUp.endTime}
-          symbol={''}
-          onTimerChange={time => {
-            if (props.isSleep) {
-              state.sleepWakeUp.startTime = time;
-            } else {
-              state.sleepWakeUp.endTime = time;
-            }
-          }}
-        />
-
-        {/* week */}
-        <View style={styles.week}>
-          <LdvWeekView
-            value={state.sleepWakeUp.weeks}
-            onSelect={(weekIdx: number) => {
-              state.sleepWakeUp.weeks = state.sleepWakeUp.weeks.map((week, idx) => {
-                if (idx === weekIdx - 1) {
-                  return week === 1 ? 0 : 1;
-                }
-                return week;
-              });
-            }}
-          />
-          <Spacer />
-          <Text style={{ marginHorizontal: cx(24) }}>{loopText(state.sleepWakeUp.weeks)}</Text>
-          <Spacer />
-        </View>
-
-        {/* Apply for */}
-        <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>
-            {I18n.getLang('timeschedule_add_schedule_subheadline_text')}
-          </Text>
-          <View
-            style={{
-              backgroundColor: '#f6f6f6',
-              borderRadius: 4,
-              minHeight: cx(50),
-              flex: 1,
-              justifyContent: 'center',
-            }}
-          >
-            <View
-              style={{
-                marginHorizontal: cx(8),
-                marginTop: cx(8),
-                borderRadius: 4,
-              }}
-            >
-              {props.applyForList.map(apply => (
-                <View
-                  style={{
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    backgroundColor: '#fff',
-                    marginBottom: cx(8),
-                  }}
-                  key={apply.dp}
-                >
-                  <Text
-                    style={{
-                      color: '#000',
-                      fontSize: cx(14),
-                      marginHorizontal: cx(6),
-                      marginVertical: cx(9),
-                    }}
-                  >
-                    {apply.key}
-                  </Text>
-                </View>
-              ))}
-            </View>
-          </View>
-          <Spacer />
-        </View>
-
-        {/* Device state */}
-        <View>
-          <Text style={[styles.itemTitle, styles.cardContainer]}>
-            {I18n.getLang('timeschedule_add_schedule_subheadline2_text')}
-          </Text>
-          {props.isMixLight ? (
-            mixLightCard
-          ) : (
-            <Card style={styles.cardContainer}>
-              <LdvSwitch
-                title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
-                color={getBlockColor()}
-                colorAlpha={1}
-                enable={false}
-                showSwitch={false}
-                setEnable={() => { }}
-              />
-              <LampAdjustView
-                isSupportColor={!!props.isSupportColor}
-                isSupportTemperature={!!props.isSupportTemperature}
-                isSupportBrightness={!!props.isSupportBrightness}
-                isColorMode={state.sleepWakeUp.isColorMode}
-                reserveSV={true}
-                setIsColorMode={() => {
-                  state.sleepWakeUp.isColorMode = !state.sleepWakeUp.isColorMode;
-                }}
-                h={state.sleepWakeUp.h}
-                s={state.sleepWakeUp.s}
-                v={state.sleepWakeUp.v}
-                onHSVChange={(h, s, v) => {
-                  state.sleepWakeUp.h = h;
-                  state.sleepWakeUp.s = s;
-                  state.sleepWakeUp.v = v;
-                }}
-                onHSVChangeComplete={(h, s, v) => {
-                  state.sleepWakeUp.h = h;
-                  state.sleepWakeUp.s = s;
-                  state.sleepWakeUp.v = v;
-                }}
-                colorTemp={state.sleepWakeUp.temperature}
-                brightness={state.sleepWakeUp.brightness}
-                onCCTChange={cct => {
-                  state.sleepWakeUp.temperature = cct;
-                }}
-                onCCTChangeComplete={cct => {
-                  state.sleepWakeUp.temperature = cct;
-                }}
-                onBrightnessChange={brightness => {
-                  state.sleepWakeUp.brightness = brightness;
-                }}
-                onBrightnessChangeComplete={brightness => {
-                  state.sleepWakeUp.brightness = brightness;
-                }}
-              />
-            </Card>
-          )}
-        </View>
-        <Spacer />
-        {/* Settings */}
-        <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>
-            {I18n.getLang('timeschedule_add_schedule_subheadline4_text')}
-          </Text>
-          <Spacer />
-          <Text>
-            {I18n.getLang(
-              props.isSleep
-                ? 'add_sleepschedule_one_source_settings_text'
-                : 'add_wakeupschedule_settings_text'
-            )}
-          </Text>
-          <LdvPickerView
-            style={styles.picker}
-            hour={toFixedString(Math.trunc((state.sleepWakeUp.delay * 5) / 60), 2)}
-            minute={toFixedString((state.sleepWakeUp.delay * 5) % 60, 2)}
-            minutesStep={5}
-            setHour={v => {
-              const m = (state.sleepWakeUp.delay * 5) % 60;
-              state.sleepWakeUp.delay = (Number(v) * 60 + m) / 5;
-            }}
-            setMinute={v => {
-              const h = Math.trunc((state.sleepWakeUp.delay * 5) / 60);
-              state.sleepWakeUp.delay = (h * 60 + Number(v)) / 5;
-            }}
-            unit={['h', 'min']}
-            maxHour={3}
-          />
-          <Text>
-            {I18n.formatValue(
-              props.isSleep
-                ? 'add_sleepschedule_one_source_settings_text2'
-                : 'add_wakeupschedule_settings_text2',
-              `${convertMinutesTo12HourFormat(state.sleepWakeUp.startTime, is24HourClock)}`
-            )}
-          </Text>
-          <Spacer />
-          {!props.isSleep && (
-            <View style={{ marginHorizontal: -cx(16), marginTop: -cx(20) }}>
-              <LdvSwitch
-                title={I18n.getLang('add_wakeupschedule_settings_text3')}
-                enable={state.sleepWakeUp.last > 0}
-                color="#fff"
-                colorAlpha={1}
-                setEnable={v => {
-                  state.sleepWakeUp.last = v ? 1 : 0;
-                }}
-              />
-            </View>
-          )}
-          {state.sleepWakeUp.last > 0 && (
-            <>
-              <Text style={{ fontSize: cx(14) }}>
-                {I18n.getLang('add_wakeupschedule_settings_text4')}
-              </Text>
-              <LdvPickerView
-                style={styles.picker}
-                hour={toFixedString(Math.trunc((state.sleepWakeUp.last * 5) / 60), 2)}
-                minute={toFixedString((state.sleepWakeUp.last * 5) % 60, 2)}
-                minutesStep={5}
-                setHour={v => {
-                  const m = (state.sleepWakeUp.last * 5) % 60;
-                  if (Number(v) === 0 && m === 0) {
-                    state.sleepWakeUp.last = 1;
-                  } else {
-                    state.sleepWakeUp.last = (Number(v) * 60 + m) / 5;
-                  }
-                }}
-                setMinute={v => {
-                  const h = Math.trunc((state.sleepWakeUp.last * 5) / 60);
-                  if (Number(v) === 0 && h === 0) {
-                    state.sleepWakeUp.last = 1;
-                  } else {
-                    state.sleepWakeUp.last = (h * 60 + Number(v)) / 5;
-                  }
-                }}
-                unit={['h', 'min']}
-                maxHour={3}
-              />
-              <Text>
-                {I18n.formatValue(
-                  'add_wakeupschedule_settings_text5',
-                  `${convertMinutesTo12HourFormat(
-                    getRangeTime(state.sleepWakeUp.endTime + state.sleepWakeUp.last * 5),
-                    is24HourClock
-                  )}`
-                )}
-              </Text>
-              <Spacer />
-            </>
-          )}
-        </View>
-        {/* Summary */}
-        <Summary
-          frequency={loopText(state.sleepWakeUp.weeks)}
-          time={`${convertMinutesTo12HourFormat(
-            state.sleepWakeUp.startTime,
-            is24HourClock
-          )} - ${convertMinutesTo12HourFormat(state.sleepWakeUp.endTime, is24HourClock)}`}
-          actions={(
-            <View>
-              <Text style={{ fontSize: cx(12), color: '#000000' }}>
-                {I18n.getLang(
-                  !props.isSleep ? 'feature_summary_action_txt_11' : 'feature_summary_action_txt_10'
-                )}
-              </Text>
-              <View style={styles.filletCorner}>
-                <Text style={styles.rightTitle}>
-                  {props.isMixLight ? (state.sleepWakeUp.isColorMode ? props.applyForList[1].key : props.applyForList[0].key) : props.applyForList[0].key}
-                </Text>
-              </View>
-              <Spacer height={cx(10)} />
-              <Text style={{ fontSize: cx(12), color: '#000000' }}>
-                {I18n.getLang(
-                  props.isSleep
-                    ? 'feature_summary_action_txt_2'
-                    : state.sleepWakeUp.last
-                      ? 'feature_summary_action_txt_12'
-                      : 'feature_summary_action_txt_1'
-                )}
-              </Text>
-              <View style={styles.filletCorner}>
-                <Text style={styles.rightTitle}>
-                  {convertMinutesTo12HourFormat(
-                    props.isSleep
-                      ? state.sleepWakeUp.endTime
-                      : getRangeTime(state.sleepWakeUp.endTime + state.sleepWakeUp.last * 5),
-                    is24HourClock
-                  )}
-                </Text>
-              </View>
-            </View>
-          )}
-        />
-        <Spacer />
-        {/* Delete btn */}
-        {props.mode === 'edit' && (
-          <View style={styles.cardContainer}>
-            <DeleteButton
-              text={I18n.getLang('edit_timeschedule_bttn_text')}
-              onPress={async () => {
-                showDialog({
-                  method: 'confirm',
-                  title: I18n.getLang(
-                    props.isSleep
-                      ? 'cancel_dialog_delete_item_sleepschedule_titel'
-                      : 'cancel_dialog_delete_item_wakeupschedule_titel'
-                  ),
-                  subTitle: I18n.getLang(
-                    props.isSleep
-                      ? 'cancel_dialog_delete_item_sleepschedule_description'
-                      : 'cancel_dialog_delete_item_wakeupschedule_description'
-                  ),
-                  onConfirm: async (_, { close }) => {
-                    close();
-                    if (state.loading) return;
-                    state.loading = true;
-                    const res = await props.modDeleteTimeSchedule(
-                      'del',
-                      state.sleepWakeUp.isSleep,
-                      state.sleepWakeUp
-                    );
-                    state.loading = false;
-                    if (res.success) {
-                      navigation.goBack();
-                    }
-                  },
-                });
-              }}
-            />
-          </View>
-        )}
-        <Spacer />
-      </ScrollView>
-    </Page>
-  );
-};
-
-const styles = StyleSheet.create({
-  cardContainer: {
-    marginHorizontal: cx(24),
-  },
-  textField: {
-    marginHorizontal: cx(24),
-  },
-  picker: {
-    marginHorizontal: cx(24),
-    marginVertical: cx(15),
-    color: 'rgb(35,35,38)',
-  },
-  week: {},
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    marginBottom: cx(10),
-  },
-  skillListItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    height: cx(30),
-    alignItems: 'center',
-    marginVertical: cx(5),
-  },
-  summaryContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    marginBottom: cx(10),
-    marginHorizontal: cx(24),
-  },
-  summaryImg: {
-    height: cx(12),
-    width: cx(12),
-    tintColor: '#000',
-  },
-  summaryLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    minWidth: cx(90),
-  },
-  leftTitle: {
-    fontSize: cx(14),
-    color: '#000',
-  },
-  summaryRight: {
-    flexDirection: 'column',
-    marginLeft: cx(21),
-    borderRadius: cx(16),
-    backgroundColor: '#cbcbcb',
-  },
-  rightItem: {
-    paddingHorizontal: cx(12),
-    color: '#000',
-  },
-  rightTitle: {
-    paddingLeft: cx(12),
-    paddingRight: cx(12),
-    fontSize: cx(10),
-    textAlign: 'center',
-    alignSelf: 'flex-start',
-    color: '#000'
-  },
-  filletCorner: {
-    flexDirection: 'row',
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(16),
-    alignSelf: 'flex-start',
-  },
-});
-
-export default SleepWakeUpDetailPage;
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import Page from '@ledvance/base/src/components/Page';
+import I18n from '@ledvance/base/src/i18n';
+import res from '@ledvance/base/src/res';
+import { TimerPicker, Utils } from 'tuya-panel-kit';
+import { useReactive, useUpdateEffect } from 'ahooks';
+import TextField from '@ledvance/base/src/components/TextField';
+import LdvPickerView from '@ledvance/base/src/components/ldvPickerView';
+import LdvWeekView from '@ledvance/base/src/components/weekSelect';
+import {
+  convertMinutesTo12HourFormat,
+  loopText,
+  showDialog,
+} from '@ledvance/base/src/utils/common';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import DeleteButton from '@ledvance/base/src/components/DeleteButton';
+import { SleepWakeUpPageRouteParams } from './SleepWakeUpPage';
+import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
+import { cloneDeep, isEqual } from 'lodash';
+import { SleepUIItem, WakeUpUIItem } from './Interface';
+import { useSystemTimeFormate } from '@ledvance/base/src/models/modules/NativePropsSlice';
+import { Result } from '@ledvance/base/src/models/modules/Result';
+import LampAdjustView from '@ledvance/base/src/components/LampAdjustView';
+import Card from '@ledvance/base/src/components/Card';
+import { hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils';
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
+import { useParams } from '@ledvance/base/src/hooks/Hooks';
+import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView';
+import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView';
+import Summary from '@ledvance/base/src/components/Summary';
+
+const { convertX: cx } = Utils.RatioUtils;
+const { toFixedString } = Utils.NumberUtils;
+
+interface SleepWakeUpDetailPageProps extends SleepWakeUpPageRouteParams {
+  mode: 'add' | 'edit';
+  isSleep: boolean;
+  scheduleItem: any;
+  modDeleteTimeSchedule: (
+    mode: 'add' | 'edit' | 'del',
+    isSleep: boolean,
+    sleepWakeUp: SleepUIItem | WakeUpUIItem
+  ) => Promise<Result<any>>;
+}
+
+const SleepWakeUpDetailPage = () => {
+  const navigation = useNavigation();
+  const props = useParams<SleepWakeUpDetailPageProps>();
+  const is24HourClock = useSystemTimeFormate();
+  const state = useReactive({
+    sleepWakeUp: cloneDeep(props.scheduleItem) as WakeUpUIItem,
+    loading: false,
+  });
+
+  useEffect(() => {
+    if (props.mode !== 'edit') return;
+    if (state.sleepWakeUp.isColorMode) {
+      state.sleepWakeUp.brightness = 100;
+    } else {
+      state.sleepWakeUp.s = 100;
+      state.sleepWakeUp.v = 100;
+    }
+  }, []);
+
+  useUpdateEffect(() => {
+    if (state.sleepWakeUp.delay === 0) {
+      state.sleepWakeUp.delay = 1;
+    }
+    if (state.sleepWakeUp.delay > 24) {
+      state.sleepWakeUp.delay = 24;
+    }
+  }, [state.sleepWakeUp.delay]);
+
+  useUpdateEffect(() => {
+    if (state.sleepWakeUp.last > 24) {
+      state.sleepWakeUp.last = 24;
+    }
+  }, [state.sleepWakeUp.last]);
+
+  useUpdateEffect(() => {
+    const { startTime, endTime, delay, isSleep } = state.sleepWakeUp;
+    if (isSleep) {
+      state.sleepWakeUp.hour = Math.trunc(startTime / 60);
+      state.sleepWakeUp.minute = startTime % 60;
+      const endMin = startTime + delay * 5;
+      state.sleepWakeUp.endTime = endMin > 1440 ? endMin - 1440 : endMin;
+    } else {
+      state.sleepWakeUp.hour = Math.trunc(endTime / 60);
+      state.sleepWakeUp.minute = endTime % 60;
+      const startMin = endTime - delay * 5;
+      state.sleepWakeUp.startTime = startMin < 0 ? startMin + 1440 : startMin;
+    }
+  }, [state.sleepWakeUp.startTime, state.sleepWakeUp.delay, state.sleepWakeUp.endTime]);
+
+  const getRangeTime = (time: number, isStart?: boolean) => {
+    if (isStart) {
+      return time < 0 ? 1440 + time : time;
+    } else {
+      return time > 1440 ? time - 1440 : time;
+    }
+  };
+
+  const getBlockColor = useCallback(() => {
+    if (state.sleepWakeUp.isColorMode) {
+      const s = Math.round(mapFloatToRange(state.sleepWakeUp.s / 100, 30, 100));
+      return hsv2Hex(state.sleepWakeUp.h, s, 100);
+    }
+    return cctToColor(state.sleepWakeUp.temperature);
+  }, [state.sleepWakeUp]);
+
+  const checkItemChanged = useMemo(() =>{
+    const { isColorMode, h, s, v, brightness, temperature } = state.sleepWakeUp;
+    const currentSleepWakeUp = {
+      ...state.sleepWakeUp,
+      h: isColorMode ? h : 0,
+      s: isColorMode ? s : 0,
+      v: isColorMode ? v : 0,
+      brightness: isColorMode ? 0 : brightness,
+      temperature: isColorMode ? 0 : temperature,
+    };
+    return isEqual(props.scheduleItem, props.mode === 'add' ? state.sleepWakeUp : currentSleepWakeUp);
+  }, [props.scheduleItem, JSON.stringify(state.sleepWakeUp), props.mode])
+
+  const canSubmit = useMemo(() => {
+    return state.sleepWakeUp.name?.length > 0 && state.sleepWakeUp.name?.length < 33 && !checkItemChanged
+  }, [state.sleepWakeUp.name, checkItemChanged]);
+
+  const mixLightCard = useMemo(() => {
+    const applyList = props.applyForList.map(item => {
+      if (item.type === 'mainLight' && state.sleepWakeUp.isColorMode) {
+        return {
+          ...item,
+          enable: false,
+        };
+      }
+      if (item.type === 'secondaryLight' && !state.sleepWakeUp.isColorMode) {
+        return {
+          ...item,
+          enable: false,
+        };
+      }
+      return item;
+    });
+    return (
+      <View>
+        {applyList.map(item => (
+          <View key={item.dp}>
+            <Card style={{ marginHorizontal: cx(24) }}>
+              <LdvSwitch
+                title={item.key}
+                color={'#fff'}
+                colorAlpha={1}
+                enable={
+                  item.type === 'mainLight'
+                    ? !state.sleepWakeUp.isColorMode
+                    : state.sleepWakeUp.isColorMode
+                }
+                setEnable={(enable: boolean) => {
+                  state.sleepWakeUp.isColorMode = item.type === 'mainLight' ? !enable : enable;
+                }}
+              />
+              {item.type === 'mainLight' && !state.sleepWakeUp.isColorMode ? (
+                <View>
+                  <ColorTempAdjustView
+                    isSupportBrightness={!!props.isSupportBrightness}
+                    isSupportTemperature={!!props.isSupportTemperature}
+                    colorTemp={state.sleepWakeUp.temperature}
+                    brightness={state.sleepWakeUp.brightness}
+                    onBrightnessChangeComplete={bright => {
+                      state.sleepWakeUp.brightness = bright;
+                    }}
+                    onCCTChangeComplete={cct => {
+                      state.sleepWakeUp.temperature = cct;
+                    }}
+                  />
+                  <Spacer height={cx(16)} />
+                </View>
+              ) : item.type === 'secondaryLight' && state.sleepWakeUp.isColorMode ? (
+                <View>
+                  <ColorAdjustView
+                    h={state.sleepWakeUp.h}
+                    s={state.sleepWakeUp.s}
+                    v={state.sleepWakeUp.v}
+                    reserveSV={true}
+                    minSaturation={1}
+                    onHSVChangeComplete={(h, s, v) => {
+                      state.sleepWakeUp.h = h;
+                      state.sleepWakeUp.s = s;
+                      state.sleepWakeUp.v = v;
+                    }}
+                  />
+                  <Spacer />
+                </View>
+              ) : null}
+            </Card>
+            <Spacer />
+          </View>
+        ))}
+      </View>
+    );
+  }, [props.applyForList, JSON.stringify(state.sleepWakeUp)]);
+
+  return (
+    <Page
+      backText={I18n.getLang('add_sleepschedule_one_source_system_back_text')}
+      showBackDialog={!checkItemChanged}
+      loading={state.loading}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang(
+        props.isSleep
+          ? 'cancel_dialog_leave_unsaved_sleepschedule_note'
+          : 'cancel_dialog_leave_unsaved_wakeupschedule_note'
+      )}
+      rightButtonIcon={canSubmit ? res.ic_check : res.ic_uncheck}
+      rightButtonIconClick={async () => {
+        if (!canSubmit || state.loading) return;
+        state.loading = true;
+        if (state.sleepWakeUp.isColorMode) {
+          state.sleepWakeUp.brightness = 0;
+          state.sleepWakeUp.temperature = 0;
+        } else {
+          state.sleepWakeUp.h = 0;
+          state.sleepWakeUp.s = 0;
+          state.sleepWakeUp.v = 0;
+        }
+        state.sleepWakeUp.enable = true
+        const res = await props.modDeleteTimeSchedule(
+          props.mode,
+          state.sleepWakeUp.isSleep,
+          state.sleepWakeUp
+        );
+        state.loading = false;
+        if (res.success) {
+          navigation.goBack();
+        }
+      }}
+      headlineText={I18n.getLang(
+        props.isSleep
+          ? props.mode === 'add'
+            ? 'add_sleepschedule_one_source_headline_text'
+            : 'edit_sleepschedule_headline_text'
+          : props.mode === 'add'
+            ? 'add_wakeupschedule_one_source_headline_text'
+            : 'edit_wakeupschedule_headline_text'
+      )}
+    >
+      <ScrollView
+        nestedScrollEnabled={true}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+      >
+        <TextField
+          style={styles.cardContainer}
+          value={state.sleepWakeUp.name}
+          showError={state.sleepWakeUp.name?.length > 32}
+          maxLength={33}
+          errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}
+          placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
+          onChangeText={(t: string) => {
+            state.sleepWakeUp.name = t;
+          }}
+        />
+        {/* pick */}
+        <TimerPicker
+          itemTextColor="#aeadb5"
+          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
+          is12Hours={!is24HourClock}
+          singlePicker={true}
+          amText={I18n.getLang('manage_user_calendar_label_am')}
+          pmText={I18n.getLang('manage_user_calendar_label_pm')}
+          startTime={props.isSleep ? state.sleepWakeUp.startTime : state.sleepWakeUp.endTime}
+          symbol={''}
+          onTimerChange={time => {
+            if (props.isSleep) {
+              state.sleepWakeUp.startTime = time;
+            } else {
+              state.sleepWakeUp.endTime = time;
+            }
+          }}
+        />
+
+        {/* week */}
+        <View style={styles.week}>
+          <LdvWeekView
+            value={state.sleepWakeUp.weeks}
+            onSelect={(weekIdx: number) => {
+              state.sleepWakeUp.weeks = state.sleepWakeUp.weeks.map((week, idx) => {
+                if (idx === weekIdx - 1) {
+                  return week === 1 ? 0 : 1;
+                }
+                return week;
+              });
+            }}
+          />
+          <Spacer />
+          <Text style={{ marginHorizontal: cx(24) }}>{loopText(state.sleepWakeUp.weeks)}</Text>
+          <Spacer />
+        </View>
+
+        {/* Apply for */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>
+            {I18n.getLang('timeschedule_add_schedule_subheadline_text')}
+          </Text>
+          <View
+            style={{
+              backgroundColor: '#f6f6f6',
+              borderRadius: 4,
+              minHeight: cx(50),
+              flex: 1,
+              justifyContent: 'center',
+            }}
+          >
+            <View
+              style={{
+                marginHorizontal: cx(8),
+                marginTop: cx(8),
+                borderRadius: 4,
+              }}
+            >
+              {props.applyForList.map(apply => (
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    backgroundColor: '#fff',
+                    marginBottom: cx(8),
+                  }}
+                  key={apply.dp}
+                >
+                  <Text
+                    style={{
+                      color: '#000',
+                      fontSize: cx(14),
+                      marginHorizontal: cx(6),
+                      marginVertical: cx(9),
+                    }}
+                  >
+                    {apply.key}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          </View>
+          <Spacer />
+        </View>
+
+        {/* Device state */}
+        <View>
+          <Text style={[styles.itemTitle, styles.cardContainer]}>
+            {I18n.getLang('timeschedule_add_schedule_subheadline2_text')}
+          </Text>
+          {props.isMixLight ? (
+            mixLightCard
+          ) : (
+            <Card style={styles.cardContainer}>
+              <LdvSwitch
+                title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+                color={getBlockColor()}
+                colorAlpha={1}
+                enable={false}
+                showSwitch={false}
+                setEnable={() => { }}
+              />
+              <LampAdjustView
+                isSupportColor={!!props.isSupportColor}
+                isSupportTemperature={!!props.isSupportTemperature}
+                isSupportBrightness={!!props.isSupportBrightness}
+                isColorMode={state.sleepWakeUp.isColorMode}
+                reserveSV={true}
+                setIsColorMode={() => {
+                  state.sleepWakeUp.isColorMode = !state.sleepWakeUp.isColorMode;
+                }}
+                h={state.sleepWakeUp.h}
+                s={state.sleepWakeUp.s}
+                v={state.sleepWakeUp.v}
+                onHSVChange={(h, s, v) => {
+                  state.sleepWakeUp.h = h;
+                  state.sleepWakeUp.s = s;
+                  state.sleepWakeUp.v = v;
+                }}
+                onHSVChangeComplete={(h, s, v) => {
+                  state.sleepWakeUp.h = h;
+                  state.sleepWakeUp.s = s;
+                  state.sleepWakeUp.v = v;
+                }}
+                colorTemp={state.sleepWakeUp.temperature}
+                brightness={state.sleepWakeUp.brightness}
+                onCCTChange={cct => {
+                  state.sleepWakeUp.temperature = cct;
+                }}
+                onCCTChangeComplete={cct => {
+                  state.sleepWakeUp.temperature = cct;
+                }}
+                onBrightnessChange={brightness => {
+                  state.sleepWakeUp.brightness = brightness;
+                }}
+                onBrightnessChangeComplete={brightness => {
+                  state.sleepWakeUp.brightness = brightness;
+                }}
+              />
+            </Card>
+          )}
+        </View>
+        <Spacer />
+        {/* Settings */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>
+            {I18n.getLang('timeschedule_add_schedule_subheadline4_text')}
+          </Text>
+          <Spacer />
+          <Text>
+            {I18n.getLang(
+              props.isSleep
+                ? 'add_sleepschedule_one_source_settings_text'
+                : 'add_wakeupschedule_settings_text'
+            )}
+          </Text>
+          <LdvPickerView
+            style={styles.picker}
+            hour={toFixedString(Math.trunc((state.sleepWakeUp.delay * 5) / 60), 2)}
+            minute={toFixedString((state.sleepWakeUp.delay * 5) % 60, 2)}
+            minutesStep={5}
+            setHour={v => {
+              const m = (state.sleepWakeUp.delay * 5) % 60;
+              state.sleepWakeUp.delay = (Number(v) * 60 + m) / 5;
+            }}
+            setMinute={v => {
+              const h = Math.trunc((state.sleepWakeUp.delay * 5) / 60);
+              state.sleepWakeUp.delay = (h * 60 + Number(v)) / 5;
+            }}
+            unit={['h', 'min']}
+            maxHour={3}
+          />
+          <Text>
+            {I18n.formatValue(
+              props.isSleep
+                ? 'add_sleepschedule_one_source_settings_text2'
+                : 'add_wakeupschedule_settings_text2',
+              `${convertMinutesTo12HourFormat(state.sleepWakeUp.startTime, is24HourClock)}`
+            )}
+          </Text>
+          <Spacer />
+          {!props.isSleep && (
+            <View style={{ marginHorizontal: -cx(16), marginTop: -cx(20) }}>
+              <LdvSwitch
+                title={I18n.getLang('add_wakeupschedule_settings_text3')}
+                enable={state.sleepWakeUp.last > 0}
+                color="#fff"
+                colorAlpha={1}
+                setEnable={v => {
+                  state.sleepWakeUp.last = v ? 1 : 0;
+                }}
+              />
+            </View>
+          )}
+          {state.sleepWakeUp.last > 0 && (
+            <>
+              <Text style={{ fontSize: cx(14) }}>
+                {I18n.getLang('add_wakeupschedule_settings_text4')}
+              </Text>
+              <LdvPickerView
+                style={styles.picker}
+                hour={toFixedString(Math.trunc((state.sleepWakeUp.last * 5) / 60), 2)}
+                minute={toFixedString((state.sleepWakeUp.last * 5) % 60, 2)}
+                minutesStep={5}
+                setHour={v => {
+                  const m = (state.sleepWakeUp.last * 5) % 60;
+                  if (Number(v) === 0 && m === 0) {
+                    state.sleepWakeUp.last = 1;
+                  } else {
+                    state.sleepWakeUp.last = (Number(v) * 60 + m) / 5;
+                  }
+                }}
+                setMinute={v => {
+                  const h = Math.trunc((state.sleepWakeUp.last * 5) / 60);
+                  if (Number(v) === 0 && h === 0) {
+                    state.sleepWakeUp.last = 1;
+                  } else {
+                    state.sleepWakeUp.last = (h * 60 + Number(v)) / 5;
+                  }
+                }}
+                unit={['h', 'min']}
+                maxHour={3}
+              />
+              <Text>
+                {I18n.formatValue(
+                  'add_wakeupschedule_settings_text5',
+                  `${convertMinutesTo12HourFormat(
+                    getRangeTime(state.sleepWakeUp.endTime + state.sleepWakeUp.last * 5),
+                    is24HourClock
+                  )}`
+                )}
+              </Text>
+              <Spacer />
+            </>
+          )}
+        </View>
+        {/* Summary */}
+        <Summary
+          frequency={loopText(state.sleepWakeUp.weeks)}
+          time={`${convertMinutesTo12HourFormat(
+            state.sleepWakeUp.startTime,
+            is24HourClock
+          )} - ${convertMinutesTo12HourFormat(state.sleepWakeUp.endTime, is24HourClock)}`}
+          actions={(
+            <View>
+              <Text style={{ fontSize: cx(12), color: '#000000' }}>
+                {I18n.getLang(
+                  !props.isSleep ? 'feature_summary_action_txt_11' : 'feature_summary_action_txt_10'
+                )}
+              </Text>
+              <View style={styles.filletCorner}>
+                <Text style={styles.rightTitle}>
+                  {props.isMixLight ? (state.sleepWakeUp.isColorMode ? props.applyForList[1].key : props.applyForList[0].key) : props.applyForList[0].key}
+                </Text>
+              </View>
+              <Spacer height={cx(10)} />
+              <Text style={{ fontSize: cx(12), color: '#000000' }}>
+                {I18n.getLang(
+                  props.isSleep
+                    ? 'feature_summary_action_txt_2'
+                    : state.sleepWakeUp.last
+                      ? 'feature_summary_action_txt_12'
+                      : 'feature_summary_action_txt_1'
+                )}
+              </Text>
+              <View style={styles.filletCorner}>
+                <Text style={styles.rightTitle}>
+                  {convertMinutesTo12HourFormat(
+                    props.isSleep
+                      ? state.sleepWakeUp.endTime
+                      : getRangeTime(state.sleepWakeUp.endTime + state.sleepWakeUp.last * 5),
+                    is24HourClock
+                  )}
+                </Text>
+              </View>
+            </View>
+          )}
+        />
+        <Spacer />
+        {/* Delete btn */}
+        {props.mode === 'edit' && (
+          <View style={styles.cardContainer}>
+            <DeleteButton
+              text={I18n.getLang('edit_timeschedule_bttn_text')}
+              onPress={async () => {
+                showDialog({
+                  method: 'confirm',
+                  title: I18n.getLang(
+                    props.isSleep
+                      ? 'cancel_dialog_delete_item_sleepschedule_titel'
+                      : 'cancel_dialog_delete_item_wakeupschedule_titel'
+                  ),
+                  subTitle: I18n.getLang(
+                    props.isSleep
+                      ? 'cancel_dialog_delete_item_sleepschedule_description'
+                      : 'cancel_dialog_delete_item_wakeupschedule_description'
+                  ),
+                  onConfirm: async (_, { close }) => {
+                    close();
+                    if (state.loading) return;
+                    state.loading = true;
+                    const res = await props.modDeleteTimeSchedule(
+                      'del',
+                      state.sleepWakeUp.isSleep,
+                      state.sleepWakeUp
+                    );
+                    state.loading = false;
+                    if (res.success) {
+                      navigation.goBack();
+                    }
+                  },
+                });
+              }}
+            />
+          </View>
+        )}
+        <Spacer />
+      </ScrollView>
+    </Page>
+  );
+};
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    marginHorizontal: cx(24),
+  },
+  textField: {
+    marginHorizontal: cx(24),
+  },
+  picker: {
+    marginHorizontal: cx(24),
+    marginVertical: cx(15),
+    color: 'rgb(35,35,38)',
+  },
+  week: {},
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+    marginBottom: cx(10),
+  },
+  skillListItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    height: cx(30),
+    alignItems: 'center',
+    marginVertical: cx(5),
+  },
+  summaryContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    marginBottom: cx(10),
+    marginHorizontal: cx(24),
+  },
+  summaryImg: {
+    height: cx(12),
+    width: cx(12),
+    tintColor: '#000',
+  },
+  summaryLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: cx(90),
+  },
+  leftTitle: {
+    fontSize: cx(14),
+    color: '#000',
+  },
+  summaryRight: {
+    flexDirection: 'column',
+    marginLeft: cx(21),
+    borderRadius: cx(16),
+    backgroundColor: '#cbcbcb',
+  },
+  rightItem: {
+    paddingHorizontal: cx(12),
+    color: '#000',
+  },
+  rightTitle: {
+    paddingLeft: cx(12),
+    paddingRight: cx(12),
+    fontSize: cx(10),
+    textAlign: 'center',
+    alignSelf: 'flex-start',
+    color: '#000'
+  },
+  filletCorner: {
+    flexDirection: 'row',
+    backgroundColor: '#cbcbcb',
+    borderRadius: cx(16),
+    alignSelf: 'flex-start',
+  },
+});
+
+export default SleepWakeUpDetailPage;