DevReport/src/components/GitRepo/index.tsx

import type React from "react";
import { useState } from "react";
import { Card, Button, List, Checkbox, Tooltip } from "antd";
import AddRepoModal from "./AddRepoModal";
import GenerateReportModal from "./GenerateReportModal";
import type { ReportType } from "../../types/types";

interface GitRepoFormData {
  repoPath: string;
  name: string;
}

interface GitRepoProps {
  onAddRepo: (repo: GitRepoFormData) => void;
  repos: GitRepoFormData[];
  className?: string;
  onGenerateReport: (reportType: ReportType, useAI: boolean) => void;
  onReposSelect?: (selectedRepos: string[]) => void;
}

const GitRepo: React.FC<GitRepoProps> = ({
  onAddRepo,
  repos: initialRepos,
  className,
  onGenerateReport,
  onReposSelect,
}) => {
  const [repos, setRepos] = useState<GitRepoFormData[]>(() => {
    const savedRepos = localStorage.getItem("gitRepos");
    return savedRepos ? JSON.parse(savedRepos) : initialRepos;
  });

  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleModalSubmit = (repoPath: string, name: string) => {
    const newRepo = { name, repoPath };
    const updatedRepos = [...repos, newRepo];
    localStorage.setItem("gitRepos", JSON.stringify(updatedRepos));
    setRepos(updatedRepos);
    onAddRepo(newRepo);
    setIsModalOpen(false);
  };

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const [selectedRepos, setSelectedRepos] = useState<string[]>([]);
  const [isGenerateModalOpen, setIsGenerateModalOpen] = useState(false);

  const handleCheckboxChange = (checkedValues: string[]) => {
    setSelectedRepos(checkedValues);
    onReposSelect?.(checkedValues);
    console.log("选中的仓库:", checkedValues);
  };

  const handleGenerateReport = (reportType: ReportType, useAI: boolean) => {
    console.log("生成报告:", { reportType, useAI, selectedRepos });
    setIsGenerateModalOpen(false);
    onGenerateReport(reportType, useAI);
  };

  return (
    <div className={className}>
      <Card title="Git仓库" className="size-full">
        <AddRepoModal
          isOpen={isModalOpen}
          onCancel={handleCancel}
          onSubmit={handleModalSubmit}
        />
        <GenerateReportModal
          open={isGenerateModalOpen}
          onCancel={() => setIsGenerateModalOpen(false)}
          onSubmit={handleGenerateReport}
        />

        <Checkbox.Group
          className="size-full"
          value={selectedRepos}
          onChange={handleCheckboxChange}
        >
          <List
            className="size-full"
            header={
              <div className="flex justify-between items-center">
                <div>已添加的仓库</div>
                <Button type="primary" onClick={showModal}>
                  添加新仓库
                </Button>
              </div>
            }
            bordered
            dataSource={repos}
            renderItem={(item) => (
              <List.Item>
                <Tooltip title={item.repoPath}>
                  <Checkbox value={item.repoPath}>{item.name}</Checkbox>
                </Tooltip>
              </List.Item>
            )}
            footer={
              selectedRepos.length > 0 && (
                <div className="flex justify-end items-center">
                  <Button
                    type="primary"
                    onClick={() => setIsGenerateModalOpen(true)}
                  >
                    生成预览
                  </Button>
                </div>
              )
            }
          />
        </Checkbox.Group>
      </Card>
    </div>
  );
};

export default GitRepo;