import { _ } from "@/lib/translation"
import { countries } from "@/components/TempDesignSystem/Form/Country/countries"

import {
  CalendarIcon,
  EmailIcon,
  HouseIcon,
  PhoneIcon,
} from "@/components/Icons"
import Container from "./Container"
import Field from "../Field"

import styles from "./profile.module.css"

import { serverClient } from "@/lib/trpc/server"

export default async function Profile() {
  const user = await serverClient().user.get()
  const countryName = countries.find(
    (country) => country.code === user.address.country
  )
  return (
    <Container user={user}>
      <section className={styles.info}>
        <Field>
          <Field.Icon>{user.address.country}</Field.Icon>
          <Field.TextLabel>{_("Country")}</Field.TextLabel>
          <Field.Content>{countryName?.name}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <CalendarIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Date of Birth")}</Field.TextLabel>
          {/* TODO: Get this from user when API team adds it to payload */}
          <Field.Content>27/05/1977</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <EmailIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Email")}</Field.TextLabel>
          <Field.Content>{user.email}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <PhoneIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Phone number")}</Field.TextLabel>
          <Field.Content>{user.phoneNumber}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <HouseIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Address")}</Field.TextLabel>
          <Field.Content>{user.address.streetAddress || "-"}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <HouseIcon />
          </Field.Icon>
          <Field.TextLabel>{_("City/State")}</Field.TextLabel>
          {/* TODO: Get this from user when API team adds it to payload */}
          <Field.Content>{user.address.city || "-"}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <HouseIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Zip code")}</Field.TextLabel>
          <Field.Content>{user.address.zipCode}</Field.Content>
        </Field>
      </section>
    </Container>
  )
}