import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { useDispatch, useSelector } from "react-redux";
import { UAParser } from "ua-parser-js";
import moment from "moment";
import { Map } from "immutable";

import { getUserTokens, deleteUserToken } from "../../actions/users";

const UserTokens = () => {
  const dispatch = useDispatch();

  const tokens = useSelector((state) => state.userStore.get("tokens"));

  useEffect(() => {
    dispatch(getUserTokens());
  }, [dispatch]);

  return (
    <div className="row">
      <div className="col-12">
        {tokens.map((el, index) => (
          <Token
            key={index}
            data={el}
            deleteToken={(token) => dispatch(deleteUserToken(token))}
          />
        ))}
      </div>
    </div>
  );
};

const Token = (props) => {
  const ua = UAParser(props.data.get("user_agent"));
  return (
    <div className="card mt-3">
      <div className="card-header">
        <h4>
          <Logo {...ua} />
          <span className="ml-3">{props.data.get("description")}</span>
          <Actions {...props} />
        </h4>
      </div>
      <div className="card-body row">
        <div className="col-12 col-md-6">
          <p>Last IP: {props.data.get("ip")}</p>
          <p>Last used: {moment(props.data.get("last_used")).fromNow()}</p>
          <p>Created: {moment(props.data.get("created_at")).fromNow()}</p>
        </div>
        <div className="col-12 col-md-6">
          <p>
            Device: <Device {...ua.device} />
          </p>
          <p>
            OS: <OS {...ua.os} />
          </p>
          <p>
            Browser: <Browser {...ua.browser} />
          </p>
        </div>
      </div>
    </div>
  );
};
Token.propTypes = {
  data: PropTypes.instanceOf(Map).isRequired,
};

const Actions = (props) => {
  const handleClick = () => {
    props.deleteToken(props.data.get("token"));
  };

  return (
    <span
      className="fa fa-trash fa-lg pull-right clickable"
      onClick={handleClick}
    ></span>
  );
};
Actions.propTypes = {
  data: PropTypes.instanceOf(Map).isRequired,
  deleteToken: PropTypes.func.isRequired,
};

const Logo = ({ ua, device, browser }) => {
  var className;
  if (ua === "canape-cli") {
    className = "terminal";
  } else if (device.type == "mobile") {
    className = "mobile";
  } else {
    switch (browser.name) {
      case "Chrome":
      case "chrome":
        className = "chrome";
        break;
      case "Safari":
      case "safari":
        className = "safari";
        break;
      case "Firefox":
      case "firefox":
        className = "firefox";
        break;
      default:
        className = "question";
        break;
    }
  }

  return <span className={`fa fa-${className}`}></span>;
};
Logo.propTypes = {
  ua: PropTypes.string,
  device: PropTypes.object,
  browser: PropTypes.object,
};

const OS = ({ name, version }) => {
  var osName = "-";

  if (name !== undefined) {
    osName = name;

    if (version !== undefined) {
      osName += " " + version;
    }
  }

  return <span> {osName}</span>;
};
OS.propTypes = {
  name: PropTypes.string,
  version: PropTypes.string,
};

const Device = ({ model }) => {
  var deviceName = "-";

  if (model !== undefined) {
    deviceName = model;
  }

  return <span> {deviceName}</span>;
};
Device.propTypes = {
  model: PropTypes.string,
};

const Browser = ({ name, version }) => {
  var browserName = "-";
  if (name !== undefined) {
    browserName = name;

    if (version !== undefined) {
      browserName += " - " + version;
    }
  }

  return <span> {browserName}</span>;
};
Browser.propTypes = {
  name: PropTypes.string,
  version: PropTypes.string,
};

export default UserTokens;