import React, { PropsWithChildren, useCallback, useEffect } from 'react'
import { BackHandler, View, ViewProps } from 'react-native'
import LDVTopBar from './ldvTopBar'
import { useNavigation } from '@react-navigation/native'
import {Dialog, Toast, Utils} from 'tuya-panel-kit'
import I18n from '@i18n'
import LdvTopName from './ldvTopName'
import ThemeType from '../config/themeType'

const { withTheme } = Utils.ThemeUtils

interface PageProps extends PropsWithChildren<ViewProps> {
  theme?: ThemeType
  rightButtonDisabled?: boolean
  backText: string
  onBackClick?: () => void
  showBackDialog?: boolean
  backDialogTitle?: string
  backDialogContent?: string
  rightButtonIcon?: string
  rightButtonStyle?: any | undefined
  rightButtonIconClick?: () => void
  headlineText?: string
  headlineIcon?: string | number
  onHeadlineIconClick?: () => void
  headlineIconContent?: React.ReactNode
  headlineTopContent?: React.ReactNode
  headlineContent?: React.ReactNode
  showGreenery?: boolean
  greeneryIcon?: string | undefined | number
  loading?: boolean
}

const Page = (props: PageProps) => {
  const navigation = useNavigation()
  const disabled = props.rightButtonDisabled

  const onBack = useCallback(() => {
      if (disabled) {
        navigation.goBack()
        return true
      }
      Dialog.confirm({
        title: props.backDialogTitle || '',
        subTitle: props.backDialogContent || '',
        cancelText: I18n.getLang('cancel_dialog_delete_item_sleepschedule_answer_no_text'),
        confirmText: I18n.getLang('cancel_dialog_delete_item_sleepschedule_answer_yes_text'),
        onConfirm: (_, { close }) => {
          close()
          navigation.goBack()
        },
        motionConfig: {
          hideDuration: 0,
          showDuration: 100,
        },
      })
      return true
    },
    [props.backDialogTitle, props.backDialogContent, disabled],
  )

  useEffect(() => {
    if (!!props.showBackDialog) {
      BackHandler.addEventListener('hardwareBackPress', onBack)
      return () => {
        BackHandler.removeEventListener('hardwareBackPress', onBack)
      }
    }
  }, [props.showBackDialog, disabled])

  return (
    <>
      <View style={[{ flex: 1, position: 'relative', backgroundColor: props.theme?.global.backgroud }, props.style]}>
        <LDVTopBar
          title={props.backText}
          onBackPress={
            !!props.onBackClick ? props.onBackClick :
              !!props.showBackDialog ? onBack : (() => {
                navigation.goBack()
              })
          }
          rightButtonIcon={props.rightButtonIcon}
          rightButtonStyle={props.rightButtonStyle}
          onRightButtonPress={props.rightButtonIconClick}
          rightButtonDisabled={disabled}/>
        {(!!props.headlineText || !!props.headlineContent) &&
          <LdvTopName
            title={props.headlineText}
            rightIcon={props.headlineIcon}
            rightIconClick={props.onHeadlineIconClick}
            showGreenery={props.showGreenery}
            greeneryIcon={props.greeneryIcon}
            headlineIconContent={props.headlineIconContent}
            headlineTopContent={props.headlineTopContent}
            headlineContent={props.headlineContent}
            />}
        {props.children}
      </View>
      {!!props.loading && <Toast.Loading
        style={{ zIndex: 999, elevation: 10 }}
        show={props.loading}
        onFinish={() => {

        }}/>}
    </>
  )
}

export default withTheme(Page)
