'use client';


//===========================================
// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
//===========================================
import { HexclaveAssertionError } from "@hexclave/shared/dist/utils/errors";
import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
import {
  Button,
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
  Skeleton,
  Typography,
  cn,
} from "@hexclave/ui";
import { PlusCircle, Settings } from "lucide-react";
import { Suspense, useMemo } from "react";
import { Team, useStackApp, useUser } from "..";
import { useTranslation } from "../lib/translations";
import { TeamIcon } from "./team-icon";

type MockTeam = {
  id: string,
  displayName: string,
  profileImageUrl?: string | null,
};

type TeamSwitcherProps<AllowNull extends boolean = false> = {
  team?: Team,
  teamId?: string,
  teams?: Team[],
  allowNull?: AllowNull,
  nullLabel?: string,
  triggerClassName?: string,
  onChange?: (team: AllowNull extends true ? Team | null : Team) => Promise<void>,
  // Mock data props
  mockUser?: {
    team?: MockTeam,
  },
  mockTeams?: MockTeam[],
  mockProject?: {
    config: {
      clientTeamCreationEnabled: boolean,
    },
  },
};

export function TeamSwitcher<AllowNull extends boolean = false>(props: TeamSwitcherProps<AllowNull>) {
  return <Suspense fallback={<Fallback />}>
    <Inner {...props} />
  </Suspense>;
}

function Fallback() {
  return <Skeleton className="h-9 w-full max-w-64 stack-scope" />;
}

function Inner<AllowNull extends boolean>(props: TeamSwitcherProps<AllowNull>) {
  const { t } = useTranslation();
  const appFromHook = useStackApp();
  const userFromHook = useUser();

  // Use mock data if provided, otherwise use real data
  const app = props.mockUser ? {
    useProject: () => props.mockProject || { config: { clientTeamCreationEnabled: false } },
    redirectToAccountSettings: async () => {},
  } : appFromHook;

  const user = props.mockUser ? {
    selectedTeam: props.mockUser.team,
    useTeams: () => props.mockTeams || [],
    setSelectedTeam: async () => {}, // Mock function
  } : userFromHook;

  const project = app.useProject();
  const rawTeams = props.teams ?? user?.useTeams();
  const selectedTeam = props.team || rawTeams?.find(team => team.id === props.teamId);
  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);


  return (
    <Select
      value={selectedTeam?.id || (props.allowNull ? 'null-sentinel' : undefined)}
      onValueChange={(value) => {
        runAsynchronouslyWithAlert(async () => {
          let team: MockTeam | null = null;
          if (value !== 'null-sentinel') {
            team = teams?.find(team => team.id === value) || null;
            if (!team) {
              throw new HexclaveAssertionError('Team not found, this should not happen');
            }
          } else {
            team = null;
          }

          // Call onChange callback if provided
          if (props.onChange) {
            await props.onChange(team as Team);
          }
        });
      }}
    >
      <SelectTrigger className={cn("stack-scope max-w-64", props.triggerClassName)}>
        <SelectValue placeholder="Select team"/>
      </SelectTrigger>
      <SelectContent className="stack-scope">
        {selectedTeam ? <SelectGroup>
          <SelectLabel>
            <div className="flex items-center justify-between">
              <span>
                {t('Current team')}
              </span>
              <Button
                variant='ghost'
                size='icon'
                className="h-6 w-6"
                onClick={() => {
                  if (!props.mockUser) {
                    runAsynchronouslyWithAlert(app.redirectToAccountSettings());
                  }
                }}
              >
                <Settings className="h-4 w-4"/>
              </Button>
            </div>
          </SelectLabel>
          <SelectItem value={selectedTeam.id}>
            <div className="flex items-center gap-2">
              <TeamIcon team={selectedTeam as Team} />
              <Typography className="max-w-40 truncate">{selectedTeam.displayName}</Typography>
            </div>
          </SelectItem>
        </SelectGroup> : undefined}

        {props.allowNull && <SelectGroup>
          <SelectItem value="null-sentinel">
            <div className="flex items-center gap-2">
              <TeamIcon team='personal' />
              <Typography className="max-w-40 truncate">{props.nullLabel || t('No team')}</Typography>
            </div>
          </SelectItem>
        </SelectGroup>}

        {teams?.length ?
          <SelectGroup>
            <SelectLabel>{t('Other teams')}</SelectLabel>
            {teams.filter(team => team.id !== selectedTeam?.id)
              .map(team => (
                <SelectItem value={team.id} key={team.id}>
                  <div className="flex items-center gap-2">
                    <TeamIcon team={team as Team} />
                    <Typography className="max-w-64 truncate">{team.displayName}</Typography>
                  </div>
                </SelectItem>
              ))}
          </SelectGroup> : null}

        {!teams?.length && !props.allowNull ?
          <SelectGroup>
            <SelectLabel>{t('No teams yet')}</SelectLabel>
          </SelectGroup> : null}

        {project.config.clientTeamCreationEnabled && <>
          <SelectSeparator/>
          <div>
            <Button
              onClick={() => {
                if (!props.mockUser) {
                  runAsynchronouslyWithAlert(app.redirectToAccountSettings());
                }
              }}
              className="w-full"
              variant='ghost'
            >
              <PlusCircle className="mr-2 h-4 w-4"/> {t('Create a team')}
            </Button>
          </div>
        </>}
      </SelectContent>
    </Select>
  );
}