/* pdfPasswordInput-compiled.tsx generated by @compiled/babel-plugin v0.38.1 */
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./pdfPasswordInput-compiled.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useEffect, useRef, useState } from 'react';
import Button from '@atlaskit/button/new';
import TextField from '@atlaskit/textfield';
import LockIcon from '@atlaskit/icon/core/migration/lock-locked--lock';
import Form, { Field } from '@atlaskit/form';
import { FormattedMessage, useIntl } from 'react-intl-next';
import { messages } from '@atlaskit/media-ui';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { xcss, Box, Flex, Text } from '@atlaskit/primitives';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import ErrorIcon from '@atlaskit/icon/core/migration/status-error--error';
import Heading from '@atlaskit/heading';
var COLOR_SHADE = '#b6c2cf';
var ERROR_COLOR = '#FD9891';
var headingStyle = null;
var errorMessageWrapperStyle = null;
var errorMessageStyle = null;
var headerStyles = xcss({
  textAlign: 'center',
  marginTop: 'space.200',
  marginBottom: 'space.200'
});
var inputStyle = xcss({
  width: '330px'
});
var footerStyles = xcss({
  marginTop: 'space.200',
  display: 'flex',
  justifyContent: 'center'
});
export var PDFPasswordInput = function PDFPasswordInput(_ref) {
  var onSubmit = _ref.onSubmit,
    hasPasswordError = _ref.hasPasswordError,
    onRender = _ref.onRender;
  var passwordInputRef = useRef(null);
  var onRenderRef = useRef(onRender);
  var _useState = useState(hasPasswordError),
    _useState2 = _slicedToArray(_useState, 2),
    formError = _useState2[0],
    setFormError = _useState2[1];
  var intl = useIntl();
  useEffect(function () {
    var _onRenderRef$current;
    (_onRenderRef$current = onRenderRef.current) === null || _onRenderRef$current === void 0 || _onRenderRef$current.call(onRenderRef);
  }, []);
  useEffect(function () {
    if (hasPasswordError) {
      var _passwordInputRef$cur;
      setFormError(true);
      (_passwordInputRef$cur = passwordInputRef.current) === null || _passwordInputRef$cur === void 0 || _passwordInputRef$cur.focus();
    }
  }, [hasPasswordError]);
  return /*#__PURE__*/React.createElement(Form, {
    onSubmit: onSubmit
  }, function (_ref2) {
    var formProps = _ref2.formProps,
      submitting = _ref2.submitting;
    return /*#__PURE__*/React.createElement("form", formProps, /*#__PURE__*/React.createElement(Flex, {
      justifyContent: "center"
    }, /*#__PURE__*/React.createElement(LockIcon, {
      label: "",
      LEGACY_size: "xlarge",
      color: COLOR_SHADE
    })), /*#__PURE__*/React.createElement(Box, {
      xcss: headerStyles
    }, /*#__PURE__*/React.createElement("div", {
      className: ax(["_12nx2smr _1twlmoej _1nda9txx"])
    }, /*#__PURE__*/React.createElement(Heading, {
      as: "h1",
      size: "medium"
    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.password_protected_pdf)))), /*#__PURE__*/React.createElement(Field, {
      name: "password",
      defaultValue: "",
      isRequired: true
    }, function (_ref3) {
      var fieldProps = _ref3.fieldProps;
      return /*#__PURE__*/React.createElement(Box, {
        xcss: inputStyle
      }, /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
        type: "password",
        "aria-label": intl.formatMessage(messages.password),
        placeholder: intl.formatMessage(messages.enter_password),
        ref: passwordInputRef,
        "aria-describedby": formError ? "".concat(fieldProps.id, "-error") : undefined,
        onChange: function onChange(value) {
          fieldProps.onChange(value);
          setFormError(false);
        }
      })), formError && /*#__PURE__*/React.createElement("div", {
        id: "".concat(fieldProps.id, "-error"),
        className: ax(["_11c8dcr7 _19pk1b66 _1e0c1txw _4cvr1h6o _syaz1366 _125x1366"])
      }, /*#__PURE__*/React.createElement(ErrorIcon, {
        color: "currentColor",
        LEGACY_size: "small",
        label: "",
        size: "small"
      }), /*#__PURE__*/React.createElement("div", {
        id: "".concat(fieldProps.id, "-errorMessage"),
        className: ax(["_19pkidpf _18u01b66"])
      }, /*#__PURE__*/React.createElement(Text, {
        as: "p"
      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.incorrect_password)))));
    }), /*#__PURE__*/React.createElement(Box, {
      xcss: footerStyles
    }, /*#__PURE__*/React.createElement(Button, {
      appearance: "primary",
      type: "submit",
      isLoading: submitting
    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.submit))));
  });
};