import React from 'react'
import {Text, TouchableOpacity, View} from 'react-native'
import {Popup, Utils} from 'tuya-panel-kit'
import ThemeType from '../config/themeType'

const {convertX: cx, height} = Utils.RatioUtils
const { withTheme } = Utils.ThemeUtils

interface InformationPopupProps {
  title: string
  confirmText: string
  content: any
}

const InformationPopup = (props: InformationPopupProps) => {
  const TitleNode = withTheme(({theme}: {theme?: ThemeType}) => {
    return (
      <View style={{flexDirection: 'row', height: cx(80), justifyContent: 'space-between'}}>
        <View style={{flexDirection: 'column-reverse', flex: 1, alignItems: 'center', paddingLeft: cx(12)}}>
          <Text style={{
            fontSize: cx(16),
            fontWeight: 'bold',
            color: theme?.global.fontColor,
            paddingBottom: cx(12),

          }}>{props.title}</Text>
        </View>
        <TouchableOpacity
          style={{
            flexDirection: 'column-reverse',
            alignItems: 'center',
            paddingBottom: cx(12),
            paddingRight: cx(6),
          }}
          onPress={() => Popup.close()}
        >
          <Text
            style={{
              fontSize: cx(12),
              color: theme?.button.primary,
            }}
          >
            {props.confirmText}
          </Text>
        </TouchableOpacity>
      </View>
    )
  })

  Popup.custom({
    content: <View style={{height: height - cx(80), padding: cx(24)}}>
      {props.content}
    </View>,
    title: <TitleNode />,
    footer: null,
    confirmText: '',
    cancelText: '',
    onMaskPress: ({close}) => {
      close()
    },
    onConfirm: () => {
      Popup.close()
    },
    footerWrapperStyle: {
      display: 'none',
    },
  })
}

export default InformationPopup
