@ledvance/ui-biz-bundle 1.1.141 → 1.1.143

package/src/newModules/biorhythm/BiorhythmPage.tsx

@@ -1,698 +1,653 @@
-import React, { useCallback, useEffect, useMemo } from 'react'
-import { FlatList, Image, Linking, ScrollView, Switch, Text, TouchableOpacity, View } from 'react-native'
-import { useNavigation } from '@react-navigation/native'
-import { useDebounceFn, useReactive, useUpdateEffect } from 'ahooks'
-import {
-  BiorhythmBean,
-  BiorhythmGradientType,
-  colorTemperatureValue,
-  getDefBiorhythmUIState,
-  Plan,
-} from './BiorhythmBean'
-import { Dialog, Modal, Utils } from 'tuya-panel-kit'
-import { cloneDeep, sortBy } from 'lodash'
-import iconList from './iconListData'
-import pIdList from './pIdList'
-import {
-  useDeviceInfo,
-  useSystemTimeFormate,
-} from '@ledvance/base/src/models/modules/NativePropsSlice'
-import I18n from '@ledvance/base/src/i18n'
-import res from '@ledvance/base/src/res'
-import { ui_biz_routerKey } from "../../navigation/Routers";
-import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
-import { BiorhythmEditPageParams } from './BiorhythmEditPage'
-import { useBiorhythm } from './BiorhythmActions'
-import { convertMinutesTo12HourFormat, showDialog as showCommonDialog } from '@ledvance/base/src/utils/common'
-import Page from '@ledvance/base/src/components/Page'
-import Card from '@ledvance/base/src/components/Card'
-import Spacer from '@ledvance/base/src/components/Spacer'
-import DeleteButton from '@ledvance/base/src/components/DeleteButton'
-import { useParams } from '@ledvance/base/src/hooks/Hooks'
-import ThemeType from '@ledvance/base/src/config/themeType'
-import { useConflictTask } from 'hooks/DeviceDpStateHooks'
-import RhythmsCircle from './circular/RhythmsCircle'
-
-const cx = Utils.RatioUtils.convertX
-const { withTheme } = Utils.ThemeUtils
-const width = Utils.RatioUtils.width
-
-interface UIState extends BiorhythmBean {
-  showGradientTypeSelectModal: boolean;
-  flag: symbol;
-  weekString: string,
-  timeSchedule: any[]
-  loading: boolean
-}
-
-export interface BiorhythmPageParams {
-  biorhythmDpCode: string
-  conflictDps: {
-    randomTimeDpCode?: string
-    fixedTimeDpCode?: string
-    sleepDpCode?: string
-    wakeUpDpCode?: string
-  }
-  isSupportTemperature: boolean
-  isSupportBrightness: boolean
-  isMixLight?: boolean
-}
-
-const BiorhythmPage = (props: { theme?: ThemeType }) => {
-  const params = useParams<BiorhythmPageParams>()
-  const navigation = useNavigation()
-  const [biorhythm, setBiorhythm] = useBiorhythm(params.biorhythmDpCode)
-  const deviceInfo = useDeviceInfo()
-  const { productId } = deviceInfo
-  const is24Hour = useSystemTimeFormate()
-  const devicesJudge = pIdList.some(val => val === productId)
-  const [checkConflict, resolveConflict] = useConflictTask(params.conflictDps)
-
-  const state = useReactive<UIState>({
-    ...biorhythm,
-    showGradientTypeSelectModal: false,
-    flag: Symbol(),
-    weekString: '',
-    timeSchedule: [],
-    loading: false
-  })
-
-  const timeImg = useMemo(() => {
-    if (is24Hour) {
-      return devicesJudge ? res.ic_warning_amber_sun : res.ic_warning_amber_new
-    } else {
-      return devicesJudge ? res.ic_warning_amber_sun_12 : res.ic_warning_amber_new_12
-    }
-  }, [is24Hour, devicesJudge])
-
-  const showGradientTypeSelectModal = useCallback((show: boolean) => {
-    state.showGradientTypeSelectModal = show
-  }, [])
-
-  const onPlanEdited = useCallback((isAdd: boolean, newPlan: Plan) => {
-    if (isAdd) {
-      state.planList.push(newPlan)
-      state.planList = sortBy(state.planList, p => p.time)
-    } else {
-      state.planList = state.planList.map(plan => (plan.index === newPlan.index ? newPlan : plan))
-    }
-    state.flag = Symbol()
-  }, [])
-
-  const onPlanDelete = useCallback((id: number) => {
-    state.planList = state.planList.filter(plan => plan.index !== id)
-    state.flag = Symbol()
-  }, [])
-
-  const requestSetBiorhythm = useCallback(async (pushFeature: boolean = true) => {
-    state.loading = true
-    const planList = state.planList?.map(item => { return { ...item, icon: `${item.icon}` } })
-      .sort((a, b) => a.time - b.time);
-    const res = await setBiorhythm(cloneDeep({ ...state, planList }), pushFeature)
-    state.loading = false
-    if (res.success) {
-      console.log('设置生物节律 OK')
-    }
-  }, [])
-
-  useUpdateEffect(() => {
-    if (state.planList?.length === 0) {
-      const data = getDefBiorhythmUIState()
-      data.planList = data.planList?.map(item => {
-        return { ...item, icon: `${item.icon}` }
-      })
-      setBiorhythm(cloneDeep(data)).then()
-    }
-  }, [state.planList])
-
-  const setTimer = value => {
-    switch (value) {
-      case 'Sunrise':
-        return I18n.getLang('bio_ryhthm_default_field_text')
-      case 'Wake Up':
-        return I18n.getLang('bio_ryhthm_default_field_text2')
-      case 'Sunlight':
-        return I18n.getLang('bio_ryhthm_default_field_text3')
-      case 'Comfortable':
-        return I18n.getLang('bio_ryhthm_default_field_text4')
-      case 'Night light':
-        return I18n.getLang('bio_ryhthm_default_field_text5')
-      default:
-        return value
-    }
-  }
-
-  const minimumEnable = useCallback((plan: Plan) => {
-    let enable = false
-    state.planList.filter(p => p.index !== plan.index).forEach(item => {
-      const diff = Math.abs(plan.time - item.time)
-      if (diff < 15) enable = true
-    })
-    return enable
-  }, [state.planList])
-
-  const nameRepeat = useCallback((plan: Plan) => {
-    return !!state.planList.filter(p => p.index !== plan.index).find(p => p.name === plan.name)
-  }, [state.planList])
-
-  const showDeleteBtn = useMemo(() => {
-    return state.planList?.length > 1
-  }, [state.planList?.length])
-
-  const { run } = useDebounceFn(requestSetBiorhythm, { wait: 300 })
-
-  useUpdateEffect(() => {
-    run()
-  }, [state.flag])
-
-  const replaceImg = (img) => {
-    const item = iconList?.find(val => val.id === Number(img))
-    switch (img) {
-      case 'rhythm_icon1':
-      case '31':
-        return { icon: res.biorhythom_icon1, iconId: 1 }
-      case 'rhythm_icon2':
-      case '33':
-        return { icon: res.biorhythom_icon5, iconId: 5 }
-      case 'rhythm_icon3':
-      case '35':
-        return { icon: res.biorhythom_icon2, iconId: 2 }
-      case 'rhythm_icon4':
-      case '32':
-        return { icon: res.biorhythom_icon9, iconId: 9 }
-      case 'rhythm_icon12':
-      case '39':
-        return { icon: res.biorhythom_icon3, iconId: 3 }
-      default:
-        return { icon: item?.icon, iconId: item?.id }
-    }
-  }
-
-  useEffect(() => {
-    const weeks = biorhythm.repeatPeriod.filter(it => it.enabled).map(it => it.title)
-
-    if (weeks.length > 0) {
-      if (weeks.length === 7) {
-        state.weekString = I18n.getLang('motion_detection_time_schedule_notifications_field_weekdays_text4')
-      } else {
-        state.weekString = I18n.formatValue('timeschedule_add_schedule_text', weeks.join(', '))
-      }
-    } else {
-      state.weekString = I18n.getLang('motion_detection_time_schedule_notifications_field_weekdays_text2')
-    }
-  }, [JSON.stringify(biorhythm.repeatPeriod)])
-
-  useUpdateEffect(() => {
-    console.log('Redux 生物节律数据更新', biorhythm)
-    const planList = biorhythm.planList?.map(item => {
-      return {
-        ...item,
-        icon: replaceImg(item?.iconId || item?.icon)?.icon,
-        iconId: replaceImg(item?.iconId || item?.icon)?.iconId,
-      }
-    })
-    state.enable = biorhythm.enable
-    state.gradient = biorhythm.gradient
-    state.repeatPeriod = biorhythm.repeatPeriod
-    state.planList = planList
-
-  }, [JSON.stringify(biorhythm)])
-
-
-  const setImg = (id) => {
-    const imgIcon = iconList?.find(val => val?.id === Number(id))?.icon
-    return imgIcon || ''
-  }
-
-  const openLink = () => {
-    const url = I18n.getLang('biorhythm_product_link') // 需要打开的链接
-    Linking.openURL(url).catch((error) => console.error('无法打开链接:', error))
-  }
-
-  const sunHomeText = string => {
-    const text = string.split('SUN@HOME')
-    return text?.length === 1 && <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor }}>{text[0]}</Text> ||
-        <Text style={{
-          fontSize: cx(14),
-          flexDirection: 'row',
-        }}>
-            <Text style={{ color: props.theme?.global.fontColor }}>{text[0]}</Text>
-            <Text
-                onPress={openLink}
-                style={{
-                  fontFamily: 'helvetica_neue_lt_std_roman',
-                  color: props.theme?.button.primary,
-                  textDecorationLine: 'underline',
-                  flexWrap: 'wrap',
-                }}>SUN@HOME</Text>
-            <Text style={{ color: props.theme?.global.fontColor }}>{text[1]}</Text>
-        </Text>
-  }
-
-  const randomIcon = () => {
-    const iconIdList = state.planList?.map(item => {
-      return item.iconId
-    })
-    const allIcon = iconList?.map(item => {
-      return item.id
-    })
-    const availableChart = allIcon.filter((element) => !iconIdList.includes(element))
-    const randomIndex = Math.floor(Math.random() * availableChart.length)
-    return availableChart[randomIndex]
-  }
-
-  const convertPlandata = useCallback(() => {
-    return state.planList.map(item => {
-      return {
-        ...item,
-        noActiveColor: '#474e5d',
-        activeColor: '#F7EB2A',
-        color: item?.brightness === 0 ? '#000' : !params.isSupportTemperature && cctToColor(1) || cctToColor(item.colorTemperature.toFixed(), item?.brightness)
-      }
-    }).filter(plan => plan.enable)
-  }, [JSON.stringify(state.planList), params.isSupportTemperature])
-
-  return (
-    <>
-      <Page
-        backText={deviceInfo.name}
-        onBackClick={navigation.goBack}
-        headlineText={I18n.getLang('add_new_trigger_time_system_back_text')}
-        headlineIconContent={<Switch
-          value={state.enable}
-          thumbColor={props.theme?.icon.primary}
-          trackColor={{ false: '#00000026', true: '#ff660036' }}
-          onValueChange={async enable => {
-            const biorhythmTask = {
-              startTime: 0,
-              endTime: 1440,
-              weeks: biorhythm.repeatPeriod.map(item => item.enabled ? 1 : 0),
-              enable: biorhythm.enable,
-              channel: 1
-            }
-            if (enable && checkConflict(biorhythmTask)) {
-              return showCommonDialog({
-                method: 'confirm',
-                title: I18n.getLang('conflict_dialog_active_item_bio_rhythm_titel'),
-                subTitle: I18n.getLang('conflict_dialog_active_item_bio_rhythm_description'),
-                onConfirm: (_, { close }) => {
-                  resolveConflict()
-                  close()
-                  state.loading = true
-                  state.enable = enable
-                  requestSetBiorhythm(false)
-                },
-                onCancel: () => {
-                  Dialog.close()
-                }
-              })
-            }
-            state.loading = true
-            state.enable = enable
-            requestSetBiorhythm(false)
-          }}
-        />}
-        loading={state.loading}
-      >
-        <ScrollView nestedScrollEnabled={true} style={{ position: 'relative' }}>
-          <View style={{ marginHorizontal: cx(24) }}>
-            {sunHomeText(I18n.getLang(devicesJudge ? 'bio_ryhthm_default_description_text' : 'bio_ryhthm_non_sun_home_products_description_text'))}
-          </View>
-          <View style={{ height: cx(10) }} />
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              marginHorizontal: cx(24),
-            }}
-          >
-            {state.repeatPeriod.map(period => {
-              return (
-                <TouchableOpacity
-                  key={period.title}
-                  onPress={() => {
-                    const periodNum = state.repeatPeriod.filter(p => p.enabled)?.length
-                    if (periodNum === 1 && period.enabled) return
-                    period.enabled = !period.enabled
-                    requestSetBiorhythm(false)
-                  }}
-                >
-                  <View
-                    style={{
-                      width: cx(40),
-                      height: cx(40),
-                      justifyContent: 'center',
-                      alignItems: 'center',
-                      borderRadius: cx(20),
-                      backgroundColor: period.enabled ? props.theme?.global.thirdBrand : props.theme?.global.background,
-                      borderWidth: cx(1),
-                      borderColor: props.theme?.global.brand,
-                    }}
-                  >
-                    <Text
-                      style={{
-                        color: props.theme?.global.brand,
-                        textAlign: 'center',
-                      }}
-                    >
-                      {period.title}
-                    </Text>
-                  </View>
-                </TouchableOpacity>
-              )
-            })}
-          </View>
-          <View style={{ marginHorizontal: cx(24), marginTop: cx(20) }}>
-            <Text style={{ color: props.theme?.global.fontColor }}>{state.weekString}</Text>
-          </View>
-          <View style={{ marginHorizontal: cx(24), marginTop: cx(16) }}>
-            <Text style={{ color: props.theme?.global.fontColor }}>
-              {I18n.getLang('bio_ryhthm_default_selectionfield_topic_text')}
-            </Text>
-            <TouchableOpacity
-              onPress={() => {
-                showGradientTypeSelectModal(true)
-              }}
-            >
-              <View
-                style={{
-                  flexDirection: 'row',
-                  borderRadius: cx(4),
-                  backgroundColor: props.theme?.textInput.background,
-                  alignItems: 'center',
-                  flex: 1,
-                  height: cx(44),
-                  borderBottomWidth: cx(1),
-                  borderBottomColor: props.theme?.textInput.line,
-                }}
-              >
-                <Text style={{
-                  fontSize: cx(16),
-                  color: props.theme?.textInput.fontColor,
-                  fontFamily: 'helvetica_neue_lt_std_roman',
-                  paddingLeft: cx(16),
-                }}>
-                  {
-                    I18n.getLang(
-                      state.gradient === BiorhythmGradientType.DirectGradient
-                        ? 'add_new_dynamic_mood_color_changing_mode_value2'
-                        : 'add_new_dynamic_mood_color_changing_mode_value',
-                    )
-                  }
-
-                </Text>
-              </View>
-            </TouchableOpacity>
-          </View>
-          <View style={{ height: cx(20) }} />
-          {/* <TimeCircular
-            planEdit={true}
-            planList={state.planList}
-            onPanMoved={(id, time) => {
-              state.planList = state.planList.map(plan => {
-                return {
-                  ...plan,
-                  time: plan.index === id ? time : plan.time,
-                }
-              })
-              state.flag = Symbol()
-            }}
-            replaceStatus={devicesJudge}
-            gradient={state.gradient === BiorhythmGradientType.DirectGradient}
-            isSupportTemperature={!params.isSupportTemperature} /> */}
-          <View style={{ alignItems: 'center', justifyContent: 'center' }}>
-            <RhythmsCircle
-              size={250}
-              ringWidth={40}
-              thumbSize={36}
-              timeImg={timeImg}
-              gradientMode={state.gradient === BiorhythmGradientType.EntireGradient}
-              data={convertPlandata()}
-              onRelease={(planList) => {
-                state.planList = state.planList.map(item => {
-                  return {
-                    ...item,
-                    time: planList.find(p => p.index === item.index)?.time
-                  }
-                })
-                state.flag = Symbol()
-              }}
-            />
-          </View>
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              marginHorizontal: cx(24),
-              marginBottom: cx(-8),
-              marginTop: cx(26),
-            }}>
-            {state.planList.length === 8 && <View
-                style={{ marginVertical: cx(10), flexDirection: 'row', alignItems: 'center', width: width - cx(48) }}>
-                <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.warning }} source={{ uri: res.ic_warning_amber }} />
-                <Text
-                    style={{
-                      flexWrap: 'wrap',
-                      fontSize: cx(12),
-                      color: props.theme?.global.fontColor
-                    }}>{I18n.getLang('add_new_trigger_time_warning_max_number_text')}</Text>
-            </View>}
-            {state.planList.length < 8 &&
-                <>
-                    <Text
-                        style={{
-                          fontSize: cx(16),
-                          fontWeight: 'bold',
-                          color: props.theme?.global.fontColor,
-                        }}>{I18n.getLang('bio_ryhthm_default_subheadline_text')}</Text>
-                    <TouchableOpacity
-                        onPress={() => {
-                          const ids: number[] = state.planList.map(p => p.index)
-                          const newPlan: Plan = {
-                            index: Math.max(...ids) + 1,
-                            icon: res.rhythm_icon1,
-                            time: 0,
-                            name: '',
-                            colorTemperature: 0,
-                            brightness: 100,
-                            action: [
-                              {
-                                uri: 'model/attribute/set/LightCtrl/ColorTemperature',
-                                startValue: `${colorTemperatureValue(0)}`,
-                              },
-                              {
-                                uri: 'model/attribute/set/LightCtrl/Brightness',
-                                startValue: '100',
-                              },
-                            ],
-                            enable: true,
-                            iconId: randomIcon(),
-                          }
-                          const editPageParams: BiorhythmEditPageParams = {
-                            planData: newPlan,
-                            isAdd: true,
-                            onPlanEdited,
-                            onPlanDelete,
-                            minimumEnable,
-                            nameRepeat,
-                            iconIdList: state.planList?.map(item => {
-                              return item.iconId
-                            }),
-                            isMixRGBWLamp: !!params.isMixLight,
-                            isSupportTemperature: params.isSupportTemperature,
-                            isSupportBrightness: params.isSupportBrightness,
-                            showDeleteBtn
-                          }
-                          navigation.navigate(ui_biz_routerKey.bi_biz_biological_edit, editPageParams)
-                        }}>
-                        <Image source={{ uri: res.biorhythom_add }} style={{ height: cx(24), width: cx(24), tintColor: props.theme?.icon.primary }} />
-                    </TouchableOpacity>
-                </>
-            }
-          </View>
-          <FlatList
-            data={state.planList}
-            style={{
-              flex: 1,
-              marginTop: cx(12),
-            }}
-            nestedScrollEnabled={true}
-            ListHeaderComponent={() => (<Spacer height={cx(16)} />)}
-            ItemSeparatorComponent={() => (<Spacer height={cx(16)} />)}
-            renderItem={({ item }) => {
-              const type = typeof item?.icon === 'string'
-              const bgColor = item?.brightness === 0 ? '#000' : !params.isSupportTemperature && cctToColor(1) || cctToColor(item.colorTemperature.toFixed(), item?.brightness)
-              return (
-                <Card
-                  style={{ marginHorizontal: cx(24) }}
-                  onPress={() => {
-                    const editPageParams: BiorhythmEditPageParams = {
-                      planData: {
-                        ...item,
-                        name: setTimer(item?.name)
-                      },
-                      isAdd: false,
-                      onPlanEdited,
-                      onPlanDelete,
-                      minimumEnable,
-                      nameRepeat,
-                      iconIdList: state.planList?.map(item => {
-                        return item.iconId
-                      }),
-                      isMixRGBWLamp: !!params.isMixLight,
-                      isSupportTemperature: params.isSupportTemperature,
-                      isSupportBrightness: params.isSupportBrightness,
-                      showDeleteBtn
-                    }
-                    navigation.navigate(ui_biz_routerKey.bi_biz_biological_edit, editPageParams)
-                  }}
-                >
-                  <View
-                    style={{
-                      flex: 1,
-                      flexDirection: 'column',
-                    }}
-                  >
-                    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: cx(16) }}>
-                      <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
-                        <Image
-                          source={{ uri: setImg(item?.iconId) }}
-                          style={{
-                            width: cx(24),
-                            height: cx(24),
-                            marginStart: cx(10),
-                            marginRight: cx(6),
-                            tintColor: props.theme?.icon.normal,
-                          }}
-                        />
-                        <Text
-                          style={{
-                            fontSize: cx(16),
-                            color: props.theme?.global.fontColor,
-                            fontFamily: 'helvetica_neue_lt_std_roman',
-                          }}
-                        >
-                          {convertMinutesTo12HourFormat(item.time, is24Hour)}
-                        </Text>
-                      </View>
-                      <Switch
-                        value={item.enable}
-                        thumbColor={props.theme?.icon.primary}
-                        trackColor={{ false: '#00000026', true: '#ff660036' }}
-                        onValueChange={e => {
-                          item.enable = e
-                          requestSetBiorhythm()
-                        }}
-                        style={{ marginRight: cx(10) }}
-                      />
-                    </View>
-                    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
-                      <Text
-                        style={{
-                          fontSize: cx(12),
-                          color: props.theme?.global.secondFontColor,
-                          fontFamily: 'helvetica_neue_lt_std_roman',
-                          paddingLeft: cx(20),
-                        }}
-                      >
-                        {setTimer(item?.name)}
-                      </Text>
-                    </View>
-                    <View
-                      style={{
-                        width: cx(295),
-                        height: cx(24),
-                        backgroundColor: bgColor,
-                        marginLeft: cx(20),
-                        marginTop: cx(5),
-                        marginBottom: cx(24),
-                        borderRadius: cx(8),
-                      }} />
-                  </View>
-                </Card>
-              )
-            }}
-            keyExtractor={item => `${item.index}`}
-            ListFooterComponent={() => {
-              return (
-                <View style={{ marginHorizontal: cx(24) }}>
-                  <Spacer />
-                  <DeleteButton
-                    text={I18n.getLang('bio_ryhthm_default_button_reset_text')}
-                    textStyle={{
-                      fontSize: cx(16),
-                      fontFamily: 'helvetica_neue_lt_std_roman',
-                    }}
-                    onPress={() => {
-                      showCommonDialog({
-                        method: 'confirm',
-                        title: I18n.getLang('bio_ryhthm_reset_description_text'),
-                        onConfirm: (_, { close }) => {
-                          const defBiorhythmUIState = getDefBiorhythmUIState()
-                          state.enable = defBiorhythmUIState.enable
-                          state.gradient = defBiorhythmUIState.gradient
-                          state.repeatPeriod = defBiorhythmUIState.repeatPeriod
-                          state.planList = defBiorhythmUIState.planList
-                          requestSetBiorhythm()
-                          close()
-                        }
-                      })
-                    }}
-                  />
-                  <Spacer />
-                </View>
-              )
-            }}
-          />
-          {!state.enable && (
-            <View
-              style={{
-                backgroundColor: 'rgba(0,0,0,.5)',
-                width: '100%',
-                height: '100%',
-                position: 'absolute',
-                top: 0,
-                zIndex: 999,
-              }}
-            />
-          )}
-        </ScrollView>
-      </Page>
-      <Modal.List
-        type={'radio'}
-        visible={state.showGradientTypeSelectModal}
-        value={state.gradient}
-        dataSource={[
-          {
-            title: I18n.getLang('add_new_dynamic_mood_color_changing_mode_value'),
-            key: BiorhythmGradientType.EntireGradient.toString(),
-            value: BiorhythmGradientType.EntireGradient,
-          },
-          {
-            title: I18n.getLang('add_new_dynamic_mood_color_changing_mode_value2'),
-            key: BiorhythmGradientType.DirectGradient.toString(),
-            value: BiorhythmGradientType.DirectGradient,
-          },
-        ]}
-        title={I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline')}
-        onMaskPress={() => {
-          showGradientTypeSelectModal(false)
-        }}
-        onCancel={() => {
-          showGradientTypeSelectModal(false)
-        }}
-        cancelText={I18n.getLang('auto_scan_system_cancel')}
-        confirmText={I18n.getLang('auto_scan_system_wifi_confirm')}
-        onConfirm={(item: BiorhythmGradientType) => {
-          state.gradient = item
-          requestSetBiorhythm()
-          showGradientTypeSelectModal(false)
-        }}
-      />
-    </>
-  )
-}
-
-export default withTheme(BiorhythmPage)
-
-
+import Card from '@ledvance/base/src/components/Card'
+import DeleteButton from '@ledvance/base/src/components/DeleteButton'
+import Page from '@ledvance/base/src/components/Page'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import LdvWeekView from '@ledvance/base/src/components/weekSelect'
+import ThemeType from '@ledvance/base/src/config/themeType'
+import { useParams } from '@ledvance/base/src/hooks/Hooks'
+import I18n from '@ledvance/base/src/i18n'
+import { useDeviceInfo, useSystemTimeFormate, } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import res from '@ledvance/base/src/res'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+import { convertMinutesTo12HourFormat, loopText, showDialog as showCommonDialog } from '@ledvance/base/src/utils/common'
+import { useNavigation } from '@react-navigation/native'
+import { useDebounceFn, useReactive, useUpdateEffect } from 'ahooks'
+import { useConflictTask } from 'hooks/DeviceDpStateHooks'
+import { cloneDeep, sortBy } from 'lodash'
+import React, { useCallback, useMemo } from 'react'
+import { FlatList, Image, Linking, ScrollView, Switch, Text, TouchableOpacity, View } from 'react-native'
+import { Dialog, Modal, Utils } from 'tuya-panel-kit'
+import { ui_biz_routerKey } from '../../navigation/Routers'
+import { useBiorhythm } from './BiorhythmActions'
+import {
+  BiorhythmBean,
+  BiorhythmGradientType,
+  colorTemperatureValue,
+  getDefBiorhythmUIState,
+  Plan,
+} from './BiorhythmBean'
+import { BiorhythmEditPageParams } from './BiorhythmEditPage'
+import RhythmsCircle from './circular/RhythmsCircle'
+import iconList from './iconListData'
+import pIdList from './pIdList'
+
+const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
+const width = Utils.RatioUtils.width
+
+interface UIState extends BiorhythmBean {
+  showGradientTypeSelectModal: boolean;
+  flag: symbol;
+  timeSchedule: any[]
+  loading: boolean
+}
+
+export interface BiorhythmPageParams {
+  biorhythmDpCode: string
+  conflictDps: {
+    randomTimeDpCode?: string
+    fixedTimeDpCode?: string
+    sleepDpCode?: string
+    wakeUpDpCode?: string
+  }
+  isSupportTemperature: boolean
+  isSupportBrightness: boolean
+  isMixLight?: boolean
+}
+
+const BiorhythmPage = (props: { theme?: ThemeType }) => {
+  const params = useParams<BiorhythmPageParams>()
+  const navigation = useNavigation()
+  const [biorhythm, setBiorhythm] = useBiorhythm(params.biorhythmDpCode)
+  const deviceInfo = useDeviceInfo()
+  const { productId } = deviceInfo
+  const is24Hour = useSystemTimeFormate()
+  const devicesJudge = pIdList.some(val => val === productId)
+  const [checkConflict, resolveConflict] = useConflictTask(params.conflictDps)
+
+  const state = useReactive<UIState>({
+    ...biorhythm,
+    showGradientTypeSelectModal: false,
+    flag: Symbol(),
+    timeSchedule: [],
+    loading: false
+  })
+
+  const timeImg = useMemo(() => {
+    if (is24Hour) {
+      return devicesJudge ? res.ic_warning_amber_sun : res.ic_warning_amber_new
+    } else {
+      return devicesJudge ? res.ic_warning_amber_sun_12 : res.ic_warning_amber_new_12
+    }
+  }, [is24Hour, devicesJudge])
+
+  const showGradientTypeSelectModal = useCallback((show: boolean) => {
+    state.showGradientTypeSelectModal = show
+  }, [])
+
+  const onPlanEdited = useCallback((isAdd: boolean, newPlan: Plan) => {
+    if (isAdd) {
+      state.planList.push(newPlan)
+      state.planList = sortBy(state.planList, p => p.time)
+    } else {
+      state.planList = state.planList.map(plan => (plan.index === newPlan.index ? newPlan : plan))
+    }
+    state.flag = Symbol()
+  }, [])
+
+  const onPlanDelete = useCallback((id: number) => {
+    state.planList = state.planList.filter(plan => plan.index !== id)
+    state.flag = Symbol()
+  }, [])
+
+  const requestSetBiorhythm = useCallback(async (pushFeature: boolean = true) => {
+    state.loading = true
+    const planList = state.planList?.map(item => {
+      return { ...item, icon: `${item.icon}` }
+    })
+      .sort((a, b) => a.time - b.time)
+    const res = await setBiorhythm(cloneDeep({ ...state, planList }), pushFeature)
+    state.loading = false
+    if (res.success) {
+      console.log('设置生物节律 OK')
+    }
+  }, [])
+
+  useUpdateEffect(() => {
+    if (state.planList?.length === 0) {
+      const data = getDefBiorhythmUIState()
+      data.planList = data.planList?.map(item => {
+        return { ...item, icon: `${item.icon}` }
+      })
+      setBiorhythm(cloneDeep(data)).then()
+    }
+  }, [state.planList])
+
+  const setTimer = value => {
+    switch (value) {
+      case 'Sunrise':
+        return I18n.getLang('bio_ryhthm_default_field_text')
+      case 'Wake Up':
+        return I18n.getLang('bio_ryhthm_default_field_text2')
+      case 'Sunlight':
+        return I18n.getLang('bio_ryhthm_default_field_text3')
+      case 'Comfortable':
+        return I18n.getLang('bio_ryhthm_default_field_text4')
+      case 'Night light':
+        return I18n.getLang('bio_ryhthm_default_field_text5')
+      default:
+        return value
+    }
+  }
+
+  const minimumEnable = useCallback((plan: Plan) => {
+    let enable = false
+    state.planList.filter(p => p.index !== plan.index).forEach(item => {
+      const diff = Math.abs(plan.time - item.time)
+      if (diff < 15) enable = true
+    })
+    return enable
+  }, [state.planList])
+
+  const nameRepeat = useCallback((plan: Plan) => {
+    return !!state.planList.filter(p => p.index !== plan.index).find(p => p.name === plan.name)
+  }, [state.planList])
+
+  const showDeleteBtn = useMemo(() => {
+    return state.planList?.length > 1
+  }, [state.planList?.length])
+
+  const { run } = useDebounceFn(requestSetBiorhythm, { wait: 300 })
+
+  useUpdateEffect(() => {
+    run()
+  }, [state.flag])
+
+  const replaceImg = (img) => {
+    const item = iconList?.find(val => val.id === Number(img))
+    switch (img) {
+      case 'rhythm_icon1':
+      case '31':
+        return { icon: res.biorhythom_icon1, iconId: 1 }
+      case 'rhythm_icon2':
+      case '33':
+        return { icon: res.biorhythom_icon5, iconId: 5 }
+      case 'rhythm_icon3':
+      case '35':
+        return { icon: res.biorhythom_icon2, iconId: 2 }
+      case 'rhythm_icon4':
+      case '32':
+        return { icon: res.biorhythom_icon9, iconId: 9 }
+      case 'rhythm_icon12':
+      case '39':
+        return { icon: res.biorhythom_icon3, iconId: 3 }
+      default:
+        return { icon: item?.icon, iconId: item?.id }
+    }
+  }
+
+  useUpdateEffect(() => {
+    const planList = biorhythm.planList?.map(item => {
+      return {
+        ...item,
+        icon: replaceImg(item?.iconId || item?.icon)?.icon,
+        iconId: replaceImg(item?.iconId || item?.icon)?.iconId,
+      }
+    })
+    state.enable = biorhythm.enable
+    state.gradient = biorhythm.gradient
+    state.weeks = biorhythm.weeks
+    state.planList = planList
+
+  }, [JSON.stringify(biorhythm)])
+
+
+  const setImg = (id) => {
+    const imgIcon = iconList?.find(val => val?.id === Number(id))?.icon
+    return imgIcon || ''
+  }
+
+  const openLink = () => {
+    const url = I18n.getLang('biorhythm_product_link') // 需要打开的链接
+    Linking.openURL(url).catch((error) => console.error('无法打开链接:', error))
+  }
+
+  const sunHomeText = string => {
+    const text = string.split('SUN@HOME')
+    return text?.length === 1 &&
+        <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor }}>{text[0]}</Text> ||
+        <Text style={{
+          fontSize: cx(14),
+          flexDirection: 'row',
+        }}>
+            <Text style={{ color: props.theme?.global.fontColor }}>{text[0]}</Text>
+            <Text
+                onPress={openLink}
+                style={{
+                  fontFamily: 'helvetica_neue_lt_std_roman',
+                  color: props.theme?.button.primary,
+                  textDecorationLine: 'underline',
+                  flexWrap: 'wrap',
+                }}>SUN@HOME</Text>
+            <Text style={{ color: props.theme?.global.fontColor }}>{text[1]}</Text>
+        </Text>
+  }
+
+  const randomIcon = () => {
+    const iconIdList = state.planList?.map(item => {
+      return item.iconId
+    })
+    const allIcon = iconList?.map(item => {
+      return item.id
+    })
+    const availableChart = allIcon.filter((element) => !iconIdList.includes(element))
+    const randomIndex = Math.floor(Math.random() * availableChart.length)
+    return availableChart[randomIndex]
+  }
+
+  const convertPlandata = useCallback(() => {
+    return state.planList.map(item => {
+      return {
+        ...item,
+        noActiveColor: '#474e5d',
+        activeColor: '#F7EB2A',
+        color: item?.brightness === 0 ? '#000' : !params.isSupportTemperature && cctToColor(1) || cctToColor(item.colorTemperature.toFixed(), item?.brightness)
+      }
+    }).filter(plan => plan.enable)
+  }, [JSON.stringify(state.planList), params.isSupportTemperature])
+
+  return (
+    <>
+      <Page
+        backText={deviceInfo.name}
+        onBackClick={navigation.goBack}
+        headlineText={I18n.getLang('add_new_trigger_time_system_back_text')}
+        headlineIconContent={<Switch
+          value={state.enable}
+          thumbColor={props.theme?.icon.primary}
+          trackColor={{ false: '#00000026', true: '#ff660036' }}
+          onValueChange={async enable => {
+            const biorhythmTask = {
+              startTime: 0,
+              endTime: 1440,
+              weeks: biorhythm.weeks,
+              enable: biorhythm.enable,
+              channel: 1
+            }
+            if (enable && checkConflict(biorhythmTask)) {
+              return showCommonDialog({
+                method: 'confirm',
+                title: I18n.getLang('conflict_dialog_active_item_bio_rhythm_titel'),
+                subTitle: I18n.getLang('conflict_dialog_active_item_bio_rhythm_description'),
+                onConfirm: (_, { close }) => {
+                  resolveConflict()
+                  close()
+                  state.loading = true
+                  state.enable = enable
+                  requestSetBiorhythm(false)
+                },
+                onCancel: () => {
+                  Dialog.close()
+                }
+              })
+            }
+            state.loading = true
+            state.enable = enable
+            requestSetBiorhythm(false)
+          }}
+        />}
+        loading={state.loading}
+      >
+        <ScrollView nestedScrollEnabled={true} style={{ position: 'relative' }}>
+          <View style={{ marginHorizontal: cx(24) }}>
+            {sunHomeText(I18n.getLang(devicesJudge ? 'bio_ryhthm_default_description_text' : 'bio_ryhthm_non_sun_home_products_description_text'))}
+          </View>
+          <View style={{ height: cx(10) }}/>
+          <LdvWeekView
+            value={state.weeks}
+            style={{ marginHorizontal: cx(24) }}
+            onSelect={(index: number) => {
+              const rawIndex = index - 1
+              const newWeeks = cloneDeep(state.weeks)
+              newWeeks[rawIndex] = newWeeks[rawIndex] === 1 ? 0 : 1
+              if (!newWeeks.every(item => item === 0)) {
+                state.weeks = newWeeks
+                requestSetBiorhythm(false)
+              }
+            }}/>
+          <Spacer/>
+          <Text style={{ marginHorizontal: cx(24), color: props.theme?.global.fontColor, fontSize: cx(14) }}>
+            {loopText(state.weeks)}
+          </Text>
+          <View style={{ marginHorizontal: cx(24), marginTop: cx(16) }}>
+            <Text style={{ color: props.theme?.global.fontColor }}>
+              {I18n.getLang('bio_ryhthm_default_selectionfield_topic_text')}
+            </Text>
+            <TouchableOpacity
+              onPress={() => {
+                showGradientTypeSelectModal(true)
+              }}
+            >
+              <View
+                style={{
+                  flexDirection: 'row',
+                  borderRadius: cx(4),
+                  backgroundColor: props.theme?.textInput.background,
+                  alignItems: 'center',
+                  flex: 1,
+                  height: cx(44),
+                  borderBottomWidth: cx(1),
+                  borderBottomColor: props.theme?.textInput.line,
+                }}
+              >
+                <Text style={{
+                  fontSize: cx(16),
+                  color: props.theme?.textInput.fontColor,
+                  fontFamily: 'helvetica_neue_lt_std_roman',
+                  paddingLeft: cx(16),
+                }}>
+                  {
+                    I18n.getLang(
+                      state.gradient === BiorhythmGradientType.DirectGradient
+                        ? 'add_new_dynamic_mood_color_changing_mode_value2'
+                        : 'add_new_dynamic_mood_color_changing_mode_value',
+                    )
+                  }
+
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+          <View style={{ height: cx(20) }}/>
+          {/* <TimeCircular
+            planEdit={true}
+            planList={state.planList}
+            onPanMoved={(id, time) => {
+              state.planList = state.planList.map(plan => {
+                return {
+                  ...plan,
+                  time: plan.index === id ? time : plan.time,
+                }
+              })
+              state.flag = Symbol()
+            }}
+            replaceStatus={devicesJudge}
+            gradient={state.gradient === BiorhythmGradientType.DirectGradient}
+            isSupportTemperature={!params.isSupportTemperature} /> */}
+          <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+            <RhythmsCircle
+              size={250}
+              ringWidth={40}
+              thumbSize={36}
+              timeImg={timeImg}
+              gradientMode={state.gradient === BiorhythmGradientType.EntireGradient}
+              data={convertPlandata()}
+              onRelease={(planList) => {
+                state.planList = state.planList.map(item => {
+                  return {
+                    ...item,
+                    time: planList.find(p => p.index === item.index)?.time
+                  }
+                })
+                state.flag = Symbol()
+              }}
+            />
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginHorizontal: cx(24),
+              marginBottom: cx(-8),
+              marginTop: cx(26),
+            }}>
+            {state.planList.length === 8 && <View
+                style={{ marginVertical: cx(10), flexDirection: 'row', alignItems: 'center', width: width - cx(48) }}>
+                <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.warning }}
+                       source={{ uri: res.ic_warning_amber }}/>
+                <Text
+                    style={{
+                      flexWrap: 'wrap',
+                      fontSize: cx(12),
+                      color: props.theme?.global.fontColor
+                    }}>{I18n.getLang('add_new_trigger_time_warning_max_number_text')}</Text>
+            </View>}
+            {state.planList.length < 8 &&
+                <>
+                    <Text
+                        style={{
+                          fontSize: cx(16),
+                          fontWeight: 'bold',
+                          color: props.theme?.global.fontColor,
+                        }}>{I18n.getLang('bio_ryhthm_default_subheadline_text')}</Text>
+                    <TouchableOpacity
+                        onPress={() => {
+                          const ids: number[] = state.planList.map(p => p.index)
+                          const newPlan: Plan = {
+                            index: Math.max(...ids) + 1,
+                            icon: res.rhythm_icon1,
+                            time: 0,
+                            name: '',
+                            colorTemperature: 0,
+                            brightness: 100,
+                            action: [
+                              {
+                                uri: 'model/attribute/set/LightCtrl/ColorTemperature',
+                                startValue: `${colorTemperatureValue(0)}`,
+                              },
+                              {
+                                uri: 'model/attribute/set/LightCtrl/Brightness',
+                                startValue: '100',
+                              },
+                            ],
+                            enable: true,
+                            iconId: randomIcon(),
+                          }
+                          const editPageParams: BiorhythmEditPageParams = {
+                            planData: newPlan,
+                            isAdd: true,
+                            onPlanEdited,
+                            onPlanDelete,
+                            minimumEnable,
+                            nameRepeat,
+                            iconIdList: state.planList?.map(item => {
+                              return item.iconId
+                            }),
+                            isMixRGBWLamp: !!params.isMixLight,
+                            isSupportTemperature: params.isSupportTemperature,
+                            isSupportBrightness: params.isSupportBrightness,
+                            showDeleteBtn
+                          }
+                          navigation.navigate(ui_biz_routerKey.bi_biz_biological_edit, editPageParams)
+                        }}>
+                        <Image source={{ uri: res.biorhythom_add }}
+                               style={{ height: cx(24), width: cx(24), tintColor: props.theme?.icon.primary }}/>
+                    </TouchableOpacity>
+                </>
+            }
+          </View>
+          <FlatList
+            data={state.planList}
+            style={{
+              flex: 1,
+              marginTop: cx(12),
+            }}
+            nestedScrollEnabled={true}
+            ListHeaderComponent={() => (<Spacer height={cx(16)}/>)}
+            ItemSeparatorComponent={() => (<Spacer height={cx(16)}/>)}
+            renderItem={({ item }) => {
+              const bgColor = item?.brightness === 0 ? '#000' : !params.isSupportTemperature && cctToColor(1) || cctToColor(item.colorTemperature.toFixed(), item?.brightness)
+              return (
+                <Card
+                  style={{ marginHorizontal: cx(24) }}
+                  onPress={() => {
+                    const editPageParams: BiorhythmEditPageParams = {
+                      planData: {
+                        ...item,
+                        name: setTimer(item?.name)
+                      },
+                      isAdd: false,
+                      onPlanEdited,
+                      onPlanDelete,
+                      minimumEnable,
+                      nameRepeat,
+                      iconIdList: state.planList?.map(item => {
+                        return item.iconId
+                      }),
+                      isMixRGBWLamp: !!params.isMixLight,
+                      isSupportTemperature: params.isSupportTemperature,
+                      isSupportBrightness: params.isSupportBrightness,
+                      showDeleteBtn
+                    }
+                    navigation.navigate(ui_biz_routerKey.bi_biz_biological_edit, editPageParams)
+                  }}
+                >
+                  <View
+                    style={{
+                      flex: 1,
+                      flexDirection: 'column',
+                    }}
+                  >
+                    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: cx(16) }}>
+                      <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
+                        <Image
+                          source={{ uri: setImg(item?.iconId) }}
+                          style={{
+                            width: cx(24),
+                            height: cx(24),
+                            marginStart: cx(10),
+                            marginRight: cx(6),
+                            tintColor: props.theme?.icon.normal,
+                          }}
+                        />
+                        <Text
+                          style={{
+                            fontSize: cx(16),
+                            color: props.theme?.global.fontColor,
+                            fontFamily: 'helvetica_neue_lt_std_roman',
+                          }}
+                        >
+                          {convertMinutesTo12HourFormat(item.time, is24Hour)}
+                        </Text>
+                      </View>
+                      <Switch
+                        value={item.enable}
+                        thumbColor={props.theme?.icon.primary}
+                        trackColor={{ false: '#00000026', true: '#ff660036' }}
+                        onValueChange={e => {
+                          item.enable = e
+                          requestSetBiorhythm()
+                        }}
+                        style={{ marginRight: cx(10) }}
+                      />
+                    </View>
+                    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
+                      <Text
+                        style={{
+                          fontSize: cx(12),
+                          color: props.theme?.global.secondFontColor,
+                          fontFamily: 'helvetica_neue_lt_std_roman',
+                          paddingLeft: cx(20),
+                        }}
+                      >
+                        {setTimer(item?.name)}
+                      </Text>
+                    </View>
+                    <View
+                      style={{
+                        width: cx(295),
+                        height: cx(24),
+                        backgroundColor: bgColor,
+                        marginLeft: cx(20),
+                        marginTop: cx(5),
+                        marginBottom: cx(24),
+                        borderRadius: cx(8),
+                      }}/>
+                  </View>
+                </Card>
+              )
+            }}
+            keyExtractor={item => `${item.index}`}
+            ListFooterComponent={() => {
+              return (
+                <View style={{ marginHorizontal: cx(24) }}>
+                  <Spacer/>
+                  <DeleteButton
+                    text={I18n.getLang('bio_ryhthm_default_button_reset_text')}
+                    textStyle={{
+                      fontSize: cx(16),
+                      fontFamily: 'helvetica_neue_lt_std_roman',
+                    }}
+                    onPress={() => {
+                      showCommonDialog({
+                        method: 'confirm',
+                        title: I18n.getLang('bio_ryhthm_reset_description_text'),
+                        onConfirm: (_, { close }) => {
+                          const defBiorhythmUIState = getDefBiorhythmUIState()
+                          state.enable = defBiorhythmUIState.enable
+                          state.weeks = defBiorhythmUIState.weeks
+                          state.gradient = defBiorhythmUIState.gradient
+                          state.planList = defBiorhythmUIState.planList
+                          requestSetBiorhythm()
+                          close()
+                        }
+                      })
+                    }}
+                  />
+                  <Spacer/>
+                </View>
+              )
+            }}
+          />
+          {!state.enable && (
+            <View
+              style={{
+                backgroundColor: 'rgba(0,0,0,.5)',
+                width: '100%',
+                height: '100%',
+                position: 'absolute',
+                top: 0,
+                zIndex: 999,
+              }}
+            />
+          )}
+        </ScrollView>
+      </Page>
+      <Modal.List
+        type={'radio'}
+        visible={state.showGradientTypeSelectModal}
+        value={state.gradient}
+        dataSource={[
+          {
+            title: I18n.getLang('add_new_dynamic_mood_color_changing_mode_value'),
+            key: BiorhythmGradientType.EntireGradient.toString(),
+            value: BiorhythmGradientType.EntireGradient,
+          },
+          {
+            title: I18n.getLang('add_new_dynamic_mood_color_changing_mode_value2'),
+            key: BiorhythmGradientType.DirectGradient.toString(),
+            value: BiorhythmGradientType.DirectGradient,
+          },
+        ]}
+        title={I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline')}
+        onMaskPress={() => {
+          showGradientTypeSelectModal(false)
+        }}
+        onCancel={() => {
+          showGradientTypeSelectModal(false)
+        }}
+        cancelText={I18n.getLang('auto_scan_system_cancel')}
+        confirmText={I18n.getLang('auto_scan_system_wifi_confirm')}
+        onConfirm={(item: BiorhythmGradientType) => {
+          state.gradient = item
+          requestSetBiorhythm()
+          showGradientTypeSelectModal(false)
+        }}
+      />
+    </>
+  )
+}
+
+export default withTheme(BiorhythmPage)
+
+