import React, { FunctionComponent } from "react";
import { Link } from "react-router-dom";
import { useWorkgroups } from "../gql/queries/workgroups";
import { useDecisionSupportFiles } from "../gql/queries/dsf";

export interface DecisioSupportFileLinkProps {
  decisionSupportFileId: number
}

export const DecisioSupportFileLink: FunctionComponent<DecisioSupportFileLinkProps> = ({ decisionSupportFileId }) => {
  const { decisionSupportFiles } = useDecisionSupportFiles({
    fetchPolicy: "cache-first",
    variables: {
      filter: {
        ids: [decisionSupportFileId]
      }
    }
  });

  const title = decisionSupportFiles.length > 0 ? decisionSupportFiles[0].title : `#${decisionSupportFileId}`;

  return (
    <Link to={`/decisions/${decisionSupportFileId}`}>{title}</Link>
  );
};