import React from "react";
import { connect } from "react-redux";
import { Field, getFormValues } from "redux-form";
import { Grid, Form } from "semantic-ui-react";
import RenderFieldSelect from "../../formElements/Select";

import {
  PROPERTY_TYPE_1,
  PROPERTY_TYPE_2,
  SUB_TYPE,
  EMPTY_OPTIONS
} from "./SelectOptions";
import { required } from "redux-form-validators";
import { withRouter } from "react-router";

class SummaryAttributes extends React.Component {
  render() {
    let propertyType; // property type
    let propertyTypes = EMPTY_OPTIONS; // propertyTypes options
    let hasSubType;
    let subTypes = EMPTY_OPTIONS;

    const { formValues } = this.props;

    if (formValues !== undefined) {
      const { scorecardType } = this.props.match.params;
      switch (scorecardType) {
        case "1":
          propertyTypes = PROPERTY_TYPE_1;
          break;
        case "2":
          propertyTypes = PROPERTY_TYPE_2;
          break;
        default:
      }

      propertyType = formValues.propertyType;
      switch (propertyType) {
        case "1":
          subTypes = SUB_TYPE;
          hasSubType = true;
          break;
        case "2":
          hasSubType = false;
          break;
        default:
          subTypes = SUB_TYPE;
          hasSubType = true;
      }
    }

    return (
      <div>
        <Grid>
          <Grid.Row columns="equal">
            <Grid.Column>
              <Form.Group widths="equal">
                <Field
                  name="propertyType"
                  component={RenderFieldSelect}
                  label="Property Type"
                  required="Y"
                  options={propertyTypes}
                  validate={[required()]}
                />
              </Form.Group>
            </Grid.Column>
            <Grid.Column>
              {hasSubType && (
                <Field
                  name="subType"
                  component={RenderFieldSelect}
                  label="Sub Type"
                  required="Y"
                  options={subTypes}
                  validate={[required()]}
                />
              )}
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  formValues: getFormValues("propertyForm")(state)
});

export default withRouter(
  connect(
    mapStateToProps,
    null
  )(SummaryAttributes)
);