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

/* eslint-disable react/forbid-elements */

import * as React from "react";
import {StyleSheet, css} from "aphrodite";
import Icon from "../Icon";
import CustomTooltip from "../CustomTooltip";
import colors from "../colors";
import whitespace from "../styles/whitespace";

export const TOGGLE_BUTTON_SIZE = 30;
const TOOLTIP_OFFSET = whitespace.s;

type Props = {|
  +isOpen: boolean,
  +onClick: () => void,
|};

export default (React.memo<Props>(function SideNavToggleButton({
  isOpen,
  onClick,
}: Props) {
  const iconTransitionStyle = isOpen ? styles.iconOpen : null;

  return (
    <CustomTooltip
      placement="right"
      trigger="hover"
      overlay={isOpen ? "Collapse" : "Keep open"}
      mouseEnterDelay={0}
      mouseExitDelay={0}
      offset={TOOLTIP_OFFSET}
      tooltipClassName={css(styles.tooltip)}
    >
      <button
        type="button"
        className={css(styles.button)}
        onClick={onClick}
        style={{borderColor: colors.grey40}}
      >
        <div className={css(styles.icon, iconTransitionStyle)}>
          <Icon iconName="rightOpen" color="white" alignment="center" />
        </div>
      </button>
    </CustomTooltip>
  );
}): React.AbstractComponent<Props, mixed>);

const styles = StyleSheet.create({
  button: {
    border: `2px solid ${colors.grey40}`,
    cursor: "pointer",
    display: "block",
    padding: 0,
    outline: "none",
    background: "none",
    position: "relative",
    height: TOGGLE_BUTTON_SIZE,
    width: TOGGLE_BUTTON_SIZE,
    transitionProperty: "border-color, box-shadow, background-color",
    transitionDuration: "150ms",
    transitionTimingFunction: "ease-out",

    ":hover": {
      background: colors.grey40,
    },

    ":focus": {
      borderColor: colors.grey30,
    },

    ":active": {
      borderColor: colors.grey40,
      background: colors.grey60,
    },
  },

  icon: {
    display: "flex",
    transition: `transform 350ms ease-out`,
    position: "relative",
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  iconOpen: {
    transform: "rotate(-180deg)",
  },
  tooltip: {
    backgroundColor: colors.grey60,
    boxShadow: "0 0 4px rgba(0, 0, 0, 0.17)",
    color: colors.white,
    padding: "12px",
    textAlign: "left",
    textDecoration: "none",
    wordBreak: "break-word",
  },
});