import _noop from "lodash/fp/noop";
import _omit from "lodash/fp/omit";
import _snakeCase from "lodash/fp/snakeCase";
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import Loader from '../loader';
import ButtonLink from '../button-link';
import style from './style.css';
const ConfirmationInput = ({
  onChange,
  placeholder = ''
}) => {
  const handleOnChange = useMemo(() => e => {
    return onChange(e.target.value);
  }, [onChange]);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
    "data-testid": "input",
    onInput: handleOnChange,
    placeholder: placeholder,
    className: style.input,
    onChange: _noop
  }));
};
ConfirmationInput.propTypes = process.env.NODE_ENV !== "production" ? {
  onChange: PropTypes.func,
  placeholder: PropTypes.string
} : {};
const ConfirmationForm = props => {
  const {
    confirmValue,
    confirmDisabled = false,
    onConfirm,
    cancelValue,
    onHandleClose,
    onChange,
    textValidation,
    placeholder,
    isPending = false
  } = props;
  const form = /*#__PURE__*/React.createElement("div", {
    className: style.confirmForm
  }, textValidation ? /*#__PURE__*/React.createElement(ConfirmationInput, {
    onChange: onChange,
    placeholder: placeholder
  }) : /*#__PURE__*/React.createElement("div", {
    className: style.confirmEmptySpace
  }), /*#__PURE__*/React.createElement("div", {
    className: style.confirmationCTAWrapper
  }, /*#__PURE__*/React.createElement(ButtonLink, {
    label: cancelValue,
    "data-testid": "cancel-confirmation-button",
    onClick: onHandleClose
  }), /*#__PURE__*/React.createElement(ButtonLink, {
    label: confirmValue,
    disabled: confirmDisabled,
    "data-testid": "confirm-delete-button",
    onClick: onConfirm,
    customStyle: {
      backgroundColor: 'orange',
      color: 'white'
    }
  })));
  return isPending ? /*#__PURE__*/React.createElement("div", {
    className: style.confirmForm
  }, /*#__PURE__*/React.createElement(Loader, null)) : form;
};
ConfirmationForm.propTypes = process.env.NODE_ENV !== "production" ? {
  confirmValue: PropTypes.string.isRequired,
  confirmDisabled: PropTypes.bool,
  onConfirm: PropTypes.func.isRequired,
  cancelValue: PropTypes.string.isRequired,
  onHandleClose: PropTypes.func.isRequired,
  textValidation: PropTypes.bool,
  isPending: PropTypes.bool,
  ...ConfirmationInput.propTypes
} : {};
const Confirmation = props => {
  const {
    description
  } = props;
  return /*#__PURE__*/React.createElement("div", {
    className: style.sectionConfirm
  }, /*#__PURE__*/React.createElement("div", {
    className: style.description
  }, description), /*#__PURE__*/React.createElement(ConfirmationForm, props));
};
Confirmation.propTypes = process.env.NODE_ENV !== "production" ? {
  description: PropTypes.string
} : {};
const inputDoubleProps = process.env.NODE_ENV !== "production" ? _omit(['onConfirm', 'onHandleClose'], {
  ...Confirmation.propTypes
}) : {};
class InputDoublestep extends React.Component {
  constructor(props, context) {
    super(props);
    this.state = {
      open: false
    };
    this.handleToggle = this.handleToggle.bind(this);
    this.handleOnClick = this.handleOnClick.bind(this);
  }
  handleToggle() {
    this.setState(state => ({
      open: !state.open
    }));
    const {
      open
    } = this.state;
    const {
      onCloseConfirmation = _noop,
      onOpenConfirmation = _noop
    } = this.props;
    open ? onCloseConfirmation() : onOpenConfirmation();
  }
  handleOnClick(e) {
    e.preventDefault();
    this.setState({
      open: false
    });
    const {
      onClick = _noop
    } = this.props;
    return onClick(e);
  }
  render() {
    const {
      toggleValue,
      disabled,
      icon
    } = this.props;
    const {
      open
    } = this.state;
    const formView = !open ? /*#__PURE__*/React.createElement(ButtonLink, _extends({}, icon ? {
      icon: {
        position: 'left',
        faIcon: {
          name: icon,
          color: '#ffffff',
          size: 16
        }
      }
    } : {}, {
      type: "dangerous",
      label: toggleValue,
      disabled: disabled,
      "data-testid": "input-toggle-button",
      onClick: this.handleToggle
    })) : /*#__PURE__*/React.createElement(Confirmation, _extends({}, this.props, {
      onHandleClose: this.handleToggle,
      onConfirm: this.handleOnClick
    }));
    return /*#__PURE__*/React.createElement("div", {
      className: style.wrapper
    }, /*#__PURE__*/React.createElement("div", {
      "data-name": `input_doublestep_${_snakeCase(toggleValue)}`,
      className: style.value
    }, formView));
  }
}
InputDoublestep.propTypes = process.env.NODE_ENV !== "production" ? {
  toggleValue: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  onOpenConfirmation: PropTypes.func,
  onCloseConfirmation: PropTypes.func,
  icon: PropTypes.string,
  ...inputDoubleProps
} : {};
export default InputDoublestep;
//# sourceMappingURL=index.js.map