import _getOr from "lodash/fp/getOr";
import React, { useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import { NovaCompositionCoorpacademyLocales as LocalesIcon, NovaSolidStatusClose as Close, NovaLineContentEditionBin as Bin, NovaLineContentEditionHide as Hide } from '@coorpacademy/nova-icons';
import Cta from '../../atom/button';
import Loader from '../../atom/loader';
import style from './style.css';
const Popin = (props, context) => {
  const {
    skin
  } = context;
  const primaryColor = _getOr('#00B0FF', 'common.primary', skin);
  const {
    header,
    content,
    firstButtonLabel,
    onFirstButtonClick,
    secondeButtonLabel,
    onSecondeButtonClick,
    onClose,
    type,
    isLoading = false,
    backgroundImageUrl
  } = props;
  const logo = {
    hiddenStateManagment: Hide,
    deleteContent: Bin,
    videoTranslate: LocalesIcon
  };
  const LogoComponent = logo[type];
  const backgroundImageStyle = backgroundImageUrl ? {
    backgroundImage: `url(${backgroundImageUrl})`
  } : {};
  const [value, setValue] = useState({
    object: '',
    message: '',
    email: ''
  });
  const handleChange = useMemo(() => event => {
    setValue({
      ...value,
      [event.target.name]: event.target.value
    });
  }, [value]);
  const isAssistancePopin = type === 'assistance';
  const handleClickOnSecondButton = useMemo(() => {
    return type === 'assistance' ? onSecondeButtonClick(value) : onSecondeButtonClick;
  }, [value, type, onSecondeButtonClick]);
  return /*#__PURE__*/React.createElement("div", {
    className: style.background,
    style: backgroundImageStyle
  }, isLoading ? /*#__PURE__*/React.createElement("div", {
    className: style.loader
  }, /*#__PURE__*/React.createElement(Loader, {
    "data-name": "cockpit-popin-loader"
  })) : /*#__PURE__*/React.createElement("div", {
    className: style.popin
  }, /*#__PURE__*/React.createElement("header", {
    className: style.popinHeader
  }, /*#__PURE__*/React.createElement(Close, {
    onClick: onClose,
    className: style.headerCloseIcon
  })), LogoComponent ? /*#__PURE__*/React.createElement(LogoComponent, {
    className: style.icon,
    style: {
      color: primaryColor
    }
  }) : null, /*#__PURE__*/React.createElement("div", {
    className: style.header,
    "data-name": `cockpit-popin-header-${type}`
  }, header), /*#__PURE__*/React.createElement("p", {
    className: style.content,
    "data-name": `cockpit-popin-content-${type}`
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: content
    }
  }), isAssistancePopin ? /*#__PURE__*/React.createElement("div", {
    style: {
      width: '70%'
    }
  }, /*#__PURE__*/React.createElement("input", {
    "data-name": "contact-object",
    className: style.inputText,
    name: "object",
    type: "text",
    placeholder: "Object",
    value: value.object,
    onChange: handleChange
  }), /*#__PURE__*/React.createElement("textarea", {
    className: (style.inputText, style.inputTextArea),
    "data-name": "contact-message",
    name: "message",
    type: "text",
    placeholder: "Message",
    value: value.message,
    onChange: handleChange
  }), /*#__PURE__*/React.createElement("input", {
    className: style.lastInputText,
    "data-name": "contact-email",
    name: "email",
    type: "text",
    placeholder: "Email",
    value: value.email,
    onChange: handleChange
  })) : null, /*#__PURE__*/React.createElement("div", {
    className: style.buttonContainer
  }, firstButtonLabel ? /*#__PURE__*/React.createElement(Cta, {
    submitValue: firstButtonLabel,
    onClick: onFirstButtonClick,
    name: `cockpit-popin-cta-${type}`,
    className: style.button,
    style: {
      backgroundColor: 'white',
      color: 'gray'
    }
  }) : null, secondeButtonLabel ? /*#__PURE__*/React.createElement(Cta, {
    submitValue: secondeButtonLabel,
    onClick: handleClickOnSecondButton,
    name: `cockpit-popin-cta-${type}`,
    className: style.button,
    style: {
      backgroundColor: primaryColor
    },
    disabled: isAssistancePopin && !value.message
  }) : null)));
};
Popin.propTypes = process.env.NODE_ENV !== "production" ? {
  header: PropTypes.string,
  content: PropTypes.string,
  firstButtonLabel: PropTypes.string,
  onFirstButtonClick: PropTypes.func,
  secondeButtonLabel: PropTypes.string,
  onSecondeButtonClick: PropTypes.func,
  onClose: PropTypes.func,
  type: PropTypes.oneOf(['videoTranslate', 'hiddenStateManagment', 'deleteContent', 'assistance']),
  isLoading: PropTypes.bool,
  backgroundImageUrl: PropTypes.string
} : {};
export default Popin;
//# sourceMappingURL=index.js.map