import React, { Component } from "react";
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import {
  Button,
  Card,
  Table,
  Tabs,
  Tag,
  Switch,
  Input,
  notification,
  Divider,
  Row,
  Col,
  PageHeader,
  InputNumber,
  Descriptions,
  Badge,
  Collapse,
  Modal,
  Select,
} from "antd";
import {
  getPartyDashboardData,
  getServerDashboardData,
  postUpdateVersionActive,
  postUpdateVideoSelectors,
  postUpdateVideoNameSelectors,
  postSendMessage,
} from "./Api";
import {
  CheckCircleTwoTone,
  CloseCircleTwoTone,
  ReloadOutlined,
  LoadingOutlined,
  EnterOutlined,
  DeleteOutlined,
  PlusCircleFilled,
  SaveFilled,
  SaveOutlined,
  LogoutOutlined,
  SendOutlined,
  PlusCircleOutlined,
} from "@ant-design/icons";

const PLAYER_SOURCES = [
  { text: "Netflix", value: "netflix." },
  { text: "Amazon", value: "amazon." },
  { text: "Hulu", value: "hulu." },
  { text: "Disney+", value: "disneyplus." },
  { text: "YouTube", value: "youtube." },
  { text: "HBO Now", value: "hbonow." },
  { text: "HBO Max", value: "hbomax." },
  { text: "Peacock", value: "peacocktv." },
  { text: "Google Play", value: "play.google." },
  { text: "Crunchyroll", value: "crunchyroll." },
];

const MESSAGE_TYPES = [
  {
    text: "REPLY",
    value: "interactive/text",
  },
  {
    text: "LINK",
    value: "interactive/link",
  },
  {
    text: "MESSAGE",
    value: "",
  },
];

const emptyMessage = {
  type: "",
  text: "",
  uid: "<system>",
  name: "",
  endpoint: "",
  // time set on send,
};

export default class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      partiesOverview: null,
      activeTab: "1",
      refreshing: true,
      selectedParties: [],
      nameSelectors: {},
      selectors: {},
      versions: [],
      activeLimit: 5,
      afkLimit: 10,
      messageModel: false,
      newMessage: emptyMessage,
    };
    this.serverStatusListener = null;
  }
  componentDidMount() {
    this.getPartiesOverview();
    this.getVersionsOverview();
  }
  getPartiesOverview = async () => {
    getPartyDashboardData()
      .then((res) => res.json())
      .then((res) => {
        this.setState({ partiesOverview: res.partyData, refreshing: false });
      });
  };
  getVersionsOverview = () => {
    getServerDashboardData()
      .then((res) => res.json())
      .then((res) => this.setState({ ...res.serverData, refreshing: false }));
  };
  refreshData = () => {
    this.setState({ refreshing: true });
    const { activeTab } = this.state;
    switch (activeTab) {
      case "1":
        this.getPartiesOverview();
        break;
      case "2":
      case "3":
      case "4":
        this.getVersionsOverview();
        break;
      default:
        break;
    }
  };
  tabChange = (activeTab) => {
    this.setState({ activeTab });
  };
  updateVersionMessage = (message, version) => {
    this.setState({ refreshing: true });
    const { versions } = this.state;
    const versionData = versions.filter(
      (v) => v.version.split(".").join("") === version
    )[0];
    versionData.message = message;
    this.updateVersion(version, versionData);
  };
  updateVersionActive = (active, version) => {
    this.setState({ refreshing: true });
    const { versions } = this.state;
    const versionData = versions.filter(
      (v) => v.version.split(".").join("") === version
    )[0];
    versionData.active = active;
    this.updateVersion(version, versionData);
  };
  updateVersion = (version, versionData) => {
    postUpdateVersionActive({ version, versionData })
      .then(() => this.refreshData())
      .catch((err) =>
        notification.error({
          description: err.message,
          message: "Unable To Update",
        })
      );
  };
  getSourceName(source) {
    return PLAYER_SOURCES.filter((p) => p.value === source)[0].text;
  }
  handleVideoSelectorChange = (e, s) => {
    const { selectors } = this.state;
    selectors[s] = e.target.value;
    this.setState({ selectors });
  };
  updateVideoSelector = () => {
    this.setState({ refreshing: true });
    const { selectors } = this.state;
    postUpdateVideoSelectors({ selectors })
      .then(() => this.refreshData())
      .catch((err) => {
        notification.error({
          description: err.message,
          message: "Unable To Update",
        });

        this.setState({ refreshing: false });
      });
  };
  handleVersionMessageChange = (e, v) => {
    const { versions } = this.state;
    versions.filter((vs) => vs.version === v)[0].message = e.target.value;
    this.setState({ versions });
  };
  handleAlertTitleChange = (value, version, index) => {
    const { versions } = this.state;
    versions.filter((vs) => vs.version === version)[0].alerts[
      index
    ].title = value;
    this.setState({ versions });
  };
  handleAlertDescriptionChange = (value, version, index) => {
    const { versions } = this.state;
    versions.filter((vs) => vs.version === version)[0].alerts[
      index
    ].description = value;
    this.setState({ versions });
  };
  handleAlertLinkChange = (value, version, index) => {
    const { versions } = this.state;
    versions.filter((vs) => vs.version === version)[0].alerts[
      index
    ].link = value;
    this.setState({ versions });
  };
  handleAlertLinkTextChange = (value, version, index) => {
    const { versions } = this.state;
    versions.filter((vs) => vs.version === version)[0].alerts[
      index
    ].linkText = value;
    this.setState({ versions });
  };
  deleteAlert = (version, index) => {
    const { versions } = this.state;
    versions.filter((vs) => vs.version === version)[0].alerts.splice(index, 1);
    if (
      versions.filter((vs) => vs.version === version)[0].importantAlert ===
        index ||
      versions.filter((vs) => vs.version === version)[0].alerts.length < index
    ) {
      versions.filter(
        (vs) => vs.version === version
      )[0].importantAlert = undefined;
    }
    this.setState({ versions });
  };
  addEmptyAlert = (version) => {
    const { versions } = this.state;
    versions
      .filter((vs) => vs.version === version)[0]
      .alerts.push({
        title: "",
        description: "",
        link: "",
        linkText: "",
      });
    this.setState({ versions });
  };
  saveAlerts = (version) => {
    this.setState({ refreshing: true });
    const { versions } = this.state;
    const versionData = versions.filter((v) => v.version === version)[0];
    if (versionData.alerts.length > 0)
      this.updateVersion(version.split(".").join(""), versionData);
    else {
      notification.error({
        message: "Missing Alerts",
        description: "Must have atleast one alert",
      });

      this.setState({ refreshing: false });
    }
  };
  changeImportantAlert = (active, version, index) => {
    const { versions } = this.state;
    if (active === false) {
      versions.filter(
        (vs) => vs.version === version
      )[0].importantAlert = undefined;
    } else {
      versions.filter((vs) => vs.version === version)[0].importantAlert = index;
    }
    this.setState({ versions });
  };
  getAddMessageText = () => {
    const { activeTab } = this.state;
    switch (activeTab) {
      case "1":
        return "Send Message";
      case "2":
        return "Add Version";
      case "3":
        return "Add Video Selector";
      case "4":
        return "Add Name Selector";
      default:
        return "";
    }
  };
  getPrettyTime = (t) => {
    return t > 3600
      ? new Date(t * 1000).toISOString().substr(11, 8)
      : new Date(t * 1000).toISOString().substr(14, 5);
  };
  handleVideoNameSelectorChange = (event, source, type) => {
    const { nameSelectors } = this.state;
    nameSelectors[source][type] = event.target.value;
    this.setState({ nameSelectors });
  };
  updateVideoNameSelector = () => {
    this.setState({ refreshing: true });
    const { nameSelectors } = this.state;
    postUpdateVideoNameSelectors({ nameSelectors })
      .then(() => this.refreshData())
      .catch((err) => {
        notification.error({
          description: err.message,
          message: "Unable To Update",
        });

        this.setState({ refreshing: false });
      });
  };
  sendOrAdd = () => {
    const { activeTab } = this.state;
    switch (activeTab) {
      case "1":
        this.setState({ messageModel: true });
        break;
      default:
        break;
    }
  };
  editMessage = (value, field) => {
    const { newMessage } = this.state;
    newMessage[field] = value;
    this.setState({ newMessage });
  };
  sendMessage = async () => {
    this.setState({ refreshing: true });
    const { selectedParties, newMessage } = this.state;
    newMessage.time = new Date().toLocaleString();
    await postSendMessage({ selectedParties, newMessage }).catch((err) => {
      notification.error({
        description: err.message,
        message: "Unable To Send Message",
      });
    });
    this.setState({
      refreshing: false,
      newMessage: {
        type: "",
        text: "",
        uid: "<system>",
        name: "",
        endpoint: "",
      },
      messageModel: false,
    });
  };
  render() {
    const {
      partiesOverview,
      activeTab,
      refreshing,
      selectedParties,
      versions,
      nameSelectors,
      selectors,
      activeLimit,
      afkLimit,
      messageModel,
      newMessage,
    } = this.state;

    const partiesColumns = [
      {
        title: "Party Name",
        dataIndex: "id",
        sorter: (a, b) => (a.id.toLowerCase() < b.id.toLowerCase() ? -1 : 1),
      },
      {
        title: "Source",
        dataIndex: "source",
        sorter: (a, b) =>
          a.source.toLowerCase() < b.source.toLowerCase() ? -1 : 1,
        filters: [
          ...PLAYER_SOURCES,
          {
            text: "Is Playing",
            value: "PLAYING",
          },
          {
            text: "Is Paused",
            value: "PAUSED",
          },
        ],
        onFilter: (v, r) => r.source === v || r.status === v,
        render: (a, r) => (
          <Badge
            status={
              r.status === "PLAYING"
                ? "success"
                : r.status === "PAUSED"
                ? "warning"
                : "error"
            }
            text={this.getSourceName(a)}
          />
        ),
      },
      {
        title: "Created At",
        dataIndex: "createTime",
        defaultSortOrder: "descend",
        sorter: (a, b) => Date.parse(a.createTime) - Date.parse(b.createTime),
        render: (a) => new Date(Date.parse(a)).toLocaleString(),
      },
      {
        title: "Updated At",
        dataIndex: "updateTime",
        filters: [
          {
            text: "Active",
            value: "a",
          },
          {
            text: "Inactive",
            value: "i",
          },
        ],
        onFilter: (v, r) =>
          v === "a"
            ? (Date.now() - Date.parse(r.updateTime)) / 60000 < afkLimit
            : (Date.now() - Date.parse(r.updateTime)) / 60000 > afkLimit,
        sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
        render: (a) => {
          const minutes = (Date.now() - Date.parse(a)) / 60000;
          const dS = new Date(a).toLocaleString();
          return (
            <Tag
              color={
                minutes <= activeLimit
                  ? "success"
                  : minutes <= afkLimit
                  ? "processing"
                  : "default"
              }
            >
              {dS}
            </Tag>
          );
        },
      },
      {
        title: "On Call",
        dataIndex: "onCall",
        filters: [
          {
            text: "On Call",
            value: true,
          },
          {
            text: "Not On Call",
            value: false,
          },
        ],
        render: (a) =>
          a ? (
            <CheckCircleTwoTone twoToneColor="#c0f300" id="call-icon" />
          ) : (
            <CloseCircleTwoTone twoToneColor="#ff5f5f" id="call-icon" />
          ),
        onFilter: (v, r) => r.onCall === v,
      },
    ];

    const versionsColumns = [
      {
        title: "Version",
        dataIndex: "version",
        defaultSortOrder: "descend",
        sorter: (a, b) =>
          parseInt(a.version.split(".").join("")) -
          parseInt(b.version.split(".").join("")),
      },
      {
        title: "Active",
        dataIndex: "active",
        filters: [
          {
            text: "Active",
            value: true,
          },
          {
            text: "Inactive",
            value: false,
          },
        ],
        onFilter: (v, r) => r.active === v,
        render: (a, r) => (
          <Switch
            disabled={refreshing}
            onChange={(c) =>
              this.updateVersionActive(c, r.version.split(".").join(""))
            }
            checked={a}
          />
        ),
      },
      {
        title: "Inactive Message",
        dataIndex: "message",
        render: (a, r) => (
          <Input.Search
            disabled={refreshing}
            onSearch={(v) =>
              this.updateVersionMessage(v, r.version.split(".").join(""))
            }
            value={a}
            onChange={(e) => this.handleVersionMessageChange(e, r.version)}
            enterButton={<EnterOutlined />}
          />
        ),
      },
    ];
    return (
      <div className="dashboard-wrapper">
        <PageHeader
          className="title-header"
          title="WATCH PARTY"
          subTitle="ADMIN DASHBOARD"
          extra={[
            <Button
              onClick={() => firebase.auth().signOut()}
              key="1"
              type="primary"
              danger
              icon={<LogoutOutlined />}
            >
              Logout
            </Button>,
          ]}
        />
        <Modal
          visible={messageModel}
          closable={false}
          destroyOnClose
          maskClosable={false}
          cancelButtonProps={{
            disabled: refreshing,
            onClick: () => this.setState({ messageModel: false }),
          }}
          okButtonProps={{
            disabled: refreshing,
            icon: <SendOutlined />,
            onClick: this.sendMessage,
          }}
          okText="Send Message"
        >
          <Select
            onChange={(e) => this.editMessage(e, "type")}
            value={newMessage.type}
            placeholder="Message Type"
            disabled={refreshing}
          >
            {MESSAGE_TYPES.map((v) => (
              <Select.Option key={`msg-type-option-${v.value}`} value={v.value}>
                {v.text}
              </Select.Option>
            ))}
          </Select>
          <Input.TextArea
            disabled={refreshing}
            value={newMessage.text}
            onChange={(e) => this.editMessage(e.target.value, "text")}
            placeholder="Message"
          />
          {(newMessage.type === "interactive/link" ||
            newMessage.type === "interactive/text") && (
            <Input
              disabled={refreshing}
              value={newMessage.endpoint}
              onChange={(e) => this.editMessage(e.target.value, "endpoint")}
              placeholder={
                newMessage.type === "interactive/link" ? "Link" : "Endpoint"
              }
            />
          )}
          {newMessage.type === "interactive/link" && (
            <Input
              disabled={refreshing}
              value={newMessage.name}
              onChange={(e) => this.editMessage(e.target.value, "name")}
              placeholder="Link Text"
            />
          )}
        </Modal>
        <Card>
          <PageHeader
            extra={[
              activeTab === "1" && (
                <Badge key="5" count="ACTIVE" className="active">
                  <InputNumber
                    prefix="Active"
                    value={activeLimit}
                    onChange={(activeLimit) => this.setState({ activeLimit })}
                  />
                </Badge>
              ),
              activeTab === "1" && (
                <Badge key="4" count="AFK" className="afk">
                  <InputNumber
                    prefix="AFK"
                    key="4"
                    value={afkLimit}
                    onChange={(afkLimit) => this.setState({ afkLimit })}
                  />
                </Badge>
              ),
              <Button
                key="3"
                loading={refreshing}
                disabled={refreshing}
                onClick={this.refreshData}
                shape="circle"
                icon={refreshing ? <LoadingOutlined /> : <ReloadOutlined />}
              />,
              <Button
                key="2"
                onClick={this.sendOrAdd}
                icon={
                  activeTab === "1" ? <SendOutlined /> : <PlusCircleOutlined />
                }
                disabled={activeTab === "1" && selectedParties.length === 0}
              >
                {this.getAddMessageText()}
              </Button>,
              activeTab === "3" && (
                <Button
                  type="primary"
                  onClick={this.updateVideoSelector}
                  icon={<SaveOutlined />}
                  key="6"
                  loading={refreshing}
                >
                  Save Video Selectors
                </Button>
              ),
              activeTab === "4" && (
                <Button
                  type="primary"
                  onClick={this.updateVideoNameSelector}
                  icon={<SaveOutlined />}
                  key="7"
                  loading={refreshing}
                >
                  Save Video Name Selectors
                </Button>
              ),
            ]}
          />
          <Tabs activeKey={activeTab} onChange={this.tabChange}>
            <Tabs.TabPane tab="Parties" key="1">
              <Table
                rowSelection={{
                  selectedRowKeys: selectedParties,
                  onChange: (selectedParties) =>
                    this.setState({ selectedParties }),
                }}
                loading={partiesOverview === null || refreshing}
                pagination={{
                  position: ["bottomCenter"],
                  total: partiesOverview ? partiesOverview.length : 0,
                  showTotal: (t, r) => `${r[0]} to ${r[1]} of ${t}`,
                  defaultPageSize: 10,
                  showSizeChanger: true,
                  pageSizeOptions: [10, 25, 50],
                }}
                rowKey={(p) => p.id}
                dataSource={partiesOverview}
                columns={partiesColumns}
                expandable={{
                  rowExpandable: (r) => true,
                  expandedRowClassName: () => "party-details-wrapper",
                  expandedRowRender: (r) => (
                    <Descriptions bordered column={5}>
                      <Descriptions.Item span={2} label="# Of Users">
                        {r.userCount}
                      </Descriptions.Item>
                      <Descriptions.Item span={3} label="# Of Messages">
                        {r.messageCount}
                      </Descriptions.Item>
                      <Descriptions.Item span={5} label="Show Name">
                        {r.showName}
                      </Descriptions.Item>
                      <Descriptions.Item span={2} label="Show Time">
                        {this.getPrettyTime(r.time)}
                      </Descriptions.Item>
                      <Descriptions.Item span={3} label="Show Status">
                        <Badge
                          status={
                            r.status === "PLAYING"
                              ? "success"
                              : r.status === "PAUSED"
                              ? "warning"
                              : "error"
                          }
                          text={r.status}
                        />
                      </Descriptions.Item>
                    </Descriptions>
                  ),
                }}
              />
            </Tabs.TabPane>
            <Tabs.TabPane tab="Versions" key="2">
              <Table
                loading={refreshing}
                pagination={{ position: ["bottomCenter"] }}
                rowKey={(p) => p.version}
                dataSource={versions}
                columns={versionsColumns}
                expandable={{
                  rowExpandable: (r) => r.alerts,
                  expandedRowClassName: () => "alerts-wrapper",
                  expandedRowRender: (r) => (
                    <Row>
                      {r.alerts.map((a, i) => (
                        <Col key={`${r.version}-alerts-${i}`}>
                          <Card
                            actions={[
                              <Button
                                onClick={() => this.deleteAlert(r.version, i)}
                                danger
                                icon={<DeleteOutlined />}
                                shape="circle"
                                color="danger"
                              />,
                              <Switch
                                onClick={(active) =>
                                  this.changeImportantAlert(
                                    active,
                                    r.version,
                                    i
                                  )
                                }
                                checked={
                                  r.importantAlert && r.importantAlert === i
                                }
                              />,
                            ]}
                          >
                            <Input
                              placeholder="title"
                              value={a.title}
                              onChange={(e) =>
                                this.handleAlertTitleChange(
                                  e.target.value,
                                  r.version,
                                  i
                                )
                              }
                            />
                            <Input.TextArea
                              placeholder="Description"
                              autoSize={{ minRows: 2, maxRows: 2 }}
                              value={a.description}
                              onChange={(e) =>
                                this.handleAlertDescriptionChange(
                                  e.target.value,
                                  r.version,
                                  i
                                )
                              }
                            />
                            <Divider orientation="left">Link</Divider>
                            <Input.Group>
                              <Input
                                value={a.linkText}
                                placeholder="Link Text"
                                onChange={(e) =>
                                  this.handleAlertLinkTextChange(
                                    e.target.value,
                                    r.version,
                                    i
                                  )
                                }
                              />
                              <Input
                                value={a.link}
                                placeholder="Link"
                                onChange={(e) =>
                                  this.handleAlertLinkChange(
                                    e.target.value,
                                    r.version,
                                    i
                                  )
                                }
                              />
                            </Input.Group>
                          </Card>
                        </Col>
                      ))}
                      <Col>
                        <Card
                          onClick={() => this.addEmptyAlert(r.version)}
                          className="add-alert-card"
                        >
                          <PlusCircleFilled />
                        </Card>
                      </Col>
                      <Col>
                        <Card
                          onClick={() => this.saveAlerts(r.version)}
                          className="add-alert-card"
                        >
                          <SaveFilled />
                        </Card>
                      </Col>
                    </Row>
                  ),
                }}
              />
            </Tabs.TabPane>
            <Tabs.TabPane tab="Video Selectors" key="3">
              {Object.keys(selectors)
                .sort()
                .map((source) => (
                  <Input
                    key={`video-selector-${source}`}
                    className="video-selector-input"
                    addonBefore={this.getSourceName(source)}
                    value={selectors[source]}
                    onChange={(e) => this.handleVideoSelectorChange(e, source)}
                  />
                ))}
            </Tabs.TabPane>
            <Tabs.TabPane tab="Name Selectors" key="4">
              <Collapse ghost>
                {Object.keys(nameSelectors)
                  .sort()
                  .map((source) => (
                    <Collapse.Panel
                      key={`name-selector-${source}`}
                      header={this.getSourceName(source)}
                    >
                      <Input
                        key={`video-selector-${source}-show`}
                        className="video-selector-input"
                        addonBefore={"Show"}
                        value={nameSelectors[source]["show"]}
                        onChange={(e) =>
                          this.handleVideoNameSelectorChange(e, source, "show")
                        }
                      />
                      <Input
                        key={`video-selector-${source}-episode`}
                        className="video-selector-input"
                        addonBefore={"Episode"}
                        value={nameSelectors[source]["episode"]}
                        onChange={(e) =>
                          this.handleVideoNameSelectorChange(
                            e,
                            source,
                            "episode"
                          )
                        }
                      />
                    </Collapse.Panel>
                  ))}
              </Collapse>
            </Tabs.TabPane>
          </Tabs>
        </Card>
      </div>
    );
  }
}