import * as React from 'react';
import * as classNames from 'classnames';
import * as _ from 'lodash-es';
import { Link } from 'react-router-dom';
import { Button, SplitItem, Split } from '@patternfly/react-core';
import { ActionsMenu, ResourceIcon, KebabAction, resourcePath, FirehoseResult, KebabOption } from './index';
import { ClusterServiceVersionLogo } from '../operator-lifecycle-manager';
import { connectToModel } from '../../kinds';
import { ClusterServiceVersionModel } from '../../models';
import {
  K8sKind,
  K8sResourceKind,
  K8sResourceKindReference,
  referenceForModel,
} from '../../module/k8s';
import { ResourceItemDeleting } from '../overview/project-overview';

export const BreadCrumbs: React.SFC<BreadCrumbsProps> = ({ breadcrumbs }) => (
  <ol className="breadcrumb">
    {breadcrumbs.map((crumb, i, { length }) => {
      const isLast = i === length - 1;
      return (
        <li key={i} className={classNames({ active: isLast })}>
          {isLast ? (
            crumb.name
          ) : (
            <Link className="breadcrumb-link" to={crumb.path} data-test-id={`breadcrumb-link-${i}`}>
              {crumb.name}
            </Link>
          )}
        </li>
      );
    })}
  </ol>
);

const ActionButtons: React.SFC<ActionButtonsProps> = ({actionButtons}) => <div className="co-action-buttons">
  {_.map(actionButtons, (actionButton, i) => {
    if (!_.isEmpty(actionButton)) {
      return <Button className="co-action-buttons__btn" variant="primary" onClick={actionButton.callback} key={i}>{actionButton.label}</Button>;
    }
  })}
</div>;

export const PageHeading = connectToModel((props: PageHeadingProps) => {
  const {kind, kindObj, detail, title, menuActions, buttonActions, obj, breadcrumbsFor, titleFunc, style, customData, badge} = props;
  const extraResources = _.reduce(props.resourceKeys, (extraObjs, key) => ({...extraObjs, [key]: _.get(props[key], 'data')}), {});
  const data = _.get(obj, 'data');
  const resourceTitle = (titleFunc && data) ? titleFunc(data) : title;
  const isCSV = kind === referenceForModel(ClusterServiceVersionModel);
  const csvLogo = () => !_.isEmpty(data)
    ? <ClusterServiceVersionLogo icon={_.get(data, 'spec.icon', [])[0]} displayName={data.spec.displayName} version={data.spec.version} provider={data.spec.provider} />
    : <div style={{height: '60px'}} />;

  const logo = isCSV
    ? csvLogo()
    : <div className="co-m-pane__name co-resource-item">{ kind && <ResourceIcon kind={kind} className="co-m-resource-icon--lg" /> } <span className="co-resource-item__resource-name" data-test-id="resource-title">{resourceTitle}</span></div>;
  const hasButtonActions = !_.isEmpty(buttonActions);
  const hasMenuActions = _.isFunction(menuActions) || !_.isEmpty(menuActions);
  const showActions = (hasButtonActions || hasMenuActions) && !_.isEmpty(data) && !_.get(data, 'deletionTimestamp');
  return <div className={classNames('co-m-nav-title', {'co-m-nav-title--detail': detail}, {'co-m-nav-title--logo': isCSV}, {'co-m-nav-title--breadcrumbs': breadcrumbsFor && !_.isEmpty(data)})} style={style}>
    { breadcrumbsFor && !_.isEmpty(data) &&
      <Split style={{alignItems: 'baseline'}}>
        <SplitItem isFilled>
          <BreadCrumbs breadcrumbs={breadcrumbsFor(data)} />
        </SplitItem>
        { badge &&
        <SplitItem>
          {badge}
        </SplitItem>
        }
      </Split>
    }
    <h1 className={classNames('co-m-pane__heading', {'co-m-pane__heading--logo': isCSV})}>
      { logo }
      { !breadcrumbsFor && badge }
      { showActions && <div className="co-actions" data-test-id="details-actions">
        { hasButtonActions && <ActionButtons actionButtons={buttonActions.map(a => a(kindObj, data))} /> }
        { hasMenuActions && <ActionsMenu actions={_.isFunction(menuActions) ? menuActions(kindObj, data, extraResources, customData) : menuActions.map(a => a(kindObj, data, extraResources, customData))} /> }
      </div> }
    </h1>
    {props.children}
  </div>;
});

export const SectionHeading: React.SFC<SectionHeadingProps> = ({text, children, style}) => <h2 className="co-section-heading" style={style}>{text}{children}</h2>;

export const SidebarSectionHeading: React.SFC<SidebarSectionHeadingProps> = ({text, children, style}) => <h2 className="sidebar__section-heading" style={style}>{text}{children}</h2>;

export const ResourceOverviewHeading: React.SFC<ResourceOverviewHeadingProps> = ({kindObj, actions, resource}) => {
  const isDeleting = !!resource.metadata.deletionTimestamp;
  return <div className="overview__sidebar-pane-head resource-overview__heading">
    <h1 className="co-m-pane__heading">
      <div className="co-m-pane__name co-resource-item">
        <ResourceIcon className="co-m-resource-icon--lg" kind={kindObj.kind} />
        <Link to={resourcePath(resource.kind, resource.metadata.name, resource.metadata.namespace)} className="co-resource-item__resource-name">
          {resource.metadata.name}
        </Link>
        {isDeleting && <ResourceItemDeleting />}
      </div>
      {!isDeleting && <div className="co-actions">
        <ActionsMenu actions={actions.map(a => a(kindObj, resource))} />
      </div>}
    </h1>
  </div>;
};

export type ActionButtonsProps = {
  actionButtons: any[];
};

export type BreadCrumbsProps = {
  breadcrumbs: {name: string, path: string}[];
};

export type KebabOptionsCreator = (
  kindObj: K8sKind,
  data: K8sResourceKind,
  extraResources?: {[prop: string]: K8sResourceKind | K8sResourceKind[]},
  customData?: any
) => KebabOption[];

export type PageHeadingProps = {
  breadcrumbsFor?: (obj: K8sResourceKind) => {name: string, path: string}[];
  buttonActions?: any[];
  children?: React.ReactChildren;
  detail?: boolean;
  kind?: K8sResourceKindReference;
  kindObj?: K8sKind;
  menuActions?: Function[] | KebabOptionsCreator; // FIXME should be "KebabAction[] |" refactor pipeline-actions.tsx, etc.
  obj?: FirehoseResult<K8sResourceKind>;
  resourceKeys?: string[];
  style?: object;
  title?: string | JSX.Element;
  titleFunc?: (obj: K8sResourceKind) => string | JSX.Element;
  customData?: any;
  badge?: React.ReactNode;
};

export type ResourceOverviewHeadingProps = {
  actions: KebabAction[];
  kindObj: K8sKind;
  resource: K8sResourceKind;
};

export type SectionHeadingProps = {
  children?: any;
  style?: any;
  text: string;
};

export type SidebarSectionHeadingProps = {
  children?: any;
  style?: any;
  text: string;
};

BreadCrumbs.displayName = 'BreadCrumbs';
PageHeading.displayName = 'PageHeading';
ResourceOverviewHeading.displayName = 'ResourceOverviewHeading';
SectionHeading.displayName = 'SectionHeading';
SidebarSectionHeading.displayName = 'SidebarSectionHeading';
