web/packages/design-system/lib/components/Form/Country/CountrySelect.tsx

'use client'

import { useMemo } from 'react'
import { useController } from 'react-hook-form'

import { Select } from '../../Select'

import { ErrorMessage } from '../ErrorMessage'

import type { CountryProps } from './country'

const prioCountryCode = ['DE', 'DK', 'FI', 'NO', 'SE']

export default function CountrySelect({
  className = '',
  errorMessage,
  label,
  countries,
  lang = 'en',
  name = 'country',
  disabled = false,
  registerOptions = {},
}: CountryProps) {
  const { field, formState, fieldState } = useController({
    name,
    rules: registerOptions,
  })

  const items = useMemo(() => {
    function mapCountry(country: (typeof countries)[number]) {
      return {
        value: country.code,
        label: country.displayName || country.name,
      }
    }

    const collator = new Intl.Collator(lang)
    const prioCountries = countries
      .filter((c) => prioCountryCode.includes(c.code))
      .map(mapCountry)
      .sort((a, b) => collator.compare(a.label, b.label))

    const restCountries = countries
      .filter((c) => !prioCountryCode.includes(c.code))
      .map(mapCountry)
      .sort((a, b) => collator.compare(a.label, b.label))

    return [...prioCountries, ...restCountries]
  }, [lang, countries])

  return (
    <div className={className}>
      <Select
        items={items}
        label={label}
        isDisabled={disabled}
        isRequired={Boolean(registerOptions?.required)}
        isInvalid={fieldState.invalid}
        name={name}
        onBlur={field.onBlur}
        onSelectionChange={(c) => field.onChange(c ?? '')}
        selectedKey={field.value}
        data-testid={name}
      />
      <ErrorMessage
        errors={formState.errors}
        name={name}
        messageLabel={errorMessage}
      />
    </div>
  )
}