import { Chip, Tooltip } from "@mui/material";
import { Link as LinkIcon } from "@mui/icons-material";
import React from "react";
import { pond } from "protobuf-ts/pond";
import { quack } from "protobuf-ts/quack";
import { Component, Interaction } from "models";

// const styles = (theme: Theme) => ({
//   accepted: {
//     color: amber["300"]
//   },
//   pending: {
//     color: theme.palette.text.secondary
//   }
// });

interface Props {
  interaction: Interaction;
  component: Component;
  components: Component[];
  onClick: Function;
}

interface State {}

class InteractionChip extends React.Component<Props, State> {
  label = () => {
    const { interaction, component, components } = this.props;
    let ourID = JSON.stringify(
      quack.ComponentID.create({
        type: component.settings.type,
        addressType: component.settings.addressType,
        address: component.settings.address
      })
    );
    if (component.settings.address === 0) {
      ourID = JSON.stringify(
        quack.ComponentID.create({
          type: component.settings.type,
          addressType: component.settings.addressType
        })
      );
    }
    let sourceID = JSON.stringify((interaction.settings as pond.InteractionSettings).source);
    let sinkID = JSON.stringify((interaction.settings as pond.InteractionSettings).sink);
    for (let i = 0; i < components.length; i++) {
      let c = components[i];
      let otherID = JSON.stringify(
        quack.ComponentID.create({
          type: c.settings.type,
          addressType: c.settings.addressType,
          address: c.settings.address
        })
      );
      if (c.settings.address === 0) {
        otherID = JSON.stringify(
          quack.ComponentID.create({
            type: c.settings.type,
            addressType: c.settings.addressType
          })
        );
      }
      if (ourID === otherID) {
        continue;
      }
      if (sourceID === otherID || sinkID === otherID) {
        return c.name();
      }
    }
    return "Cloud";
  };

  render() {
    const { /*classes,*/ interaction, onClick } = this.props;
    const label = this.label();
    const pending = !interaction.status.synced;
    // const iconClass = pending ? classes.pending : classes.accepted;
    const title = pending ? "Pending interaction with " + label : "Interacting with " + label;
    return (
      <Tooltip title={title}>
        <Chip onClick={() => onClick()} label={label} icon={<LinkIcon /*className={iconClass}*/ />} />
      </Tooltip>
    );
  }
}

export default InteractionChip;
