frontend/src/features/instrument-details/ui/InstrumentChart.view.tsx

import type { FC } from "react";

import { AreaChart } from "@mantine/charts";
import {
	Accordion,
	Badge,
	ScrollArea,
	SegmentedControl,
	Table,
	Text,
} from "@mantine/core";
import { useTranslation } from "react-i18next";

import { formatDecimal, formatMoney } from "@/shared/lib";

import type { InstrumentChartVm } from "../model/types";

import classes from "./InstrumentDetails.module.css";
import { InstrumentSection } from "./InstrumentSection.view";

type InstrumentChartProps = { priceUnit?: "percent"; vm: InstrumentChartVm };
const InstrumentChart: FC<InstrumentChartProps> = (props) => {
	const { vm } = props;
	const { t } = useTranslation();
	const priceLabel = (value: string) => {
		if (props.priceUnit === "percent") return `${formatDecimal(value)} %`;
		const currency = vm.candles?.currency;
		return formatMoney(currency ? { currency, value } : undefined);
	};

	return (
		<InstrumentSection
			controls={(
				<div className={classes.controls}>
					<SegmentedControl
						aria-label={t("stock.period")}
						data={["month", "halfYear", "year", "all"].map(value => ({
							label: t(`stock.periods.${value}`),
							value,
						}))}
						onChange={vm.setPeriod}
						value={vm.period}
					/>
				</div>
			)}
			large
			state={vm.candlesState}
			title={t("stock.chart")}
		>
			{!!(vm.candles) && ((
				vm.chartData.length > 0
					? (
							<>
								<AreaChart
									areaProps={{ isAnimationActive: false }}
									aria-label={t(
										props.priceUnit === "percent"
											? "bond.chartLabel"
											: "stock.chartLabel",
										{
											currency:
										props.priceUnit === "percent"
											? t("bond.percentOfNominal")
											: (vm.candles.currency ?? ""),
										},
									)}
									curveType="linear"
									data={vm.chartData}
									dataKey="date"
									gridAxis="y"
									h={310}
									referenceLines={
										vm.averageLine === null
											? []
											: [
													{
														color: "orange.7",
														ifOverflow: "extendDomain",
														label: t("stock.averageLine"),
														y: vm.averageLine,
													},
												]
									}
									series={[
										{ color: "blue.6", label: t("stock.price"), name: "price" },
									]}
									tickLine="none"
									tooltipAnimationDuration={0}
									valueFormatter={value =>
										new Intl.NumberFormat("ru-RU", {
											maximumFractionDigits: 4,
										}).format(value)}
									withDots={vm.chartData.length === 1}
									withGradient
									yAxisProps={{ domain: ["auto", "auto"], width: 64 }}
								/>
								<Text c="dimmed" mt="sm" size="xs">
									{t(
										props.priceUnit === "percent"
											? "bond.chartNote"
											: "stock.chartNote",
									)}
								</Text>
								{!!(vm.hasIncompleteCandle) && ((
									<Text c="dimmed" size="xs">
										{t("stock.incomplete")}
									</Text>
								))}
								{vm.averageLine !== null && ((
									<Text mt="xs" size="sm">
										{t("stock.averageLine")}
										:
										{" "}
										{formatMoney(vm.position?.averagePurchasePrice)}
									</Text>
								))}
								<Accordion
									className={classes.priceTable}
									radius="md"
									variant="contained"
								>
									<Accordion.Item value="prices">
										<Accordion.Control>
											<Text fw={600}>{t("stock.priceTable")}</Text>
											<Text c="dimmed" size="xs">
												{t("stock.priceTableHint", { count: vm.chartData.length })}
											</Text>
										</Accordion.Control>
										<Accordion.Panel>
											<ScrollArea.Autosize
												mah={360}
												type="auto"
												viewportProps={{
													"aria-label": t("stock.priceTable"),
													"role": "region",
													"tabIndex": 0,
												}}
											>
												<Table
													highlightOnHover
													horizontalSpacing="md"
													stickyHeader
													striped
													verticalSpacing="sm"
												>
													<Table.Thead>
														<Table.Tr>
															<Table.Th>{t("stock.date")}</Table.Th>
															<Table.Th>{t("stock.price")}</Table.Th>
															<Table.Th>{t("stock.candle")}</Table.Th>
														</Table.Tr>
													</Table.Thead>
													<Table.Tbody>
														{vm.priceRows.map(candle => (
															<Table.Tr key={candle.time}>
																<Table.Td>{candle.date}</Table.Td>
																<Table.Td>
																	{priceLabel(candle.close)}
																</Table.Td>
																<Table.Td>
																	<Badge
																		color={candle.isComplete ? "gray" : "blue"}
																		size="sm"
																		variant="light"
																	>
																		{t(
																			candle.isComplete
																				? "stock.complete"
																				: "stock.forming",
																		)}
																	</Badge>
																</Table.Td>
															</Table.Tr>
														))}
													</Table.Tbody>
												</Table>
											</ScrollArea.Autosize>
										</Accordion.Panel>
									</Accordion.Item>
								</Accordion>
							</>
						)
					: (
							<Text c="dimmed">
								{t(
									vm.candlesState.partial
										? "investment.partial"
										: "stock.noCandles",
								)}
							</Text>
						)
			))}
		</InstrumentSection>
	);
};

export { InstrumentChart };