import {Text, TouchableOpacity, View} from 'react-native'
import React from 'react'
import {Utils} from 'tuya-panel-kit'

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

const SegmentControl = (props) => {

  const {title1, title2, isFirst, setIsFirst, style, tabStyle} = props

  return (<View style={{}}>
    <View style={[{
      backgroundColor: props.theme?.segment.background,
      marginHorizontal: convertX(24),
      marginVertical: convertX(0),
      borderRadius: convertX(8.9),
      flexDirection: 'row',
    }, style]}>
      <TouchableOpacity style={
        [{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          margin: convertX(2),
          borderRadius: convertX(6.9),
        }, isFirst ?
          {backgroundColor: props.theme?.segment.active, margin: convertX(2), borderRadius: 6.9} :
          {backgroundColor: props.theme?.segment.background}, tabStyle]
      } onPress={() => setIsFirst(true)}>
        <Text
          style={{
            color: props.theme?.segment.fontColor,
            fontSize: convertX(12),
            fontFamily: isFirst ? 'helvetica_neue_lt_std_bd' : 'helvetica_neue_lt_std_roman',
            marginVertical: convertX(10),
          }}>
          {title1}
        </Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={
          [{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            margin: convertX(2),
            borderRadius: convertX(6.9),
          },
            !isFirst ?
              {backgroundColor: props.theme?.segment.active} :
              {backgroundColor: props.theme?.segment.background}, tabStyle]
        }
        onPress={() => setIsFirst(false)}>
        <Text
          style={{
            color: props.theme?.segment.fontColor,
            fontSize: convertX(12),
            fontFamily: isFirst ? 'helvetica_neue_lt_std_roman' : 'helvetica_neue_lt_std_bd',
            marginVertical: convertX(10),
          }}>
          {title2}
        </Text>
      </TouchableOpacity>
    </View>
  </View>)
}

export default withTheme(SegmentControl)
