import * as React from 'react';
import { Types } from '../../common';
import { Node } from '../../state';
import { PersistentSet } from '../../persist';
import {
  Column,
  NameColumn,
  LocationColumn,
  NetworkIdColumn,
  PeersColumn,
  TxsColumn,
  UploadColumn,
  DownloadColumn,
  StateCacheColumn,
  BlockNumberColumn,
  BlockHashColumn,
  FinalizedBlockColumn,
  FinalizedHashColumn,
  BlockTimeColumn,
  BlockPropagationColumn,
  LastBlockColumn,
  UptimeColumn,
  CpuArchitectureColumn,
  CpuColumn,
  CpuCoresColumn,
  MemoryColumn,
  OperatingSystemColumn,
  VersionColumn,
  IsVirtualMachineColumn,
  LinuxDistroColumn,
  LinuxKernelColumn,
} from './';

import './Row.css';

interface RowProps {
  node: Node;
  pins: PersistentSet<Types.NodeName>;
  columns: Column[];
}

interface RowState {
  update: number;
}

export class Row extends React.Component<RowProps, RowState> {
  public static readonly columns: Column[] = [
    NameColumn,
    LocationColumn,
    NetworkIdColumn,
    PeersColumn,
    TxsColumn,
    UploadColumn,
    DownloadColumn,
    StateCacheColumn,
    BlockNumberColumn,
    BlockHashColumn,
    FinalizedBlockColumn,
    FinalizedHashColumn,
    BlockTimeColumn,
    BlockPropagationColumn,
    LastBlockColumn,
    UptimeColumn,
    VersionColumn,
    OperatingSystemColumn,
    CpuArchitectureColumn,
    CpuColumn,
    CpuCoresColumn,
    MemoryColumn,
    LinuxDistroColumn,
    LinuxKernelColumn,
    IsVirtualMachineColumn,
  ];
  private renderedChangeRef = 0;

  public shouldComponentUpdate(nextProps: RowProps): boolean {
    return (
      this.props.node.id !== nextProps.node.id ||
      this.renderedChangeRef !== nextProps.node.changeRef
    );
  }

  public render() {
    const { node, columns } = this.props;

    this.renderedChangeRef = node.changeRef;

    let className = 'Row';

    if (node.pinned) {
      className += ' Row-pinned';
    }

    if (node.stale) {
      className += ' Row-stale';
    }

    return (
      <tr className={className} onClick={this.toggle}>
        {columns.map((col, index) =>
          React.createElement(col, { node, key: index })
        )}
      </tr>
    );
  }

  public toggle = () => {
    const { pins, node } = this.props;

    if (node.pinned) {
      pins.delete(node.name);
    } else {
      pins.add(node.name);
    }
  };
}