import { React, T } from 'Components'
import { useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Skeleton from 'react-loading-skeleton'
// $FlowFixMe
import 'react-select/dist/react-select.css'
import { fetchCompanyDetails } from '../api/sirene'

export default function CompanyDetails({ siren, denomination }) {
	const { i18n } = useTranslation()
	const DateFormatter = useMemo(
		() =>
			new Intl.DateTimeFormat(i18n.language, {
				month: 'short',
				day: 'numeric',
				year: 'numeric'
			}),
		[i18n.language]
	)
	const [company, setCompany] = useState()
	useEffect(() => {
		fetchCompanyDetails(siren).then(setCompany)
	}, [siren])

	return (
		<>
			<h3>
				{denomination || company ? (
					<>
						{denomination ||
							company.denomination ||
							company.prenom_usuel + ' ' + company.nom}{' '}
						<small>({siren})</small>
					</>
				) : (
						<Skeleton width={400} />
					)}
			</h3>

			<p className="ui__ notice">
				<T>Crée le</T>{' '}
				<strong>
					{company ? (
						DateFormatter.format(new Date(company.date_creation))
					) : (
							<Skeleton width={80} />
						)}
				</strong>
				, <T>domiciliée à</T>{' '}
				{company ? (
					<>
						<strong>{company.etablissement_siege.libelle_commune}</strong> (
						{company.etablissement_siege.code_postal})
					</>
				) : (
						<Skeleton width={100} />
					)}
			</p>

		</>
	)
}