import { Space, Table, message } from "antd";
import {
  FormatDatetime,
  MyAvatar,
  WebSocketContext,
  getUserSessionFromLocalStorage,
} from "../../utils";
import { useContext } from "react";
import { Link } from "react-router-dom";
import { Constants } from "../../utils";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "Used by",
    dataIndex: "usedByUserId",
    key: "usedByUserId",
  },
  {
    title: "Last used",
    dataIndex: "lastUsed",
    key: "lastUsed",
  },
  {
    title: "Registered at",
    dataIndex: "registeredAt",
    key: "registeredAt",
  },
  {
    title: "User-Agent",
    dataIndex: "userAgent",
    key: "userAgent",
  },
  {
    title: "Action",
    dataIndex: "action",
    key: "action",
    render: (_, record) => (
      <Space size="middle">
        <Link
          to="#"
          onClick={() => {
            if (localStorage.getItem("userId") === record._usedByUserId) {
              message.error("You are already using this scanner");
              return;
            }

            fetch(`${Constants.API_ADDRESS}/scanner/${record.key}`, {
              method: "PATCH",
              headers: {
                "Content-Type": "application/json",
                "X-Authorization": getUserSessionFromLocalStorage(),
              },
            }).catch((err) => console.error(err));
          }}
        >
          Use scanner
        </Link>
      </Space>
    ),
  },
];

export default function Scanners() {
  const webSocketContext = useContext(WebSocketContext);

  const getTableItems = () => {
    if (webSocketContext.Scanners === null) return [];

    let items = [];

    webSocketContext.Scanners.forEach((scanner) => {
      const usedByUser = webSocketContext.AllUsers.find(
        (user) => user.Id === scanner.UsedByUserId
      );

      items.push({
        key: scanner.Id,
        name: scanner.Name,
        usedByUserId:
          scanner.UsedByUserId === "" ? (
            Constants.TEXT_EMPTY_PLACEHOLDER
          ) : (
            <>
              <MyAvatar avatar={usedByUser.Avatar} />
              <span> {usedByUser.Username}</span>
            </>
          ),
        _usedByUserId: scanner.UsedByUserId,
        lastUsed: scanner.LastUsed,
        registeredAt: FormatDatetime(scanner.RegisteredAt),
        userAgent: scanner.UserAgent,
      });
    });

    return items;
  };

  return (
    <>
      <h1 style={{ fontWeight: "bold", float: "left" }}>
        Scanners (
        {webSocketContext.Scanners === null
          ? "0"
          : webSocketContext.Scanners.length}
        )
      </h1>

      <Table columns={columns} dataSource={getTableItems()} />
    </>
  );
}

/*
<Popover
  title="Scan this on mobile"
  content={<QRCode value={"test"} bordered={false} />}
>
  <Button
    style={{ float: "right" }}
    type="primary"
    icon={<PlusOutlined />}
  >
    Add scanner
  </Button>
</Popover>
*/