import React, { useEffect, useState } from "react";
import {
  Row,
  List,
  Button,
  Col,
  Card,
  Typography,
  Tag,
  Table,
  Form,
  Empty,
  Space,
  message,
} from "antd";
import { AppstoreAddOutlined, NodeIndexOutlined } from "@ant-design/icons";

import SubscriptionDataColumns from "../../components/data/SubscriptionData";

import { AgentService } from "../../api/agent";
import { handleAPIError, handleAPIResponse } from "../../utils/errors";
import { useApplication } from "../../context/ApplicationProvider";
import AddSubscription from "./AddSubscription";

const Text = Typography.Text;

const Subscriptions = (props) => {
  const [form] = Form.useForm();
  const service = new AgentService();
  const { currentApp } = useApplication();

  const [subscriptions, setSubscriptions] = useState<any>([]);

  const [addSubscriptionModalVisible, setAddSubscriptionModalVisible] =
    useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    getSubscriptions();
  }, [currentApp]);

  const getSubscriptions = () => {
    setLoading(true);
    service
      .getSubscriptions(currentApp)
      .then(handleAPIResponse)
      .then((subscriptions: any) => {
        setSubscriptions(subscriptions);
      }, handleAPIError)
      .catch(handleAPIError)
      .finally(() => setLoading(false));
  };

  function doAddSubscription(subscription) {
    setLoading(true);
    // TODO:  Uncomment after supporting multiple brokers types
    delete subscription.type;
    service
      .addSubscription(currentApp, subscription)
      .then(handleAPIResponse)
      .then((subscription: any) => {
        setSubscriptions([...subscriptions, subscription]);
        reset();
      }, handleAPIError)
      .catch(handleAPIError)
      .finally(() => {
        setLoading(false);
      });
  }

  function doDeleteSubscription(subscription_name) {
    setLoading(true);
    service
      .deleteSubscription(currentApp, subscription_name)
      .then(handleAPIResponse)
      .then((_: any) => {
        setSubscriptions(
          subscriptions.filter((item) => item.name != subscription_name)
        );
        message.info("Subscription deleted!");
      }, handleAPIError)
      .catch(handleAPIError)
      .finally(() => {
        setLoading(false);
      });
  }

  function reset() {
    setAddSubscriptionModalVisible(false);
    form.resetFields();
  }

  return (
    <Row style={{ width: "100%", marginBottom: "16px" }}>
      <AddSubscription
        visible={addSubscriptionModalVisible}
        loading={loading}
        form={form}
        onAdd={doAddSubscription}
        reset={reset}
      />
      <Card
        size="small"
        style={{ width: "100%" }}
        bodyStyle={{ paddingBottom: 0, paddingRight: 0, paddingLeft: 0 }}
        loading={loading}
        title={
          <Row justify="space-between">
            <Col>
              <Space>
                <NodeIndexOutlined />
                <Text strong>Brokers Subscriptions</Text>
              </Space>
            </Col>
            <Col>
              <Button
                onClick={() => setAddSubscriptionModalVisible(true)}
                size="small"
                type="primary"
                ghost
                icon={<AppstoreAddOutlined />}
              />
            </Col>
          </Row>
        }
      >
        <Table
          dataSource={subscriptions}
          columns={SubscriptionDataColumns({
            handleDeleteSubscription: doDeleteSubscription,
            loading: loading,
          })}
          showHeader={false}
          pagination={false}
          size="small"
          rowKey="name"
          style={{ width: "100%" }}
          scroll={{ x: "100%" }}
          locale={{
            emptyText: (
              <div style={{ textAlign: "center" }}>
                <Empty
                  image={Empty.PRESENTED_IMAGE_SIMPLE}
                  description={
                    <span>
                      No <a href="#API">subscription</a> found
                    </span>
                  }
                />
              </div>
            ),
          }}
          expandable={{
            expandedRowRender: (record) => (
              <>
                <Row justify="space-between" style={{ marginBottom: 6 }}>
                  <Col span={6}>
                    <List.Item.Meta
                      title={"Exchange"}
                      description={<Tag>{record.exchange}</Tag>}
                    />
                  </Col>
                  <Col span={6}>
                    <List.Item.Meta
                      title={"Queue"}
                      description={<Tag>{record.queue}</Tag>}
                    />
                  </Col>
                  <Col span={6}>
                    <List.Item.Meta
                      title={"Routing key"}
                      description={<Tag>{record.routing_key}</Tag>}
                    />
                  </Col>
                  <Col span={6}>
                    <List.Item.Meta
                      title={"Prefetch count"}
                      description={<Tag>{record.prefetch_count}</Tag>}
                    />
                  </Col>
                </Row>
                <Row justify="space-between" style={{ marginBottom: 6 }}>
                  <Col span={6}>
                    <List.Item.Meta
                      title={"Batch size"}
                      description={
                        <Tag>{`${record.batch_max_size_in_mb}mb`}</Tag>
                      }
                    />
                  </Col>
                  <Col span={6}>
                    <List.Item.Meta
                      title={"Batch length"}
                      description={
                        <Tag>{record.batch_max_number_of_messages}</Tag>
                      }
                    />
                  </Col>
                  <Col span={6}>
                    <List.Item.Meta
                      title={"Batch window"}
                      description={
                        <Tag>{`${record.batch_max_window_in_seconds}s`}</Tag>
                      }
                    />
                  </Col>
                  <Col span={6}>
                    <List.Item.Meta
                      title={"Pool size"}
                      description={<Tag>{record.concurrency_pool_size}</Tag>}
                    />
                  </Col>
                </Row>
              </>
            ),
            rowExpandable: (record) => true,
          }}
        />
      </Card>
    </Row>
  );
};

export default Subscriptions;