import React from "react"
import {Settings, ComboboxOption, TextBlock} from "attio/client"

import schema from "./schema"

const syncFrequencyOptions = [
  {label: "Every 5 minutes", value: "5m"},
  {label: "Every 15 minutes", value: "15m"},
  {label: "Every hour", value: "1h"},
] satisfies ComboboxOption[]

export default Settings.defineWorkspacePage(schema, () => {
  const {Form, Combobox} = Settings.useForm(schema)

  return (
    <Form>
      <TextBlock>Configure sync frequency</TextBlock>
      <Combobox label="Sync frequency" name="sync_frequency" options={syncFrequencyOptions} />
    </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 {Settings, TextBlock} from "attio/client"

import schema from "./schema"
import {githubUserOptionsProvider} from "./github-users-options-provider"

export default Settings.defineWorkspacePage(schema, () => {
  const {Form, Combobox} = Settings.useForm(schema)

  return (
    <Form>
      <TextBlock>Select default GitHub account:</TextBlock>
      <Combobox
        label="Default GitHub account"
        name="default_github_account"
        options={githubUserOptionsProvider}
      />
    </Form>
  )
})