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

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

interface Prop {
  theme?: ThemeType
  title: string
  color?: string
  colorAlpha: number
  enable: boolean
  setEnable: (enable: boolean) => void
  showSwitch?:boolean
  description?: string
}

const LdvSwitch = (props: Prop) => {
  const {title, color, colorAlpha, enable, description, setEnable, showSwitch = true} = props
  return (
      <View style={styles.titleBGView}>
        <View style={{flexDirection: 'column', flex: 1}}>
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            <Text style={{...styles.title, color: props.theme?.global.fontColor}}>{title}</Text>
            <View style={[styles.colorBlock, {backgroundColor: color || props.theme?.card.background, opacity: colorAlpha}]}/>
          </View>
          {description && <Text style={{color: props.theme?.global.fontColor}}>{description}</Text>}
        </View>
        {showSwitch && <SwitchButton value={enable} onValueChange={setEnable}/>}
      </View>
  )
}

const styles = StyleSheet.create({
  titleBGView: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: cx(16),
    paddingVertical: cx(16),
  },
  colorBlock: {
    width: cx(20),
    height: cx(20),
    marginStart: cx(12),
    borderRadius: cx(4),
  },
  title: {
    fontSize: cx(16),
    // fontFamily: 'helvetica_neue_lt_std_bd',
    fontWeight: 'bold',
    maxWidth: cx(220),
  },
})

export default withTheme(LdvSwitch)
