import React from 'react';
import PropTypes from 'prop-types';
import Alert from '../Alert';

import Wrapper from './Wrapper';
import Title from './Title';
import Body from './Body';
import Footer from './Footer';
import ButtonsWrapper from './ButtonsWrapper';

import './form.scss';

const propTypes = {
  title: PropTypes.string,
  mandatory: PropTypes.string,
  hint: PropTypes.string,
  children: PropTypes.node.isRequired,
  error: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.array,
    PropTypes.node
  ]),
  titleCentered: PropTypes.bool,
  padding: PropTypes.bool,
  icon: PropTypes.string
};

const defaultProps = {
  title: null,
  mandatory: null,
  hint: null,
  error: null,
  titleCentered: false,
  padding: false,
  icon: null
};

const Form = ({ title, titleCentered, children, mandatory, hint, error, padding, icon, ...props }) => (
  <Wrapper padding={padding} {...props}>
    {!!title && <Title center={titleCentered} icon={icon}>{title}</Title>}
    {!!children && <Body>{children}</Body>}
    {(!!mandatory || !!hint || !!error)
      && <Footer>
        {!!error && <Alert type="danger">{error}</Alert>}
        {!!hint && <p styleName="hint">{hint}</p>}
        {!!mandatory && <p styleName="mandatory">{mandatory}</p>}
      </Footer>
    }
  </Wrapper>
);

Form.propTypes = propTypes;
Form.defaultProps = defaultProps;

Form.Wrapper = Wrapper;
Form.Title = Title;
Form.Body = Body;
Form.Footer = Footer;
Form.ButtonsWrapper = ButtonsWrapper;

export default Form;
