import React, { useState, Fragment } from "react";
import { Popconfirm, Popover, Button, message } from "antd";
import { FileItem } from "./useFileList";
import styles from "./FileItemActions.module.scss";
import { FileListPopover } from "./FileListPopover";
import { FileRenamePopover } from "./FileRenamePopover";

export type FileItemActionsProps = {
  item: FileItem;
  onRename: (id: number, name: string) => void;
  onMove: (id: number, to: number) => void;
  onCopy: (id: number, to: number) => void;
  onDelete: (id: number) => void;
};

export function FileItemActions({
  item,
  onRename,
  onMove,
  onCopy,
  onDelete,
}: FileItemActionsProps) {
  const [rename, setRename] = useState<boolean>(false);
  const [move, setMove] = useState<boolean>(false);
  const [copy, setCopy] = useState<boolean>(false);

  return (
    <div className={styles.actions}>
      <Popover
        title="변경할 이름을 입력하세요"
        content={
          <FileRenamePopover
            name={item.name}
            onRename={(name: string) => {
              if (name === item.name) {
                return message.error("동일한 이름으로는 변경할 수 없습니다");
              }
              if (!name) {
                return message.error("변경할 이름을 입력하세요");
              }
              onRename(item.id, name);
              setRename(false);
            }}
            onCancel={() => setRename(false)}
          />
        }
        trigger="click"
        visible={rename}
        onVisibleChange={setRename}
      >
        <Button type="link" size="small">
          이름 변경
        </Button>
      </Popover>
      {!item.is_folder && (
        <Button type="link" size="small">
          공유
        </Button>
      )}
      <Popover
        title="이동할 폴더를 선택하세요"
        content={
          <FileListPopover
            root={item.parent}
            onSelect={(to: number) => {
              if (to === item.parent) {
                return message.error("같은 폴더로는 이동할 수 없습니다");
              }
              onMove(item.id, to);
              setMove(false);
            }}
            onCancel={() => setMove(false)}
          />
        }
        trigger="click"
        visible={move}
        onVisibleChange={setMove}
      >
        <Button type="link" size="small">
          이동
        </Button>
      </Popover>
      {!item.is_folder && (
        <Popover
          title="복사할 폴더를 선택하세요"
          content={
            <FileListPopover
              root={item.parent}
              onSelect={(to: number) => {
                onCopy(item.id, to);
                setCopy(false);
              }}
              onCancel={() => setCopy(false)}
            />
          }
          trigger="click"
          visible={copy}
          onVisibleChange={setCopy}
        >
          <Button type="link" size="small">
            복사
          </Button>
        </Popover>
      )}
      {!item.is_folder && (
        <Popconfirm
          title="정말로 삭제하시겠습니까?"
          onConfirm={() => onDelete(item.id)}
          okText="삭제"
          cancelText="취소"
        >
          <Button type="link" size="small">
            삭제
          </Button>
        </Popconfirm>
      )}
    </div>
  );
}