/* passwordInput.tsx generated by @compiled/babel-plugin v0.38.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./passwordInput.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';
const COLOR_SHADE = '#b6c2cf';
const ERROR_COLOR = '#FD9891';
const headingStyle = null;
const errorMessageWrapperStyle = null;
const errorMessageStyle = null;
const headerStyles = xcss({
  textAlign: 'center',
  marginTop: 'space.200',
  marginBottom: 'space.200'
});
const inputStyle = xcss({
  width: '330px'
});
const footerStyles = xcss({
  marginTop: 'space.200',
  display: 'flex',
  justifyContent: 'center'
});
export const PasswordInput = ({
  onSubmit,
  hasPasswordError,
  onRender
}) => {
  const passwordInputRef = useRef(null);
  const onRenderRef = useRef(onRender);
  const [formError, setFormError] = useState(hasPasswordError);
  const intl = useIntl();
  useEffect(() => {
    var _onRenderRef$current;
    (_onRenderRef$current = onRenderRef.current) === null || _onRenderRef$current === void 0 ? void 0 : _onRenderRef$current.call(onRenderRef);
  }, []);
  useEffect(() => {
    if (hasPasswordError) {
      var _passwordInputRef$cur;
      setFormError(true);
      (_passwordInputRef$cur = passwordInputRef.current) === null || _passwordInputRef$cur === void 0 ? void 0 : _passwordInputRef$cur.focus();
    }
  }, [hasPasswordError]);
  return /*#__PURE__*/React.createElement(Form, {
    onSubmit: onSubmit
  }, ({
    formProps,
    submitting
  }) => /*#__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
  }, ({
    fieldProps
  }) => /*#__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 ? `${fieldProps.id}-error` : undefined,
    onChange: value => {
      fieldProps.onChange(value);
      setFormError(false);
    }
  })), formError && /*#__PURE__*/React.createElement("div", {
    id: `${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: `${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)))));
};