import React, { useCallback, useState } from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  button: {
    alignItems: 'center',
    backgroundColor: 'yellow',
    opacity: 0.9,
    padding: 10,
    margin: 10
  },
  countContainer: {
    alignItems: 'center',
    padding: 10,
  },
  text: {
    backgroundColor: 'red',
    color: 'yellow',
    padding: 10,
    margin: 10
  },
});

export default function HomeScreen() {
  const [selectedIdx, setSelectedIdx] = useState(-1);
  const onStarSelected = useCallback((idx: any) => setSelectedIdx(idx), []);

  return (
    <View
      accessibilityRole="radiogroup"
      accessibilityLabel="Select rating"
    >
      <TouchableOpacity
        accessibilityRole='radio'
        style={styles.button}
        onPress={() => onStarSelected(1)}
        disabled={selectedIdx === 1}
        accessibilityState={{
          checked: selectedIdx === 1,
        }}
      >
         <Text>1 star</Text>
      </TouchableOpacity>

      <TouchableOpacity
        accessibilityRole='radio'
        style={styles.button}
        onPress={() => onStarSelected(2)}
        disabled={selectedIdx === 2}
        accessibilityState={{
          checked: selectedIdx === 2,
        }}
      >
        <Text>2 stars</Text>
      </TouchableOpacity>

      <TouchableOpacity
        accessibilityRole='radio'
        style={styles.button}
        onPress={() => onStarSelected(3)}
        disabled={selectedIdx === 3}
        accessibilityState={{
          checked: selectedIdx === 3,
        }}
      >
        <Text>3 star</Text>
      </TouchableOpacity>

      <TouchableOpacity
        accessibilityRole='radio'
        style={styles.button}
        onPress={() => onStarSelected(4)}
        disabled={selectedIdx === 4}
        accessibilityState={{
          checked: selectedIdx === 4,
        }}
      >
        <Text>4 stars</Text>
      </TouchableOpacity>

      <TouchableOpacity
        accessibilityRole='radio'
        style={styles.button}
        onPress={() => onStarSelected(5)}
        disabled={selectedIdx === 5}
        accessibilityState={{
          checked: selectedIdx === 5,
        }}
      >
        <Text>5 stars</Text>
      </TouchableOpacity>
    </View>
  );
}

expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 12.7.5
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
      Watchman: 2023.02.13.00 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.11.3 - /Users/sugi/.gem/ruby/3.1.2/bin/pod
    IDEs:
      Xcode: /undefined - /usr/bin/xcodebuild
    npmPackages:
      expo: ~51.0.14 => 51.0.14
      expo-router: ~3.5.16 => 3.5.16
      react: 18.2.0 => 18.2.0
      react-dom: 18.2.0 => 18.2.0
      react-native: 0.74.2 => 0.74.2
      react-native-web: ~0.19.10 => 0.19.12
    Expo Workflow: managed

N/A