import React, { useCallback } from "react";
import { Table, Popconfirm, message } from "antd";
import { ColumnsType } from "antd/lib/table";
import filesize from "filesize";

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

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

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

  const api = useApi();

  const handleDelete = useCallback(
    async (id: number) => {
      await api.delete(`/items/${id}/`);
      await reload();
      message.info("삭제되었습니다");
    },
    [api, reload]
  );

  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>
      <div className={styles.header}>
        <div>{data.parent !== null && <h3>{data.name}</h3>}</div>
        <div className={styles.actions}>
          <a>파일 업로드</a>
          <a>새 폴더</a>
        </div>
      </div>
      <Table
        rowKey="id"
        columns={getColumns({
          handleDelete,
        })}
        dataSource={list}
        pagination={false}
      />
    </div>
  );
}

type GetColumnsParams = {
  handleDelete: (id: number) => void;
};

function getColumns({ handleDelete }: GetColumnsParams): ColumnsType<FileItem> {
  return [
    {
      title: "파일명",
      key: "name",
      dataIndex: "name",
      render: (_name: string, item) => <FileListItem item={item} />,
    },
    {
      title: "크기",
      key: "size",
      dataIndex: "size",
      width: 120,
      render: (bytes: number, item) =>
        item.is_folder ? "" : filesize(bytes, { round: 0 }),
    },
    {
      title: "",
      key: "action",
      dataIndex: "",
      width: 200,
      render: (__: any, item) =>
        item.is_folder ? null : (
          <div className={styles.actions}>
            <a>공유</a>
            <a>이동</a>
            <a>복사</a>
            <Popconfirm
              title="정말로 삭제하시겠습니까?"
              onConfirm={() => handleDelete(item.id)}
              okText="삭제"
              cancelText="취소"
            >
              <a>삭제</a>
            </Popconfirm>
          </div>
        ),
    },
  ];
}