import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import TextView from '../../components/TextView';

export default ConnectType = ({type, available, all, color=textPrimary}) => {
  if (type) {
    return (
      <View style={[styles.connectType, {borderColor: color}]}>
        <TextView style={[styles.typeLabel, {backgroundColor: color}]}>{type}</TextView>
        <TextView style={[styles.typeContent, {color: color}]}><Text style={styles.typeBold}>{available}</Text>/{all}</TextView>
      </View>
    );
  } else {
    return <></>;
  }
}

export const ConnectTypeV2 = ({type, available, all, color=textPrimary}) => {
  if (type) {
    return (
      <View style={[styles.connectTypeV2, {borderColor: color}]}>
        <TextView style={[styles.typeLabelV2, {color: color}]}>{type}</TextView>
        <TextView style={[styles.typeContentV2]}><Text style={styles.typeBoldV2}>{available}</Text>/{all}</TextView>
      </View>
    );
  } else {
    return <></>;
  }
}

const styles = StyleSheet.create({
  connectType: {
    overflow: 'hidden',
    borderWidth: 1,
    borderColor: textPrimary,
    borderRadius: 3,
    marginRight: 16,
    alignItems: 'center',
    flexDirection: 'row',
  },
  connectTypeV2: {
    height: 20,
    overflow: 'hidden',
    borderWidth: 1,
    borderColor: textPrimary,
    borderRadius: 30,
    marginRight: 6,
    alignItems: 'center',
    flexDirection: 'row'
  },
  typeLabel: {
    color: textLight,
    fontSize: 12,
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    backgroundColor: textPrimary
  },
  typeLabelV2: {
    color: textPrimary,
    fontSize: 12,
    paddingLeft: 8,
    paddingRight: 4
  },
  typeContent: {
    color: textSecondary,
    fontSize: 12,
    paddingLeft: 10,
    paddingRight: 6,
  },
  typeContentV2: {
    color: textLight,
    height: 20,
    fontSize: 12,
    paddingLeft: 10,
    paddingRight: 8,
    borderRadius: 30,
    backgroundColor: textPrimary
  },
  typeBold: {
    color: textPrimary,
    fontSize: 14,
    fontWeight: 'bold'
  },
  typeBoldV2: {
    color: textLight,
    fontSize: 12,
    fontWeight: 'bold'
  }
})