import {
  CardStack,
  CardStackContent,
  CardStackEntryField,
} from "@executor-js/react/components/card-stack";
import { Input } from "@executor-js/react/components/input";
import {
  SourceIdentityFieldRows,
  type SourceIdentity,
} from "@executor-js/react/plugins/source-identity";

export function GraphqlSourceFields(props: {
  readonly endpoint: string;
  readonly onEndpointChange: (endpoint: string) => void;
  readonly identity: SourceIdentity;
  readonly endpointDisabled?: boolean;
  readonly namespaceReadOnly?: boolean;
}) {
  return (
    <CardStack>
      <CardStackContent className="border-t-0">
        <CardStackEntryField
          label="Endpoint"
          hint="The endpoint will be introspected to discover available queries and mutations."
        >
          <Input
            value={props.endpoint}
            onChange={(e) => props.onEndpointChange((e.target as HTMLInputElement).value)}
            placeholder="https://api.example.com/graphql"
            className="font-mono text-sm"
            disabled={props.endpointDisabled}
          />
        </CardStackEntryField>
        <SourceIdentityFieldRows
          identity={props.identity}
          namePlaceholder="e.g. Shopify API"
          namespaceReadOnly={props.namespaceReadOnly}
        />
      </CardStackContent>
    </CardStack>
  );
}