import _get from "lodash/fp/get";
import React from 'react';
import PropTypes from 'prop-types';
import { NovaCompositionCoorpacademyMagicWand as MagicWand, NovaCompositionCoorpacademyCoorpApp as CoorpAppLogo } from '@coorpacademy/nova-icons';
import Button from '../../atom/button';
import Picture from '../../atom/picture';
import style from './style.css';
const Header = ({
  step,
  header,
  subHeader
}) => /*#__PURE__*/React.createElement("div", {
  className: style.headerContainer
}, step ? /*#__PURE__*/React.createElement("div", {
  className: style.headerWrapper
}, /*#__PURE__*/React.createElement("h1", {
  className: style.step
}, step), /*#__PURE__*/React.createElement("h1", {
  className: style.header
}, header)) : /*#__PURE__*/React.createElement("h1", {
  className: style.header
}, header, " "), subHeader ? /*#__PURE__*/React.createElement("h4", {
  className: style.subHeader
}, subHeader, " ") : null);
Header.propTypes = process.env.NODE_ENV !== "production" ? {
  step: PropTypes.string,
  header: PropTypes.string,
  subHeader: PropTypes.string
} : {};
const QrCodeImage = ({
  showMobileAppAccess,
  qrCodeImageUrl,
  preMessage,
  linkMessage,
  endMessage,
  qrCodeImageAlt
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: style.qrcodeWrapper
  }, /*#__PURE__*/React.createElement(Picture, {
    src: qrCodeImageUrl,
    alt: qrCodeImageAlt
  }), showMobileAppAccess ? /*#__PURE__*/React.createElement("div", {
    className: style.qrcodeOverlay
  }, /*#__PURE__*/React.createElement("div", {
    className: style.qrcodeModal
  }, /*#__PURE__*/React.createElement("span", null, preMessage, " "), /*#__PURE__*/React.createElement("a", {
    href: "mailto:assistance@coorpacademy.com",
    className: style.qrcodeModalLink
  }, /*#__PURE__*/React.createElement("span", null, linkMessage, " ")), /*#__PURE__*/React.createElement("span", null, endMessage, " "))) : null);
};
QrCodeImage.propTypes = process.env.NODE_ENV !== "production" ? {
  showMobileAppAccess: PropTypes.bool,
  qrCodeImageUrl: PropTypes.string,
  preMessage: PropTypes.string,
  linkMessage: PropTypes.string,
  endMessage: PropTypes.string,
  qrCodeImageAlt: PropTypes.string
} : {};
const MagicLink = ({
  disabled,
  submitValue,
  magicLinkUrl,
  color
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: style.buttonWrapper
  }, /*#__PURE__*/React.createElement(Button, {
    color: color,
    disabled: disabled,
    isLinkDisabled: disabled,
    href: magicLinkUrl,
    type: "link",
    submitValue: null
  }, /*#__PURE__*/React.createElement("div", {
    className: style.iconWrapper
  }, /*#__PURE__*/React.createElement(MagicWand, {
    className: style.magicLinkIcon
  }), /*#__PURE__*/React.createElement("p", null, submitValue))));
};
MagicLink.propTypes = process.env.NODE_ENV !== "production" ? {
  magicLinkUrl: PropTypes.string,
  disabled: PropTypes.bool,
  submitValue: PropTypes.string
} : {};
const StoresLinks = ({
  onAppStoreButtonClick,
  appStoreButtonImageUrl,
  playStoreButtonImageUrl,
  onPlayStoreButtonClick,
  'android-alt': androidAlt,
  'ios-alt': iosAlt
}) => /*#__PURE__*/React.createElement("div", {
  className: style.storeLinksContainer
}, /*#__PURE__*/React.createElement(Picture, {
  className: style.img,
  src: appStoreButtonImageUrl,
  onClick: onAppStoreButtonClick,
  alt: iosAlt
}), /*#__PURE__*/React.createElement(Picture, {
  className: style.img,
  src: playStoreButtonImageUrl,
  onClick: onPlayStoreButtonClick,
  alt: androidAlt
}));
StoresLinks.propTypes = process.env.NODE_ENV !== "production" ? {
  onAppStoreButtonClick: PropTypes.func,
  appStoreButtonImageUrl: PropTypes.string,
  playStoreButtonImageUrl: PropTypes.string,
  onPlayStoreButtonClick: PropTypes.func,
  'android-alt': PropTypes.string,
  'ios-alt': PropTypes.string
} : {};
const Divider = ({
  word
}) => /*#__PURE__*/React.createElement("div", {
  className: style.dividerWrapper
}, /*#__PURE__*/React.createElement("div", {
  className: style.divider
}), /*#__PURE__*/React.createElement("p", null, word), /*#__PURE__*/React.createElement("div", {
  className: style.divider
}));
Divider.propTypes = process.env.NODE_ENV !== "production" ? {
  word: PropTypes.string
} : {};
const GetTheApp = (props, context) => {
  const {
    onAppStoreButtonClick,
    appStoreButtonImageUrl,
    playStoreButtonImageUrl,
    onPlayStoreButtonClick,
    storeStep,
    connectionStep,
    qrCodeStep,
    magicLinkStep,
    diviserWord,
    qrCodeImageUrl,
    magicLinkUrl,
    disabled,
    showMobileAppAccess,
    submitValue,
    preMessage,
    linkMessage,
    endMessage,
    'android-alt': androidAlt,
    'ios-alt': iosAlt,
    qrCodeImageAlt,
    'logo-aria-label': coorpAppLogoAriaLabel
  } = props;
  const {
    skin
  } = context;
  const primaryColor = _get('common.primary', skin);
  return /*#__PURE__*/React.createElement("div", {
    className: style.container
  }, /*#__PURE__*/React.createElement("div", {
    className: style.coorpAppLogoWrapper
  }, /*#__PURE__*/React.createElement(CoorpAppLogo, {
    height: 51,
    width: 250,
    className: style.coorpAppLogo,
    "aria-label": coorpAppLogoAriaLabel
  })), /*#__PURE__*/React.createElement("div", {
    className: style.store
  }, /*#__PURE__*/React.createElement(Header, storeStep), /*#__PURE__*/React.createElement(StoresLinks, {
    onAppStoreButtonClick: onAppStoreButtonClick,
    appStoreButtonImageUrl: appStoreButtonImageUrl,
    playStoreButtonImageUrl: playStoreButtonImageUrl,
    onPlayStoreButtonClick: onPlayStoreButtonClick,
    "android-alt": androidAlt,
    "ios-alt": iosAlt
  })), /*#__PURE__*/React.createElement("div", {
    className: style.secondStepWrapper
  }, /*#__PURE__*/React.createElement(Header, connectionStep), /*#__PURE__*/React.createElement("div", {
    className: style.connectionWrapper
  }, /*#__PURE__*/React.createElement("div", {
    className: style.wrapper
  }, /*#__PURE__*/React.createElement(Header, qrCodeStep), /*#__PURE__*/React.createElement(QrCodeImage, {
    showMobileAppAccess: showMobileAppAccess,
    qrCodeImageUrl: qrCodeImageUrl,
    preMessage: preMessage,
    linkMessage: linkMessage,
    endMessage: endMessage,
    qrCodeImageAlt: qrCodeImageAlt
  })), /*#__PURE__*/React.createElement(Divider, {
    word: diviserWord
  }), /*#__PURE__*/React.createElement("div", {
    className: style.wrapper
  }, /*#__PURE__*/React.createElement(Header, magicLinkStep), /*#__PURE__*/React.createElement(MagicLink, {
    style: {
      color: primaryColor
    },
    submitValue: submitValue,
    disabled: disabled,
    magicLinkUrl: magicLinkUrl
  })))));
};
GetTheApp.propTypes = process.env.NODE_ENV !== "production" ? {
  ...StoresLinks.propTypes,
  storeStep: PropTypes.shape(Header.propTypes),
  connectionStep: PropTypes.shape(Header.propTypes),
  qrCodeStep: PropTypes.shape(Header.propTypes),
  magicLinkStep: PropTypes.shape(Header.propTypes),
  ...QrCodeImage.propTypes,
  diviserWord: Divider.propTypes.word,
  ...MagicLink.propTypes
} : {};
export default GetTheApp;
//# sourceMappingURL=index.js.map