import React, { Component } from "react";
import { connect } from "react-redux";
import { Container, Form, Header } from "semantic-ui-react";

import {
  setCompleteRegistrationClientOrProvider,
  setCompleteRegistrationStep
} from "../../actions/user/reducer.actions";
import { CLIENT, PROVIDER, COMPLETE_INFORMATION_STEP } from "../../constants/user.constants";

class ClientOrProviderForm extends Component {
  changeClientOrProvider = (event, { value }) => {
    this.props.dispatch(setCompleteRegistrationClientOrProvider(value));
  }

  onSelectClientOrProvider = event => {
    this.props.dispatch(setCompleteRegistrationStep(COMPLETE_INFORMATION_STEP));
  }

  render() {
    const { completeRegistrationClientOrProvider } = this.props;
    return (
      <ClientOrProviderFormView
        clientOrProvider={completeRegistrationClientOrProvider}
        changeClientOrProvider={this.changeClientOrProvider}
        onSelectClientOrProvider={this.onSelectClientOrProvider}
      />
    );
  }
}

function mapStateToProps(state) {
  return { ...state.user };
}

const ClientOrProviderFormView = ({
  clientOrProvider,
  changeClientOrProvider,
  onSelectClientOrProvider
}) => (
  <Container>
    <Header>Client or Provider</Header>
    <Form onSubmit={onSelectClientOrProvider}>
      <Form.Group inline>
        <label>Client or Provider</label>
        <Form.Radio
          label="Client"
          value={CLIENT}
          checked={clientOrProvider === CLIENT}
          onChange={changeClientOrProvider}
        />
        <Form.Radio
          label="Provider"
          value={PROVIDER}
          checked={clientOrProvider === PROVIDER}
          onChange={changeClientOrProvider}
        />
      </Form.Group>
      <Form.Button>Continue</Form.Button>
    </Form>
  </Container>
);

export default connect(mapStateToProps)(ClientOrProviderForm);