const Styled = require('styled-components');
const ReactBroadcast = require('react-broadcast');
const React = require('react');

const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const is = require('../../shared/is');

const {
  colors,
  boxes
} = constants;

const {
  remcalc
} = fns;

const {
  default: styled,
  css
} = Styled;

const {
  Subscriber
} = ReactBroadcast;

const colorWithDisabled = (props) => props.disabled
  ? colors.inactive.default
  : colors.fonts.regular;

const colorWithDefaultValue = (props) => props.value === props.defaultValue
  ? colors.inactive.default
  : colorWithDisabled(props);

const color = (props) => props.defaultValue
  ? colorWithDefaultValue(props)
  : colorWithDisabled(props);

const height = (props) => !props.multiple
  ? remcalc(48)
  : 'auto';

const paddingTop = (props) => props.multiple
  ? remcalc(20)
  : remcalc(13);

const style = css`
  box-sizing: border-box;

  width: 100%;
  height: ${height};

  margin-bottom: ${remcalc(8)};
  margin-top: ${remcalc(8)};
  padding: ${paddingTop} ${remcalc(18)};

  border-radius: ${boxes.borderRadius};
  background-color: ${colors.base.white};
  box-shadow: ${boxes.insetShaddow};
  border: ${boxes.border.unchecked};

  ${is('error')`
    border-color: ${colors.inputError}
  `};

  ${is('warning')`
    border-color: ${colors.inputWarning}
  `};

  ${is('success')`
    border-color: ${colors.base.green}
  `};

  font-size: ${remcalc(16)};
  line-height: normal !important;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  color: ${color};

  appearance: none;
  outline: 0;

  &:focus {
    border-color: ${colors.base.primary};
    outline: 0;
  }
`;

const BaseInput = (Component) => (props) => {
  const render = (value) => {
    const _value = (value || {});

    const {
      input = {},
      meta = {},
      id = ''
    } = _value;

    const hasError = !!(
      props.error || // eslint-disable-line react/prop-types
      _value.error ||
      meta.error
    );

    const hasWarning = !!(
      props.warning || // eslint-disable-line react/prop-types
      _value.warning ||
      meta.warning
    );

    const hasSuccess = !!(
      props.success || // eslint-disable-line react/prop-types
      _value.success ||
      meta.success
    );

    return (
      <Component
        {...props}
        {...input}
        id={id}
        error={hasError}
        warning={hasWarning}
        success={hasSuccess}
      />
    );
  };

  return (
    <Subscriber channel='input-group'>
      {render}
    </Subscriber>
  );
};

BaseInput.propTypes = {
  error: React.PropTypes.bool,
  warning: React.PropTypes.bool
};

module.exports = BaseInput;

module.exports.Stylable = (Component) => {
  const stylable = typeof Component === 'string'
    ? styled[Component]
    : styled(Component);

  return stylable`
    ${style}
  `;
};