import { observer } from 'mobx-react';
import React, { FormHTMLAttributes } from 'react';
import { Modify } from '../../types/type.utils';
import { CSSProperties, css } from 'glamor';
import { useApphouse } from '../../context/useApphouse';
import { useLocalStyles } from '../../styles/defaults/useLocalStyles';
import { ApphouseComponent } from '../component.interfaces';

export type FormStyle = CSSProperties;

type HtmlFormProps = Modify<
  FormHTMLAttributes<HTMLFormElement>,
  {
    children?: React.ReactNode;
  }
>;

export interface FormProps
  extends HtmlFormProps,
    ApphouseComponent<FormStyle> {}

function FormComponent({ children, styleOverwrites, ...formProps }: FormProps) {
  const { theme } = useApphouse();
  const { tokens } = theme;
  const localStyles = useLocalStyles<FormStyle>(
    {
      display: 'flex',
      flexDirection: 'column',
      gap: tokens.spacings.gutter,
      color: 'inherit',
      width: '100%'
    },
    styleOverwrites
  );
  return (
    <form
      onSubmit={(e) => {
        /** prevent submission by default */
        e.preventDefault();
      }}
      {...formProps}
      {...css(localStyles)}
    >
      {children}
    </form>
  );
}

export const Form = observer(FormComponent);