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

const PrinterList = ({ printers, type = "printer" }) => {
  if ((printers?.length || 0) <= 0) {
    return (
      <MissingPlaceholder
        message={`No ${
          type == "printer" ? "printers" : "document printers"
        } added.`}
      />
    );
  }
  return (
    <List
      dataSource={printers}
      size="small"
      bordered
      renderItem={(printer) => (
        <List.Item actions={[]}>
          <List.Item.Meta
            description={
              <Flex gap={"middle"} justify="space-between" align="center">
                <Flex gap={"small"}>
                  <Text>
                    {type == "printer" && <PrinterIcon />}
                    {type == "documentPrinter" && <DocumentPrinterIcon />}
                  </Text>
                  <Text>{printer.name || printer._id}</Text>
                </Flex>
                <Flex gap={"middle"} align="center">
                  <StateDisplay state={printer.state} />
                  <Button
                    key="info"
                    icon={<InfoCircleIcon />}
                    type="text"
                    size="small"
                  />
                </Flex>
              </Flex>
            }
          />
        </List.Item>
      )}
    />
  );
};

PrinterList.propTypes = {
  printers: PropTypes.array.isRequired,
};

export default PrinterList;