import type { FC } from "react";

import { Alert, Group, Stack, Text } from "@mantine/core";
import { useTranslation } from "react-i18next";

import {
	InstrumentMetric,
	InstrumentMetrics,
	InstrumentSection as StockSection,
} from "@/features/instrument-details";

import type { StockPageVm } from "../StockPage.vm";

const compactMetricFormatter = new Intl.NumberFormat("ru-RU", {
	maximumFractionDigits: 2,
	notation: "compact",
});

const metricFormatter = new Intl.NumberFormat("ru-RU", {
	maximumFractionDigits: 2,
	notation: "standard",
});

type StockCompanyProps = Pick<StockPageVm, "company" | "companyState"> & {
	stock: NonNullable<StockPageVm["stock"]>;
};

const StockCompany: FC<StockCompanyProps> = (props) => {
	const { stock } = props;
	const { t } = useTranslation();
	let companyMetricsContent;

	if (props.company) {
		if (props.company.metrics.length > 0) {
			companyMetricsContent = (
				<InstrumentMetrics>
					{props.company.metrics.map((metric) => {
						const label = [t(`stock.metrics.${metric.key}`), metric.period].filter(Boolean).join(" · ");
						const formatter = metric.unit === "money" ? compactMetricFormatter : metricFormatter;
						const value = `${formatter.format(metric.value)} ${metricUnit(metric)}`;

						return (
							<InstrumentMetric key={metric.key} label={label} value={value} />
						);
					})}
				</InstrumentMetrics>
			);
		}
		else {
			companyMetricsContent = <Text c="dimmed">{t("stock.noFundamentals")}</Text>;
		}
	}

	return (
		<StockSection
			embedded
			state={props.companyState}
			title={t("stock.company")}
		>
			<Group gap="xl" mb="md">
				{!!stock.sector && (
					<Text size="sm">
						{t("stock.sector")}:{" "}
						{t(`stock.sectors.${stock.sector}`, {
							defaultValue: stock.sector,
						})}
					</Text>
				)}

				{stock.lot !== null && <Text size="sm">{t("stock.lot", { value: stock.lot })}</Text>}
			</Group>

			{!!props.company && (
				<Stack gap="lg">
					{props.company.unavailable.length > 0 && (
						<Alert aria-live="polite" color="orange" role="status">
							<Text size="sm">{t("stock.partialCompany")}</Text>
						</Alert>
					)}

					{companyMetricsContent}

					<Text c="dimmed" size="xs">
						{t("stock.periodNote")}
					</Text>
				</Stack>
			)}
		</StockSection>
	);
};

function metricUnit(metric: NonNullable<StockPageVm["company"]>["metrics"][number]) {
	if (metric.unit === "money")
		return "₽";

	return metric.unit === "percent" ? "%" : "×";
}

export { StockCompany };