@kiwicom/smart-faq/src/SmartFAQ/common/buttons/CloseButton.js

// @flow

import * as React from 'react';
import { Close } from '@kiwicom/orbit-components/lib/icons';
import ButtonLink from '@kiwicom/orbit-components/lib/ButtonLink';
import styled, { withTheme } from 'styled-components';
import type { ThemeProps } from '@kiwicom/nitro/lib/records/Theme';

import CloseContext from '../../context/Close';
import { GuaranteeChatContext } from '../../../shared/context/GuaranteeChatInfo';

type ButtonProps = {|
  isMobile?: boolean,
  ...ThemeProps,
|};

type IconProps = {|
  onClick: () => void,
  ...ButtonProps,
|};

const DesktopButton = styled(ButtonLink)`
  position: absolute;
  top: 14px;
  right: 12px;
`;

const MobileButton = styled(ButtonLink)`
  background-color: #fff;
  border: 1px solid #eaeaea;
  outline: none;
  flex: 1;
  height: inherit;
`;

const getOnClose = (onClick, isChatActive) => () => {
  if (isChatActive) {
    // FIXME: do we really need this alert?
    // eslint-disable-next-line no-alert
    const canClose = window.confirm(
      'Closing this window will cause the chat connection to be interrupted, do you want to proceed?',
    );

    if (!canClose) {
      return;
    }
  }

  onClick();
};

const CloseButton = ({ onClick, isMobile, theme }: IconProps) => {
  const props = {
    transparent: true,
    tabIndex: '-1',
    role: 'button',
    dataTest: 'CloseButton',
  };
  return isMobile ? (
    <MobileButton block={true} onClick={onClick} {...props}>
      <Close
        dataTest="closeButtonIcon"
        customColor={theme.orbit.colorIconPrimary}
        size="medium"
      />
    </MobileButton>
  ) : (
    <DesktopButton onClick={onClick} {...props}>
      <Close customColor={theme.orbit.colorIconPrimary} size="medium" />
    </DesktopButton>
  );
};

const CloseButtonWrapper = ({ isMobile, theme }: ButtonProps) => (
  <GuaranteeChatContext.Consumer>
    {({ isChatActive }) => (
      <CloseContext.Consumer>
        {(onClose: () => void) => (
          <CloseButton
            onClick={getOnClose(onClose, isChatActive)}
            isMobile={Boolean(isMobile)}
            theme={theme}
          />
        )}
      </CloseContext.Consumer>
    )}
  </GuaranteeChatContext.Consumer>
);

export default withTheme(CloseButtonWrapper);