import type { FC } from "react";

import { Text } from "@mantine/core";
import { useTranslation } from "react-i18next";

import {
	InstrumentHeader,
	InstrumentPage,
	InstrumentChart as StockChart,
	InstrumentEvents as StockEvents,
	InstrumentPosition as StockPosition,
} from "@/features/instrument-details";

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

import { StockCompany } from "./components/StockCompany.view";
import { StockDividends } from "./components/StockDividends.view";
import { StockQuote } from "./components/StockQuote.view";

type StockPageViewProps = { vm: StockPageVm };

const StockPageView: FC<StockPageViewProps> = (props) => {
	const { vm } = props;
	const { t } = useTranslation();
	const stock = vm.stock;
	if (!stock) return;

	const subtitle = (
		<>
			{stock.ticker} ·{" "}
			{t(`stock.shareTypes.${stock.shareType}`, {
				defaultValue: t("stock.share"),
			})}
		</>
	);

	return (
		<InstrumentPage>
			<InstrumentHeader
				logoSrc={vm.logoSrc}
				name={stock.name}
				subtitle={subtitle}
			>

				{!!vm.company?.description && (
					<Text mt="md" size="sm" style={{ whiteSpace: "pre-line" }}>
						{vm.company.description}
					</Text>
				)}

				<StockQuote quote={vm.quote} quoteState={vm.quoteState} />

				<StockCompany
					company={vm.company}
					companyState={vm.companyState}
					stock={stock}
				/>
			</InstrumentHeader>

			<StockChart vm={vm} />

			<StockPosition vm={vm} />

			<StockDividends
				dividends={vm.dividends}
				logoName={stock.logoName}
				pastDividends={vm.pastDividends}
				state={vm.dividendsState}
				ticker={stock.ticker}
				upcoming={vm.upcoming}
			/>

			<StockEvents vm={vm} />
		</InstrumentPage>
	);
};

export { StockPageView };