import React from "react";

import { Button, Form, Popover, Text, TextInput } from "@patternfly/react-core";

import { OutlinedQuestionCircleIcon } from "@patternfly/react-icons";

import { FormattedMessage, defineMessages, injectIntl, intlShape } from "react-intl";

import PropTypes from "prop-types";

const ariaLabels = defineMessages({

  accessKeyID: {

    id: "access-key-id-help",

    defaultMessage: "Access key ID help",

  },

  secretAccessKey: {

    id: "secret-access-key-help",

    defaultMessage: "Secret access key help",

  },

});

class AWSAuthStep extends React.PureComponent {

  render() {

    const { formatMessage } = this.props.intl;

    const { uploadSettings, setUploadSettings } = this.props;

    return (

      <>

        <Text className="help-block cc-c-form__required-text">

          <FormattedMessage defaultMessage="All fields are required." />

        </Text>

        <Form isHorizontal className="cc-m-wide-label">

              <label htmlFor="access-key-id-input" className="pf-l-flex__item">

                  <FormattedMessage defaultMessage="Access key ID" />

                  *

              </label>

                id="access-key-popover"

                bodyContent={

                    defaultMessage="You can create and find existing Access key IDs on the {iam} page in the AWS console."

                    values={{

                      iam: Identity and Access Management (IAM),

                    }}

                  />

                }

                aria-label={formatMessage(ariaLabels.accessKeyID)}

              >

                <Button variant="plain" aria-label={formatMessage(ariaLabels.accessKeyID)}>

                  <OutlinedQuestionCircleIcon id="popover-icon" />

                </Button>

              </Popover>

              className="pf-c-form-control"

              value={uploadSettings.accessKeyID}

              type="password"

              id="access-key-id-input"

              name="accessKeyID"

              onChange={setUploadSettings}

            />

              <label htmlFor="secret-access-key-input" className="pf-l-flex__item">

                  <FormattedMessage defaultMessage="Secret access key" />

                  *

              </label>

                id="secret-key-popover"

                bodyContent={

                    defaultMessage="You can view the Secret access key only when you create a new Access key ID on the {iam} page in the AWS console."

                    values={{

                      iam: Identity and Access Management (IAM),

                    }}

                  />

                }

                aria-label={formatMessage(ariaLabels.secretAccessKey)}

              >

                <Button variant="plain" aria-label={formatMessage(ariaLabels.secretAccessKey)}>

                  <OutlinedQuestionCircleIcon id="popover-icon" />

                </Button>

              </Popover>

              className="pf-c-form-control"

              value={uploadSettings.secretAccessKey}

              type="password"

              id="secret-access-key-input"

              name="secretAccessKey"

              onChange={setUploadSettings}

            />

        </Form>

    );

  }

}

AWSAuthStep.propTypes = {

  intl: intlShape.isRequired,

  setUploadSettings: PropTypes.func,

  uploadSettings: PropTypes.object,

};

AWSAuthStep.defaultProps = {

  uploadSettings: {},

  setUploadSettings() {},

};

export default injectIntl(AWSAuthStep);