import React from 'react';

const ActionPreviewHeader = ({
  styling,
  inspectedPath,
  onInspectPath,
  tabName,
  onSelectTab,
  tabs
}) => (
  <div key="previewHeader" {...styling('previewHeader')}>
    <div {...styling('tabSelector')}>
      {tabs.map(tab => (
        <div
          onClick={() => onSelectTab(tab.name)}
          key={tab.name}
          {...styling(
            [
              'selectorButton',
              tab.name === tabName && 'selectorButtonSelected'
            ],
            tab.name === tabName
          )}
        >
          {tab.name}
        </div>
      ))}
    </div>
    <div {...styling('inspectedPath')}>
      {inspectedPath.length ? (
        <span {...styling('inspectedPathKey')}>
          <a
            onClick={() => onInspectPath([])}
            {...styling('inspectedPathKeyLink')}
          >
            {tabName}
          </a>
        </span>
      ) : (
        tabName
      )}
      {inspectedPath.map((key, idx) =>
        idx === inspectedPath.length - 1 ? (
          <span key={key}>{key}</span>
        ) : (
          <span key={key} {...styling('inspectedPathKey')}>
            <a
              onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
              {...styling('inspectedPathKeyLink')}
            >
              {key}
            </a>
          </span>
        )
      )}
    </div>
  </div>
);

export default ActionPreviewHeader;