import { useRef, useState } from "react";
import styles from "./collapsibleFile.module.css";
import Chip from "../chip/chip";

type CollapsibleFileProps = {
  fileName: string | undefined;
  children: React.ReactNode;
};

export default function CollapsibleFile({
  fileName,
  children,
}: CollapsibleFileProps) {
  const [isOpen, setIsOpen] = useState(false);

  const childRef = useRef(children);

  return (
    <div className={styles.container}>
      <button
        className={styles.header}
        onClick={(e) => {
          e.preventDefault();
          setIsOpen((prev) => !prev);
        }}
      >
        {fileName && (
          <Chip>
            <span className="codicon codicon-python"></span>
            <span>{fileName}</span>
          </Chip>
        )}
        <span
          className={`codicon codicon-chevron-right ${styles.icon} ${
            isOpen ? styles.open : ""
          }`}
        />
      </button>
      <div
        className={`${styles.contentWrapper} ${isOpen ? styles.expanded : ""}`}
        onClick={(e) => e.stopPropagation()}
        onMouseDown={(e) => e.stopPropagation()}
        onPointerDown={(e) => e.stopPropagation()}
      >
        <div className={styles.content}>{childRef.current}</div>
      </div>
    </div>
  );
}
