import React, { useState } from "react";
import { useFileList } from "./useFileList";
import { Button } from "antd";

import styles from "./FileListPopover.module.scss";

export type FileListPopoverProps = {
  root: number;
  onSelect: (id: number) => void;
  onCancel?: () => void;
};

export function FileListPopover({
  root,
  onSelect,
  onCancel,
}: FileListPopoverProps) {
  const [id, setId] = useState<number>(root);
  const { data } = useFileList(id);

  if (!data) {
    return null;
  }

  const list = data.list
    .filter((item) => item.is_folder)
    .map((item) => ({ id: item.id, name: item.name }));

  if (data.parent !== null) {
    list.unshift({ id: data.parent, name: ".." });
  }

  return (
    <div>
      <div>{data.name}</div>
      <ul className={styles.list}>
        {list.map((item) => (
          <li key={item.id}>
            <Button type="link" size="small" onClick={() => setId(item.id)}>
              {item.name}
            </Button>
          </li>
        ))}
      </ul>
      <div className="ant-popover-buttons">
        <Button size="small" onClick={onCancel}>
          취소
        </Button>
        <Button type="primary" size="small" onClick={() => onSelect(id)}>
          선택
        </Button>
      </div>
    </div>
  );
}