/**
 * TEAM: frontend_infra
 * @flow
 */

/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable react/forbid-elements */
/* eslint-disable jsx-a11y/interactive-supports-focus */
/* eslint-disable react/prefer-stateless-function */
/* eslint-disable flexport/no-unused-aphrodite-styles */

import * as React from "react";
import {css, StyleSheet} from "aphrodite";
import invariant from "../tools/invariant";
import {border, typeScale, fontWeights} from "../styles/index";

import colors from "../colors";
import whitespace from "../styles/whitespace";
import Icon from "../Icon";

type Tab = {|
  +name: string,
  +id: string,
  +status?: ?Status,
|};

export type Status = "complete"; // will support other types when status component is built

type Props = {|
  /** array of tabs of type {name: string, id: string, status: Status} */
  +tabs: $ReadOnlyArray<Tab>,
  /** activeTab is the id of the currently active tab */
  +activeTab: string,
  /** onTabChange is called with the ID when the user navigates to a tab */
  +onTabChange: string => void,
  /** An open area on the right end of TabHeader usually meant for button(s) */
  +components?: React.Node,
  /** whether the tabs will be centered or not */
  +centerTabs?: boolean,
  /** whether to show the line below the TabHeader */
  +showBottomLine?: boolean,
  /** space between each tab */
  +gap?: $Keys<typeof whitespace>,
  /** $Hide Adds a data-qa-id attribute on the text element for testing */
  +dataQaId?: string,
|};

/**
 * @short Use this to build tabs
 * @brandStatus V2
 * @status In Review
 * @category Navigation
 * The component provides uniform designs for building Tab Headers so that they
 * look the same across the app. */
export default function TabHeader({
  tabs,
  activeTab,
  onTabChange,
  components,
  centerTabs,
  showBottomLine = true,
  gap = "xl",
  dataQaId,
}: Props): React.Element<"div"> {
  invariant(
    tabs.map<string, void>(f => f.id).filter(id => id === activeTab).length ===
      1,
    "invalid active tab value"
  );

  return (
    <div className={css(styles.outer, showBottomLine && styles.outerBorder)}>
      <div className={css(styles.container, centerTabs && styles.centerTabs)}>
        {tabs.map((tab, index) => (
          <TabComponent
            id={tab.id}
            key={tab.id}
            name={tab.name}
            status={tab.status}
            onClick={onTabChange}
            active={activeTab === tab.id}
            gap={gap}
            isLast={index === tabs.length - 1}
            dataQaId={dataQaId != null ? `${dataQaId}_${tab.id}` : undefined}
          />
        ))}
      </div>
      <div>{components}</div>
    </div>
  );
}

const TabComponent = ({
  id,
  name,
  status,
  onClick,
  active,
  gap,
  isLast,
  dataQaId,
}: {
  +id: string,
  +name: string,
  +status?: ?Status,
  +onClick: string => void,
  +active: boolean,
  +gap: $Keys<typeof whitespace>,
  +isLast: boolean,
  +dataQaId?: string,
  ...
}): React.Element<"a"> => (
  <a
    id={`th-${id}`}
    className={css(styles.tab, active && styles.active)}
    onClick={() => {
      onClick(id);
    }}
    role="button"
    title={name}
    style={{
      marginRight: !isLast ? whitespace[gap] : null,
    }}
    data-qa-id={dataQaId}
  >
    {/* TODO(ddzoan) Replace this with the pill/status component (LDS-463) when it's ready */}
    {status === "complete" ? (
      <Icon
        iconName="check"
        size="s"
        color="green40"
        className={css(styles.status)}
        deprecatedAllowColorInheritance={false}
      />
    ) : null}
    {name}
  </a>
);

export const _test = {TabComponent};

const styles = StyleSheet.create({
  tab: {
    color: colors.grey60,
    padding: whitespace.s,
    ...border.b.m,
    ...typeScale.base,
    borderColor: "transparent",
    ":hover": {
      cursor: "pointer",
      borderColor: colors.grey40,
    },
    // pseudo-element prevents the element from growing on becoming bold
    ":after": {
      display: "block",
      content: "attr(title)",
      fontWeight: "bold",
      height: 1,
      color: "transparent",
      overflow: "hidden",
      visibility: "hidden",
    },
  },
  container: {
    display: "flex",
    flex: 1,
  },
  centerTabs: {
    justifyContent: "center",
  },
  outer: {
    alignItems: "center",
    display: "flex",
    width: "100%",
    justifyContent: "space-between",
  },
  outerBorder: {
    ...border.b.s,
    borderColor: colors.grey60,
  },
  active: {
    color: colors.grey60,
    borderColor: colors.grey60,
    fontWeight: fontWeights.bold,
    ":hover": {
      borderColor: colors.grey60,
    },
  },
  status: {
    marginRight: whitespace.s,
  },
});