import * as React from 'react';
import Promote from '../../../icons/Promote';
import Code from '../../../icons/Code';

import { HeaderSection } from '../../../typings/story-section';
import { StoryConfig } from '../../../typings/story-config';

import { Layout, Cell } from '../../../ui/Layout';
import styles from './styles.scss';
import classNames from 'classnames';
import Badge from '../../../ui/badge';

export const header: (a: HeaderSection, b: StoryConfig) => React.ReactNode = (
  section,
  storyConfig,
) => {
  const { title, component, sourceUrl, issueUrl, source = true } = section;
  const issueURL = storyConfig.config?.issueURL || issueUrl;
  const status = storyConfig?.story?.config?.status;

  const renderStatus = () => {
    return (
      <Badge
        className={styles.badge}
        type={status === 'wip' ? 'warning' : 'error'}
      >
        {status === 'wip' ? 'WORK IN PROGRESS' : 'DEPRECATED'}
      </Badge>
    );
  };

  const renderStatusMessage = () => {
    const statusToMessageMap = {
      wip:
        "This component is under development. API is not stable yet and can change anytime. Please don't use this component unless you were instructed otherwise.",
      deprecated:
        'This component deprecated and will not be supported moving forward.',
    };
    return (
      <div className={styles.statusMessage}>
        {storyConfig?.story?.config?.statusMessage ||
          statusToMessageMap[status]}
      </div>
    );
  };

  const renderHeader = () => {
    return (
      <>
        <Layout className={styles.titleLayout}>
          <Cell span={6}>
            <>
              <div className={styles.title}>
                {title || storyConfig.storyName}
                {status && renderStatus()}
              </div>
              {status && renderStatusMessage()}
            </>
          </Cell>

          <Cell span={6} className={styles.links} data-hook>
            {issueURL && (
              <div className={styles.link} data-hook="section-header-issueUrl">
                <Promote size="24px" /> <a href={issueURL}>Report an issue</a>
              </div>
            )}

            {source && (
              <div className={styles.link} data-hook="section-header-sourceUrl">
                <Code size="24px" /> <a href={sourceUrl}>Source</a>
              </div>
            )}
          </Cell>
        </Layout>

        {component && <div className={styles.component}>{component}</div>}
      </>
    );
  };

  return (
    <div className={classNames(styles.rootWrapper, styles[status])}>
      <div className={styles.root}>{renderHeader()}</div>
    </div>
  );
};