export const _MoleculeViewerWithUrl = () => {
  const highlights = [
    {
      label: "Red Annotation",
      hexColor: "#fb7185",
      start: 14,
      end: 30,
    },
    {
      label: "Green Annotation",
      hexColor: "#4ade80",
      start: 0,
      end: 10,
    },
  ];
  const [currentHighlightType, setCurrentHighlightType] = useState<
    "red" | "green"
  >("red");
  const currentHighlight =
    currentHighlightType === "red" ? highlights[0] : highlights[1];
  return (
    <span>
      <Button
        onClick={() =>
          setCurrentHighlightType((prev) => (prev === "red" ? "green" : "red"))
        }
        className="mb-8"
        variant={currentHighlightType === "red" ? "primary" : "secondary"}
      >
        {currentHighlightType === "red" ? "Show Green" : "Show Red"}
      </Button>
      <MoleculeViewer
        className="mx-8 max-h-[300px] max-w-xl"
        pdbUrl="https://files.rcsb.org/download/1CRN.pdb"
        highlights={[currentHighlight]}
      />
    </span>
  );
};

export const _MoleculeViewerWithStr = () => {
  const highlights = [
    {
      label: "Red Annotation",
      hexColor: "#fb7185",
      start: 14,
      end: 30,
    },
    {
      label: "Green Annotation",
      hexColor: "#4ade80",
      start: 0,
      end: 10,
    },
  ];
  const [currentHighlightType, setCurrentHighlightType] = useState<
    "red" | "green"
  >("red");
  const currentHighlight =
    currentHighlightType === "red" ? highlights[0] : highlights[1];

  const [pdbStr, setPdbStr] = useState<string | null>(null);
  useEffect(function fetchPdb() {
    fetch("https://files.rcsb.org/download/1CRN.pdb")
      .then((res) => res.text())
      .then(setPdbStr);
  }, []);

  return (
    <span>
      <Button
        onClick={() =>
          setCurrentHighlightType((prev) => (prev === "red" ? "green" : "red"))
        }
        className="mb-8"
        variant={currentHighlightType === "red" ? "primary" : "secondary"}
      >
        {currentHighlightType === "red" ? "Show Green" : "Show Red"}
      </Button>
      {pdbStr === null ? (
        <span className="h-[300px] w-full">Loading...</span>
      ) : (
        <MoleculeViewer
          className="mx-8 max-h-[300px] max-w-xl"
          pdbStr={pdbStr}
          highlights={[currentHighlight]}
        />
      )}
    </span>
  );
};