import type { Route } from './+types/route'

import { Suspense } from 'react'
import { Await, useOutletContext } from 'react-router'

import { Skeleton } from '@repo/ui/components/skeleton'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from '@repo/ui/components/ui/card'
import { Kbd } from '@repo/ui/components/ui/kbd'
import {
  NativeSelect,
  NativeSelectOption
} from '@repo/ui/components/ui/native-select'
import { request as req } from '@repo/util/request'

import { Button } from '@repo/ui/components/ui/button'

export async function loader({ params, request, context }: Route.LoaderArgs) {
  const { id } = params
  const data = req({
    url: `/users/${id}/emails`,
    request,
    context
  }).then((r) => r.json())

  return { data }
}

export default function Route({ loaderData: { data } }: Route.ComponentProps) {
  const { user } = useOutletContext()

  return (
    <Suspense fallback={<Skeleton />}>
      <Await resolve={data}>
        {({ items = [] }) => (
          <div className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Emails</CardTitle>
                <CardDescription>
                  Podem ser associados vários emails a uma conta. É possível
                  usar qualquer email para recuperar a senha, mas apenas o email
                  principal receberá as mensagens.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul>
                  {items.map(({ sk }: { sk: string }, idx: number) => {
                    const [, email] = sk.split('#')
                    return <li key={idx}>{email}</li>
                  })}
                </ul>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Email principal</CardTitle>
                <CardDescription>
                  <Kbd className="font-mono border">
                    <span className="truncate max-lg:max-w-62">
                      {user.email}
                    </span>
                  </Kbd>{' '}
                  será usado para mensagens e pode ser usado para redefinições
                  de senha.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <form className="flex gap-1.5">
                  <NativeSelect value={user.email}>
                    {items.map(({ sk }: { sk: string }, idx: number) => {
                      const [, email] = sk.split('#')
                      return (
                        <NativeSelectOption key={idx} value={email}>
                          {email}
                        </NativeSelectOption>
                      )
                    })}
                  </NativeSelect>
                  <Button>Alterar email</Button>
                </form>
              </CardContent>
            </Card>
          </div>
        )}
      </Await>
    </Suspense>
  )
}