import React from "react";
import PropTypes from "prop-types";
import { Typography, List, Button, Flex, Tag } from "antd";
import FileIcon from "../icons/FileIcon";
import InfoCircleIcon from "../icons/InfoCircleIcon";
import StateDisplay from "./StateDisplay";
import MissingPlaceholder from "./MissingPlaceholder";
const { Text } = Typography;

const FileList = ({ files, type = "file" }) => {
  if ((files?.length || 0) <= 0) {
    return (
      <MissingPlaceholder
        message={`No ${type == "file" ? "files" : "document files"} added.`}
      />
    );
  }
  return (
    <List
      dataSource={files}
      size="small"
      bordered
      renderItem={(file) => (
        <List.Item actions={[]}>
          <List.Item.Meta
            description={
              <Flex gap={"middle"} justify="space-between" align="center">
                <Flex gap={"small"}>
                  <Text>
                    <FileIcon />
                  </Text>
                  <Text>{file.name || file._id}</Text>
                  <Tag>{file?.extension ? file.extension : "Unknown"}</Tag>
                </Flex>
                <Flex gap={"middle"} align="center">
                  <StateDisplay state={file.state} showProgress={true} />
                  <Button
                    key="info"
                    icon={<InfoCircleIcon />}
                    type="text"
                    size="small"
                  />
                </Flex>
              </Flex>
            }
          />
        </List.Item>
      )}
    />
  );
};

FileList.propTypes = {
  files: PropTypes.array.isRequired,
};

export default FileList;
