import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { useFonts } from 'expo-font';
import { PxRadioButton } from '@proximus/react-native-common-ui/lib/buttons/v7/PxRadioButton';
import AppLoading from 'expo-app-loading';

export default function App() {
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(false);

  const [loaded] = useFonts({
    'Proximus-Bold': require('@proximus/react-native-font-icons/lib/assets/fonts/Proximus-Bold.ttf'),
    'Proximus-Regular': require('@proximus/react-native-font-icons/lib/assets/fonts/Proximus-Regular.ttf'),
    Proximus: require('@proximus/react-native-font-icons/lib/assets/fonts/Proximus-Regular.ttf'),
  });

  if (!loaded) {
    return <AppLoading />;
  }

  return (
    <View style={styles.container}>
      <View style={styles.viewRow}>
        <PxRadioButton
          checked={checked1}
          onPress={() => setChecked1(!checked1)}
          label={checked1 ? 'Selected' : 'Default'}
        />
      </View>
      <View style={styles.viewRow}>
        <PxRadioButton
          checked={checked2}
          onPress={() => setChecked2(!checked2)}
          label={'Error'}
          hasError
        />
      </View>
      <View style={styles.viewRow}>
        <PxRadioButton
          checked={false}
          onPress={() => setChecked2(!checked2)}
          label={'Disabled'}
          disabled
        />
      </View>
      <View style={styles.viewRow}>
        <PxRadioButton
          checked={true}
          onPress={() => setChecked2(!checked2)}
          label={'Read Only'}
          disabled
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start',
    backgroundColor: '#fff',
    paddingHorizontal: 5,
  },
});