/**
 * TEAM: frontend_infra
 * @flow strict-local
 */

import * as React from "react";
import {StyleSheet, css} from "aphrodite";
import Tooltip from "../Tooltip";
import {type Color} from "../colors";
import Icon, {type IconNames} from "../Icon";

import RowContext from "./RowContext";

type Props = {|
  +iconName: IconNames,
  +color: Color | "inherit",
  +tooltipText?: ?string,
|};

export default function IconCell({
  iconName,
  color,
  tooltipText,
}: Props): React.Element<"div"> {
  const {isDisabled} = React.useContext(RowContext);

  const ConditionalWrapper = ({condition, wrapper, children}) =>
    condition ? wrapper(children) : children;

  return (
    <div className={css(styles.container)}>
      <ConditionalWrapper
        condition={tooltipText != null}
        wrapper={children => (
          <Tooltip placement="bottom" overlay={<span>{tooltipText}</span>}>
            {children}
          </Tooltip>
        )}
      >
        <Icon iconName={iconName} color={isDisabled ? "grey40" : color} />
      </ConditionalWrapper>
    </div>
  );
}

const styles = StyleSheet.create({
  container: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
});