import React from 'react';
import { useSpring, animated } from 'react-spring';
import classNames from 'classnames';
import { ErrorMessage } from 'formik';
import styles from './FormLayout.module.css';

export default function FormLayout({ className, children }) {
  return <div className={classNames(styles.form, className)}>{children}</div>;
}

export const FormButtons = ({ className, children }) => (
  <div className={classNames(styles.buttons, className)}>{children}</div>
);

export const FormError = ({ name }) => {
  return <ErrorMessage name={name}>{msg => <ErrorTag msg={msg} />}</ErrorMessage>;
};

const ErrorTag = ({ msg }) => {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });

  return (
    <animated.div className={styles.error} style={props}>
      <div className={styles.msg}>{msg}</div>
    </animated.div>
  );
};

export const FormRow = ({ children }) => <div className={styles.row}>{children}</div>;

export const FormMessage = ({ children }) =>
  children ? <div className={styles.message}>{children}</div> : null;