import React from "react";
import { Container, Form, Header, Message } from "semantic-ui-react";

import Error from "../Shared/Error";

const ProviderFormView = ({
  isSendingUserRequest,
  userRequestError,
  userRequestSuccess,
  socialInsuranceNumber,
  changeSocialInsuranceNumber,
  onSubmitProvider
}) => (
  <Container>
    <Header>Complete Provider Information</Header>
    <Form
      loading={isSendingUserRequest}
      onSubmit={onSubmitProvider}
      error={!!userRequestError}
      success={!!userRequestSuccess}
    >
      <Form.Field>
        <label>Social Insurance Number</label>
        <input
          placeholder="98765"
          type="text"
          value={socialInsuranceNumber}
          onChange={changeSocialInsuranceNumber}
        />
      </Form.Field>
      <Error header="Modify Provider failed!" error={userRequestError} />
      <Message success>
        <Message.Header>Modify Provider successful!</Message.Header>
        <p>Set provider successfully.</p>
      </Message>
      <Form.Button>Submit Provider</Form.Button>
    </Form>
  </Container>
);

export default ProviderFormView;