import React from 'react';
import { Box, Flex, Text } from '@rebass/emotion';
import styled from '@emotion/styled';

import { FluidContainer } from 'utils/styles/mixins';

import Button from 'components/button';
import fieldConfig from 'components/fields';

import { FormModuleProps } from '../../form-module.types';
import { FormLayoutProps } from '../form-layout.types';

export const FormFieldStyles: any = styled.div`
  & + ${(): any => FormFieldStyles} {
    margin-top: 20px;
  }
`;

const FormLayoutCentered = (props: FormModuleProps & FormLayoutProps): JSX.Element => (
  <Box
    py={6}
    bg="backgroundLight"
  >
    <FluidContainer maxWidth="700px">
      <form onSubmit={props.onSubmit}>
        <Text
          as="h2"
          fontSize={3}
        >
          {props.data.title}
        </Text>
        <Text>
          {props.data.bodyCopy}
        </Text>
        <Box
          as="fieldset"
          mt={4}
        >
          {
            props.fields.map((field): JSX.Element | null => {
              if (field.fieldType && fieldConfig[field.fieldType]) {
                const RenderedField: any = fieldConfig[field.fieldType];

                return (
                  <FormFieldStyles key={field.id}>
                    <RenderedField
                      data={field}
                      onChange={props.onChange}
                      value={props.formData[field.id]}
                    />
                  </FormFieldStyles>
                );
              }

              return null;
            })
          }
        </Box>
        <Flex justifyContent="flex-end">
          <Box mt="30px">
            <Button onClick={props.onSubmit}>
              Send
            </Button>
          </Box>
        </Flex>
      </form>
    </FluidContainer>
  </Box>
);

export default FormLayoutCentered;