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

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

export interface UATabsProps extends ViewProps {
  theme?: ThemeType
  active: any
  data: UATabData[]
  onSelectChange: (value: UATabData, index: number) => void
}

export interface UATabData {
  title: string
  value?: any
}

const UATabs = (props: UATabsProps) => {

  const styles = StyleSheet.create({
    root: {
      flex: 1,
      height: cx(32),
      paddingVertical: cx(2),
      paddingHorizontal: cx(3),
      backgroundColor: props.theme?.segment.background,
      borderRadius: cx(9),
    },
    tabs: {
      flex: 1,
      flexDirection: 'row',
      overflow: 'hidden',
      borderRadius: cx(7),
    },
    tab: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    tabText: {
      fontSize: cx(14),
      fontFamily: 'helvetica_neue_lt_std_roman',
    },
  })

  return (
    <View style={[styles.root, props.style]}>
      <View style={styles.tabs}>
        {props.data.map((item, index) => {

          const active = props.active === item.value

          return <TouchableOpacity
            key={index}
            style={{ flex: 1 }}
            onPress={() => {
              props.onSelectChange(item, index)
            }}>
            <View style={[
              styles.tab,
              {
                backgroundColor: active ? props.theme?.button.primary : props.theme?.container.background,
              },
            ]}>
              <Text style={[
                styles.tabText,
                {
                  color: active ? props.theme?.button.fontColor : props.theme?.global.secondFontColor,
                },
              ]}>{item.title}</Text>
            </View>
          </TouchableOpacity>
        })}
      </View>
    </View>
  )
}

export default withTheme(UATabs)
