import React from "react";
import { Table } from "antd";
import { ColumnsType } from "antd/lib/table";
import filesize from "filesize";

import { useParams } from "react-router-dom";
import { useFileList, FileItem } from "./useFileList";
import { FileListItem } from "./FileListItem";

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

const columns: ColumnsType<FileItem> = [
  {
    title: "파일명",
    dataIndex: "name",
    render: (_name: string, item) => <FileListItem item={item} />,
  },
  {
    title: "크기",
    dataIndex: "size",
    width: 120,
    render: (bytes: number, item) =>
      item.is_folder ? "" : filesize(bytes, { round: 0 }),
  },
  {
    title: "",
    dataIndex: "",
    width: 200,
    render: (__: any, item) =>
      item.is_folder ? null : (
        <div className={styles.actions}>
          <a>공유</a>
          <a>이동</a>
          <a>복사</a>
          <a>삭제</a>
        </div>
      ),
  },
];

export function FileList() {
  const id = useParams<{ id: string }>().id;
  const { data } = useFileList(id);

  if (!data) {
    return null;
  }

  const list = [...data.list].sort((itemA, itemB) =>
    itemA.is_folder === itemB.is_folder ? 0 : itemA.is_folder ? -1 : 1
  );

  if (data.parent !== null) {
    list.unshift(({
      id: data.parent,
      is_folder: true,
      name: "..",
      file_type: "folder",
    } as unknown) as FileItem);
  }

  return (
    <div>
      {data.parent !== null && <h3>{data.name}</h3>}
      <Table columns={columns} dataSource={list} pagination={false} />
    </div>
  );
}