import React from "react";
import {
	Forms,
	useForm,
	showToast,
	ComboboxOption,
	TextBlock,
} from "attio/client";

const colorOptions = [
	{ label: "Red", value: "#ff0000" },
	{ label: "Green", value: "#00ff00" },
	{ label: "Blue", value: "#0000ff" },
] satisfies ComboboxOption[];

export function PickColorDialog() {
	const { Form, SubmitButton, Combobox } = useForm(
		{
			color: Forms.string(),
		},
		{
			color: "",
		},
	);
	return (
		<Form
			onSubmit={async (values) => {
				await showToast({
					title: "Form submitted",
					variant: "success",
					text: `You picked ${values.color}`,
				});
			}}
		>
			<TextBlock>Pick a color</TextBlock>
			<Combobox label="Color" name="color" options={colorOptions} />
			<SubmitButton label="Submit" />
		</Form>
	);
}

import { z } from "zod";

export const githubUserSchema = z.object({
	id: z.number(),
	login: z.string(),
});

export type GithubUser = z.infer<typeof githubUserSchema>;

import { GithubUser, githubUserSchema } from "./github-user-schema";

export default async function getGithubUser(id: string):Promise<GithubUser | undefined> {
	const user = await fetch(`https://api.github.com/users/${id}`);
	const userData = await user.json();
	const parsed = githubUserSchema.safeParse(userData);
	if (!parsed.success) {
		return undefined;
	}
	return parsed.data
}

import { GithubUser, githubUserSchema } from "./github-user-schema";

export default async function searchGithubUsers(search: string):Promise<GithubUser[]> {
	const users = await fetch(`https://api.github.com/search/users?q=${search}`);
	const usersData = await users.json();
	const parsed = githubUserSchema.array().safeParse(usersData.items);
	if (!parsed.success) {
		return [];
	}
	return parsed.data;
}

import { ComboboxOptionsProvider } from "attio/client";
import getGithubUser from "./get-github-user.server";
import searchGithubUsers from "./search-github-users.server";

export const githubUserOptionsProvider = {
	getOption: async (value: string) => {
		const user = await getGithubUser(value);
		return user ? { label: user.login } : undefined;
	},

	search: async (search: string) => {
		const users = await searchGithubUsers(search);
		return users.map((user) => ({
			value: user.id.toString(),
			label: user.login,
		}));
	},
} satisfies ComboboxOptionsProvider;

import React from "react";
import { Forms, useForm, showToast, TextBlock } from "attio/client";
import { githubUserOptionsProvider } from "./github-users-options-provider";

export function PickGithubUserDialog() {
	const { Form, SubmitButton, Combobox } = useForm(
		{
			assignTo: Forms.string(),
		},
		{
			assignTo: "",
		},
	);
	return (
		<Form
			onSubmit={async (values) => {
				await showToast({
					title: "Form submitted",
					variant: "success",
					text: `You picked user id #${values.assignTo}`,
				});
			}}
		>
			<TextBlock>Pick a Github user:</TextBlock>
			<Combobox
				label="Assign to"
				name="assignTo"
				options={githubUserOptionsProvider}
			/>
			<SubmitButton label="Submit" />
		</Form>
	);
}