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

import theme from 'utils/theme';

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

import { FormModuleProps } from '../../form-module.types';
import { FormLayoutProps } from '../form-layout.types';
import { FluidContainer } from 'utils/styles/mixins';

import * as Styles from './form-layout-text-aside.styles';

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

const FormLayoutTextAside = (props: FormModuleProps & FormLayoutProps): JSX.Element => (
  <Box
    bg="secondary"
    mb={6}
    py={[3, 3, 4]}
  >
    <form onSubmit={props.onSubmit}>
      <FluidContainer>
        <Styles.Container>
          <Box
            pr={[0, 0, 6]}
            width={[1, 1, 1/2]}
          >
            <Text
              as="h2"
              mb={[1, 2]}
              fontSize={[7, 8]}
              lineheight={[7, 8]}
            >
              {props.data.title}
            </Text>
            <Text
              as="p"
              fontSize={[2, 3]}
              lineHeight={[2, 3]}
              color={theme.colors.textMedium}
            >
              {props.data.bodyCopy}
            </Text>
          </Box>
          <Box
            width={[1, 1, 1/2]}
          >
            <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
                width={[1, 1, 5/12]}
                mt={[1, 2]}
              >
                <Button
                  fullwidth={true}
                  onClick={props.onSubmit}
                >
                  Send Message
                </Button>
              </Box>
            </Flex>
          </Box>
        </Styles.Container>
      </FluidContainer>
    </form>
  </Box>
);

export default FormLayoutTextAside;