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

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

export { InstrumentChart };