const EditKeycodeParametersFormComponent = ({
  className,
  closeModal,
  handleSubmit,
  submitting,
  invalid,
  pristine,
  submitFailed,
  selectedRowsData,
}) => (
  <form className={className} onSubmit={handleSubmit}>
    <h2>LSPL (Low Stock Presentation Level)</h2>
    <Line />
    <InputGroup>
      <TextFieldWithValidation
        name="lsplMan"
        label="LSPL Manual"
      />
    </InputGroup>
    <h2>On / Off Range</h2>
    <Line />
    <InputGroup>
      <DatePickerWithValidation
        name="onRange"
        label="On Range Date"
        dayIsOutsideRange={() => (false)}
      />
      <DatePickerWithValidation
        name="offRange"
        label="Off Range Date"
        dayIsOutsideRange={() => (false)}
      />
    </InputGroup>
    <h2>Ranged</h2>
    <Line />
    <InputGroup>
      <CheckboxWithValidation
        label="Ranged"
        name="ranged"
      />
    </InputGroup>
    <h2>Active</h2>
    <Line />
    <InputGroup>
      <CheckboxWithValidation
        label="Active"
        name="active"
      />
    </InputGroup>
    <MarginBottomDiv>
      {submitFailed
        && <InfoPanel
          error
          text="There was an error updating these parameters.
          Please make sure you have entered values correctly and that the store(s) will be open during the supplied dates."
        />}
    </MarginBottomDiv>
    <MarginBottomLarge>
      <ButtonsGroupWrapper>
        <Button
          label="Apply Changes"
          primary
          loading={submitting}
          type="submit"
          disabled={invalid || pristine}
        />
        <Button type="button" label="Cancel" onClick={closeModal} />
        <RecordUpdateInformation>
          You are updating&nbsp;<span>{selectedRowsData.length}</span>&nbsp;{ selectedRowsData.length > 1 ? 'records' : 'record' }
        </RecordUpdateInformation>
      </ButtonsGroupWrapper>
    </MarginBottomLarge>
  </form>
);

EditKeycodeParametersFormComponent.propTypes = {
  closeModal: PropTypes.func.isRequired,
  handleSubmit: PropTypes.func.isRequired,
  submitting: PropTypes.bool,
  submitFailed: PropTypes.bool,
  invalid: PropTypes.bool,
  pristine: PropTypes.bool,
  className: PropTypes.string,
  selectedRowsData: PropTypes.arrayOf(PropTypes.object).isRequired,
};

EditKeycodeParametersFormComponent.defaultProps = {
  submitting: false,
  invalid: false,
  submitFailed: false,
  pristine: true,
  className: '',
};

const validate = (values, props) => ({
  ...validateAllOnOffRangeDates(values, props.selectedRowsData),
  ...validateAllSingleLsplMans(values),
});

const EditParametersFormReduxForm = reduxForm({
  form: 'editParameters',
  validate,
  enableReinitialize: true,
  touchOnChange: true,
})(StyledEditParametersForm);

const mapStateToProps = (state) => {
  const selectedRowsData = state.parameters.selectedIndexes.map((selectedIndex) =>
    state.parameters.parametersSearchResults[selectedIndex]
  );
  return {
    initialValues: getFormValuesForDandFKeycode(selectedRowsData),
    selectedRowsData,
  };
};

const mapDispatchToProps = {
  closeModal: closeEditParametersModal,
};


export default connect(mapStateToProps, mapDispatchToProps)(EditParametersFormReduxForm);

const getState = (meta) => {
  if (meta.touched) {
    if (meta.valid) {
      return textFieldStates.VALID;
    } else if (meta.invalid) {
      return textFieldStates.INVALID;
    }
  }

  return textFieldStates.DEFAULT;
};

const isBeforeTomorrow = (day) => day.isBefore(moment().add(1, 'days'), 'day');

export class DatePickerWithValidationComponent extends React.Component {
  constructor() {
    super();

    this.state = {
      pickerOpen: false,
      selectedDate: null,
    };
    this.openDatePicker = this.openDatePicker.bind(this);
    this.closeDatePicker = this.closeDatePicker.bind(this);
    this.setDate = this.setDate.bind(this);
    this.setDateViaTyping = this.setDateViaTyping.bind(this);
  }

  setDate(value) {
    this.props.input.onChange(value.format('DD/MM/YYYY'));
    this.setState({ selectedDate: value });
    this.closeDatePicker();
  }

  setDateViaTyping(event) {
    let value = moment(event.target.value, 'DD/MM/YYYY');
    if (!value.isValid()) {
      value = null;
    }
    this.setState({ selectedDate: value });
  }

  openDatePicker() {
    this.setState({ pickerOpen: true });
  }

  closeDatePicker() {
    this.props.input.onBlur();
    this.setState({ pickerOpen: false });
  }

  render() {
    const { label, meta, input } = this.props;

    return (
      <DayPickerContainer>
        <TextField
          label={label}
          {...input}
          onClick={this.openDatePicker}
          onBlur={this.setDateViaTyping}
          state={getState(meta)}
          errorMessage={meta.touched ? meta.error : ''}
        />
        {this.state.pickerOpen &&
          <DayPickerWrapper>
            <DayPickerSingleDateController
              date={this.state.selectedDate}
              onDateChange={this.setDate}
              onOutsideClick={this.closeDatePicker}
              hideKeyboardShortcutsPanel
              enableOutsideDays
              isOutsideRange={this.props.dayIsOutsideRange}
            />
          </DayPickerWrapper>
        }
      </DayPickerContainer>
    );
  }
}

const DayPickerWrapper = styled.div`
  position: absolute;
  z-index: 99;

  /* react-dates css overrides */
  .DayPicker__withBorder {
    border-radius: 2px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1), 0 0 0 1px #ddd;
  }

  .CalendarDay__selected,
  .CalendarDay__selected:active,
  .CalendarDay__selected:hover {
    background: ${({ theme }) => theme.palette.ACTIVE};
    border: ${({ theme }) => theme.border.normal(theme.palette.ACTIVE)};
  }
`;

const DayPickerContainer = styled.div`
  position: relative;
`;

const DatePickerWithValidation = (props) => (
  <Field component={DatePickerWithValidationComponent} {...props} />
);

DatePickerWithValidationComponent.propTypes = {
  label: PropTypes.string,
  meta: PropTypes.objectOf(PropTypes.any).isRequired,
  input: PropTypes.objectOf(PropTypes.any).isRequired,
  dayIsOutsideRange: PropTypes.func,
};

DatePickerWithValidationComponent.defaultProps = {
  label: '',
  dayIsOutsideRange: isBeforeTomorrow,
};

export default DatePickerWithValidation;