import * as _ from 'lodash-es';
import * as React from 'react';
import { sortable } from '@patternfly/react-table';
import * as classNames from 'classnames';
import { ListPage, Table, TableRow, TableData } from './factory';
import { Kebab, ResourceKebab, ResourceLink, Selector } from './utils';
import { ServiceMonitorModel } from '../models';
import { referenceForModel } from '../module/k8s';

const { Edit, Delete } = Kebab.factory;
const menuActions = [Edit, Delete];

const namespaceSelectorLinks = ({ spec }) => {
  const namespaces = _.get(spec, 'namespaceSelector.matchNames', []);
  if (namespaces.length) {
    return _.map(namespaces, (n) => (
      <span key={n}>
        <ResourceLink kind="Namespace" name={n} title={n} />
        &nbsp;&nbsp;
      </span>
    ));
  }
  return <span className="text-muted">--</span>;
};

const serviceSelectorLinks = ({ spec }) => {
  const namespaces = _.get(spec, 'namespaceSelector.matchNames', []);
  if (namespaces.length) {
    return _.map(namespaces, (n) => (
      <span key={n}>
        <Selector selector={spec.selector} kind="Service" namespace={n} />
        &nbsp;&nbsp;
      </span>
    ));
  }
  return <Selector selector={spec.selector} kind="Service" />;
};

const tableColumnClasses = [
  classNames('col-md-3', 'col-sm-3', 'col-xs-6'),
  classNames('col-md-3', 'col-sm-3', 'col-xs-6'),
  classNames('col-md-3', 'col-sm-6', 'hidden-xs'),
  classNames('col-md-3', 'hidden-sm', 'hidden-xs'),
  Kebab.columnClass,
];

const ServiceMonitorTableRow = ({ obj: sm, index, key, style }) => {
  const { metadata } = sm;
  return (
    <TableRow id={sm.metadata.uid} index={index} trKey={key} style={style}>
      <TableData className={tableColumnClasses[0]}>
        <ResourceLink
          kind={referenceForModel(ServiceMonitorModel)}
          name={metadata.name}
          namespace={metadata.namespace}
          title={metadata.uid}
        />
      </TableData>
      <TableData className={tableColumnClasses[1]}>
        <ResourceLink kind="Namespace" name={metadata.namespace} title={metadata.namespace} />
      </TableData>
      <TableData className={tableColumnClasses[2]}>{serviceSelectorLinks(sm)}</TableData>
      <TableData className={tableColumnClasses[3]}>
        <p>{namespaceSelectorLinks(sm)}</p>
      </TableData>
      <TableData className={tableColumnClasses[4]}>
        <ResourceKebab
          actions={menuActions}
          kind={referenceForModel(ServiceMonitorModel)}
          resource={sm}
        />
      </TableData>
    </TableRow>
  );
};
ServiceMonitorTableRow.displayName = 'ServiceMonitorTableRow';

const ServiceMonitorTableHeader = () => {
  return [
    {
      title: 'Name',
      sortField: 'metadata.name',
      transforms: [sortable],
      props: { className: tableColumnClasses[0] },
    },
    {
      title: 'Namespace',
      sortField: 'metadata.namespace',
      transforms: [sortable],
      props: { className: tableColumnClasses[1] },
    },
    {
      title: 'Service Selector',
      sortField: 'spec.selector',
      transforms: [sortable],
      props: { className: tableColumnClasses[2] },
    },
    {
      title: 'Monitoring Namespace',
      sortField: 'spec.namespaceSelector',
      transforms: [sortable],
      props: { className: tableColumnClasses[3] },
    },
    {
      title: '',
      props: { className: tableColumnClasses[4] },
    },
  ];
};
ServiceMonitorTableHeader.displayName = 'ServiceMonitorTableHeader';

export const ServiceMonitorsList = (props) => (
  <Table
    {...props}
    aria-label="Service Monitors"
    Header={ServiceMonitorTableHeader}
    Row={ServiceMonitorTableRow}
    virtualize
  />
);

export const ServiceMonitorsPage = (props) => (
  <ListPage
    {...props}
    canCreate={true}
    kind={referenceForModel(ServiceMonitorModel)}
    ListComponent={ServiceMonitorsList}
  />
);
