import type { GitRepository } from "../../../types/git-repository";
import type { GitStatus } from "../../../api/git-repositories";
import type { ToolType } from "../../../types/tool-type";
import { FileBrowser } from "./FileBrowser";
import { CommitPanel } from "../git/CommitPanel";
import { InstanceList } from "../session/InstanceList";

interface WorkspaceSidebarProps {
	projectId: string;
	repoId: string;
	repositories: GitRepository[];
	gitStatus: GitStatus | null;
	toolTypes: ToolType[];
	onRepoChange: (repoId: string) => void;
	onCommit: () => void;
}

export const WorkspaceSidebar = ({
	projectId,
	repoId,
	repositories,
	gitStatus,
	toolTypes,
	onRepoChange,
	onCommit,
}: WorkspaceSidebarProps) => {
	return (
		<aside className="workspace-sidebar">
			<div className="sidebar-section">
				<label className="form-field">
					Repository
					<select value={repoId} onChange={(e) => onRepoChange(e.target.value)}>
						{repositories.map((repo) => (
							<option key={repo.id} value={repo.id}>
								{repo.name}
							</option>
						))}
					</select>
				</label>
			</div>
			<FileBrowser
				projectId={projectId}
				repoId={repoId}
				gitStatus={gitStatus}
			/>
			{gitStatus && (
				<CommitPanel
					projectId={projectId}
					repoId={repoId}
					modified={gitStatus.modified}
					added={gitStatus.added}
					deleted={gitStatus.deleted}
					untracked={gitStatus.untracked}
					onCommit={onCommit}
				/>
			)}
			<InstanceList
				projectId={projectId}
				repoId={repoId}
				toolTypes={toolTypes}
			/>
		</aside>
	);
};