"use client";
import {
  Annotation,
  AriadneSelection,
  SequenceViewer,
} from "@ninjha01/nitro-ui";
import { useState } from "react";

export const _SequenceViewer = () => {
  const [selection, setSelection] = useState<AriadneSelection | null>({
    start: 14,
    end: 20,
    direction: "forward",
  });
  const annotations: Annotation[] = [
    {
      text: "example",
      type: "CDS",
      direction: "forward",
      start: 10,
      end: 200,
      className:
        "dark:text-amber-800 dark:bg-amber-400 bg-amber-600 text-white",
    },
    {
      text: "example",
      type: "foo",
      direction: "reverse",
      start: 300,
      end: 20,
      className: "dark:text-rose-800 dark:bg-rose-400 bg-rose-600 text-white",
    },
  ];
  const charClassName = ({ sequenceIdx }: { sequenceIdx: number }) => {
    if (sequenceIdx === 0) {
      return "pt-2 dark:text-brand-300 text-brand-600";
    } else if (sequenceIdx === 1) {
      return "dark:text-indigo-300 text-indigo-600";
    } else {
      return "dark:text-amber-300 text-amber-600";
    }
  };

  return (
    <SequenceViewer
      sequences={[
        "ATGC".repeat(100),
        " ".repeat(30) + "ATGC".repeat(20),
        " ".repeat(80) + "ATGC".repeat(70),
      ]}
      annotations={annotations}
      selection={null}
      charClassName={charClassName}
      noValidate
    />
  );
};