import { ApplicationRole } from '@kit/accounts/types/accounts';
import { getTeamAccountSidebarConfig } from '@kit/shared/config';
import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarNavigation,
} from '@kit/ui/shadcn-sidebar';

type AccountModel = {
  label: string | null;
  value: string | null;
  image: string | null;
  application_role: ApplicationRole | null;
};

export function TeamAccountLayoutSidebar(props: {
  account: string;
  accountId: string;
  accounts: AccountModel[];
}) {
  return (
    <SidebarContainer
      account={props.account}
      accountId={props.accountId}
      accounts={props.accounts}
    />
  );
}

function SidebarContainer(props: {
  account: string;
  accountId: string;
  accounts: AccountModel[];
}) {
  const { account, accounts } = props;

  const config = getTeamAccountSidebarConfig(account);
  const collapsible = config.sidebarCollapsedStyle;

  const selectedAccount = accounts.find(({ value }) => value === account);
  const accountName = selectedAccount?.label || account;

  return (
    <Sidebar collapsible={collapsible}>
      <SidebarHeader className="h-24 justify-center">
        <div className="mt-24 flex items-center">
          <h5>{accountName}</h5>
        </div>
      </SidebarHeader>

      <SidebarContent>
        <SidebarNavigation config={config} />
      </SidebarContent>
    </Sidebar>
  );
}