import { NavLink, Outlet, useOutletContext, useParams } from 'react-router-dom';
import { useBrokerPortfolio } from '../../hooks/useBrokerPortfolio';

export type BrokerAccountContext = {
  accountId: string;
  portfolio: ReturnType<typeof useBrokerPortfolio>;
};

export function useBrokerAccountContext() {
  return useOutletContext<BrokerAccountContext>();
}

export function BrokerAccountLayout() {
  const { accountId = '' } = useParams();
  const portfolio = useBrokerPortfolio(accountId);
  const basePath = `/broker/${encodeURIComponent(accountId)}`;
  const context: BrokerAccountContext = { accountId, portfolio };
  const linkClassName = ({ isActive }: { isActive: boolean }) =>
    `broker-account__link${isActive ? ' is-active' : ''}`;

  return (
    <div className="broker-account">
      <header className="broker-account__header">
        <h1>{portfolio.data?.account.name || 'Брокерский счёт'}</h1>
      </header>

      <div className="broker-account__workspace">
        <nav className="broker-account__navigation" aria-label="Разделы брокерского счёта">
          <NavLink className={linkClassName} end to={basePath}>
            Обзор
          </NavLink>
          <NavLink className={linkClassName} to={`${basePath}/shares`}>
            Акции
          </NavLink>
          <NavLink className={linkClassName} to={`${basePath}/bonds`}>
            Облигации
          </NavLink>
          <NavLink className={linkClassName} to={`${basePath}/operations`}>
            Операции
          </NavLink>
        </nav>

        <div className="broker-account__content">
          <Outlet context={context} />
        </div>
      </div>
    </div>
  );
}