import { ComboBox, ComboBoxItem } from "@phoenix/components/core/combobox";
import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";

const AWS_REGIONS = [
  { id: "us-east-1", label: "N. Virginia (us-east-1)" },
  { id: "us-east-2", label: "Ohio (us-east-2)" },
  { id: "us-west-1", label: "N. California (us-west-1)" },
  { id: "us-west-2", label: "Oregon (us-west-2)" },
  { id: "ap-south-1", label: "Asia Pacific (Mumbai) (ap-south-1)" },
  { id: "ap-northeast-3", label: "Asia Pacific (Osaka) (ap-northeast-3)" },
  { id: "ap-northeast-2", label: "Asia Pacific (Seoul) (ap-northeast-2)" },
  { id: "ap-southeast-1", label: "Asia Pacific (Singapore) (ap-southeast-1)" },
  { id: "ap-southeast-2", label: "Asia Pacific (Sydney) (ap-southeast-2)" },
  { id: "ap-east-2", label: "Asia Pacific (Taipei) (ap-east-2)" },
  { id: "ap-northeast-1", label: "Asia Pacific (Tokyo) (ap-northeast-1)" },
  { id: "ca-central-1", label: "Canada (Central) (ca-central-1)" },
  { id: "eu-central-1", label: "Europe (Frankfurt) (eu-central-1)" },
  { id: "eu-west-1", label: "Europe (Ireland) (eu-west-1)" },
  { id: "eu-west-2", label: "Europe (London) (eu-west-2)" },
  { id: "eu-west-3", label: "Europe (Paris) (eu-west-3)" },
  { id: "eu-north-1", label: "Europe (Stockholm) (eu-north-1)" },
  { id: "sa-east-1", label: "South America (São Paulo) (sa-east-1)" },
] as const;

export type AWSRegionConfigFormFieldProps = {
  /**
   * The playground instance ID to configure
   */
  playgroundInstanceId: number;
};

/**
 * Form field for configuring the AWS region for Bedrock.
 */
export function AWSRegionConfigFormField({
  playgroundInstanceId,
}: AWSRegionConfigFormFieldProps) {
  const instance = usePlaygroundContext((state) =>
    state.instances.find((instance) => instance.id === playgroundInstanceId)
  );
  const updateModel = usePlaygroundContext((state) => state.updateModel);

  if (!instance) {
    return null;
  }

  const handleRegionChange = (value: string) => {
    updateModel({
      instanceId: playgroundInstanceId,
      patch: {
        region: value,
      },
    });
  };

  return (
    <ComboBox
      size="L"
      label="Region"
      data-testid="bedrock-region-combobox"
      selectedKey={instance.model.region ?? "us-east-1"}
      aria-label="region picker"
      isRequired
      placeholder="Select an Amazon Region"
      inputValue={instance.model.region ?? "us-east-1"}
      onInputChange={handleRegionChange}
      onSelectionChange={(key) => {
        if (typeof key === "string") {
          handleRegionChange(key);
        }
      }}
      allowsCustomValue
    >
      {AWS_REGIONS.map((region) => (
        <ComboBoxItem key={region.id} textValue={region.id} id={region.id}>
          {region.label}
        </ComboBoxItem>
      ))}
    </ComboBox>
  );
}
