import { Empty, Result, Spin } from "antd";

import { useMaterial } from "../../../shared/hooks/use-materials";
import { MaterialContent } from "./MaterialContent";

interface MaterialDetailPanelProps {
  materialId: null | string;
  projectId: string;
}

export function MaterialDetailPanel({ materialId, projectId }: MaterialDetailPanelProps) {
  if (!materialId) {
    return (
      <div className="app-inbox-content">
        <Empty description="请在左侧选择素材" />
      </div>
    );
  }

  return <MaterialDetailPanelInner materialId={materialId} projectId={projectId} />;
}

function MaterialDetailPanelInner({ materialId, projectId }: MaterialDetailPanelProps) {
  const { data, error, isLoading } = useMaterial({ materialId, projectId });

  if (isLoading) {
    return (
      <div className="app-inbox-content">
        <Spin />
      </div>
    );
  }

  if (error) {
    return (
      <div className="app-inbox-content">
        <Result subTitle="加载素材详情失败" />
      </div>
    );
  }

  if (!data) {
    return (
      <div className="app-inbox-content">
        <Empty description="请在左侧选择素材" />
      </div>
    );
  }

  return <MaterialContent material={data} />;
}