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

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 FormLayoutFullWidth = (props: FormModuleProps & FormLayoutProps): JSX.Element => (
  <Box mb={6}>
    <form onSubmit={props.onSubmit}>
      <Flex alignItems="flex-start">
        <Box p={6} bg="secondary" flex="0 0 40%">
          <Text
            as="h2"
            fontSize={3}
          >
            {props.data.title}
          </Text>
          <h3>{props.data.bodyCopy}</h3>
        </Box>
        <Box width="100%" pl={6} pr={4} pt={5} pb={4}>
          <fieldset>
            {
              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;
              })
            }
          </fieldset>
          <Flex justifyContent="flex-end">
            <Box mt="50px">
              <Button onClick={props.onSubmit}>
                Send
              </Button>
            </Box>
          </Flex>
        </Box>
      </Flex>
    </form>
  </Box>
);

export default FormLayoutFullWidth;