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

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

const UserInfoFormView = ({
  isSendingUserRequest,
  userRequestError,
  userRequestSuccess,
  phoneNumber,
  changePhoneNumber,
  onSubmitUserInfo
}) => (
  <Container>
    <Header>User Info</Header>
    <Form
      loading={isSendingUserRequest}
      onSubmit={onSubmitUserInfo}
      error={!!userRequestError}
      success={!!userRequestSuccess}
    >
      <Form.Field>
        <label>Phone Number</label>
        <input
          placeholder="7809999999"
          type="tel"
          value={phoneNumber}
          onChange={changePhoneNumber}
        />
      </Form.Field>
      <Error header="Modify User Info failed!" error={userRequestError} />
      <Message success>
        <Message.Header>Modify User Info successful!</Message.Header>
        <p>Set user info successfully.</p>
      </Message>
      <Form.Button>Submit User Info</Form.Button>
    </Form>
  </Container>
);

export default UserInfoFormView;