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

// @flow

import * as React from 'react';
import { Close } from '@kiwicom/orbit-components/lib/icons';
import { 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 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 CloseIcon = ({ onClick, isMobile, theme }: IconProps) => (
  <div
    className={`${isMobile ? 'closeIconMobile' : 'closeIconDesktop'}`}
    data-test="CloseButton"
    onKeyUp={onClick}
    onClick={onClick}
    role="button"
    tabIndex="-1"
  >
    <Close customColor={theme.orbit.colorIconPrimary} size="medium" />
    <style jsx>
      {`
        .closeIconDesktop {
          position: absolute;
          top: 12px;
          right: 12px;
          padding: 8px;
          cursor: pointer;
        }
        .closeIconMobile {
          flex: 1;
          padding: 19px;
          text-align: center;
          background-color: #fff;
          border: 1px solid #eaeaea;
          outline: none;
        }
      `}
    </style>
  </div>
);

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

export default withTheme(CloseButton);