import React, { PropsWithChildren } from "react";
import { View, Image, StyleSheet, Text, TouchableOpacity, ViewProps } from "react-native";
import Card from "components/Card";
import Spacer from "components/Spacer";
import { Dialog, SwitchButton, Utils } from "tuya-panel-kit";
import I18n from "../i18n";
import ThemeType from '../config/themeType'

const cx = Utils.RatioUtils.convertX
const { withTheme } = Utils.ThemeUtils

interface SocketItemProps extends PropsWithChildren<ViewProps>{
  theme?: ThemeType
  title: string
  name: string
  icon: any
  disabledEdit?: boolean
  onNameChange: (value: string) => void
  enabled: boolean
  onSwitchChange: (value: boolean) => void
}

function SocketItem(props: SocketItemProps) {

  const styles = StyleSheet.create({
    switchLine: {
      flexDirection: 'row',
      alignItems: 'center',
      marginHorizontal: cx(16),
    },
    title: {
      fontSize: cx(16),
      color: props.theme?.global.fontColor,
      fontFamily: 'helvetica_neue_lt_std_bd',
      fontWeight: 'bold',
    },
    icon: {
      width: cx(60),
      height: cx(20),
    },
    nameLine: {
      flex: 1,
      marginHorizontal: cx(16),
    },
    name: {
      fontSize: cx(14),
      color: props.theme?.global.fontColor,
      fontFamily: 'helvetica_neue_lt_std_roman',
    },
  })

  return (
    <Card style={{ marginHorizontal: cx(24) }}>
      <View>
        <Spacer />
        <View style={styles.switchLine}>
          <Text style={styles.title}>{props.title}</Text>
          <Spacer height={0} width={cx(12)} />
          <Image style={styles.icon} source={props.icon} />
          <Spacer style={{ flex: 1 }} />
          <SwitchButton
            value={props.enabled}
            onValueChange={props.onSwitchChange} />
        </View>
        <TouchableOpacity
          style={styles.nameLine}
          onPress={() => {
            if(props.disabledEdit) return
            Dialog.prompt({
              title: I18n.getLang('routines_add_edit_name'),
              value: props.name,
              cancelText: I18n.getLang('auto_scan_system_cancel'),
              confirmText: I18n.getLang('auto_scan_system_wifi_confirm'),
              onChangeText: text => {
                return text.length <= 32 ? text : text.slice(0, 32)
              },
              onConfirm: (text, { close }) => {
                props.onNameChange(text)
                close()
              },
            })
          }}>
          <Text style={styles.name}>{props.name}</Text>
        </TouchableOpacity>
        <Spacer height={cx(16)} />
        {props.children}
      </View>
    </Card>
  )
}

export default withTheme(SocketItem)
