import { useState } from 'react';
import { View, Button, Text } from 'react-native';
import { useStytchB2BClient } from '@stytch/react-native/b2b';

export const GetConnectedApp = ({ connectedAppId }) => {
  const stytch = useStytchB2BClient();
  const [connectedApp, setConnectedApp] = useState(null);

  const getConnectedApp = async () => {
    const response = await stytch.organization.getConnectedApp({
      connected_app_id: connectedAppId
    });
    setConnectedApp(response);
  };

  return (
    <View>
      <Button title="Get Connected App" onPress={getConnectedApp} />
      {connectedApp && (
        <View>
          <Text>Name: {connectedApp.name}</Text>
          <Text>Type: {connectedApp.client_type}</Text>
          <Text>Description: {connectedApp.description}</Text>
        </View>
      )}
    </View>
  );
};

{
  "status_code": 200,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "client_type": "third_party_public",
  "connected_app_id": "...",
  "name": "Third Party Public",
  "description": "Third Party Public App",
  "logo_url": null,
  "active_members": [
    {
      "member_id": "member-test-32fc5024-9c09-4da3-bd2e-c9ce4da9375f",
      "granted_scopes": [
        "openid",
        "profile",
        "email"
      ]
    }
  ]
}