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

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

import { EmailStatus, FormModuleProps } from '../../form-module.types';
import { FormLayoutProps } from '../form-layout.types';
import {
  ErrorText,
  FormWrapper,
  FullFormFieldStyles,
  IconStyle,
  SendingSymbol,
  SubmitWrapper
} from './begonia-centered.styles';
import { getColumnSize } from 'utils/styles/grid';
import { FormField } from 'types/forms';
import TextInput from '../../../../../fields/text-input';
import TextArea from '../../../../../fields/text-area';
import Icon from 'components/icon';
import { ICON_NAMES } from 'utils/constants/assets';

const BegoniaCentered = (props: FormModuleProps & FormLayoutProps): JSX.Element => {
  const newFields: FormField[] = props.data.contactFormFields.map(field => {
    return {
      id: slugifyURL(field.label),
      label: field.label,
      width: field.width,
      required: field.required,
      config: {
        inputType: field.fieldType
      }
    };
  });

  return (
    <FluidContainer maxWidth={`${getColumnSize(8)}px`}>
      <Flex>
        <form onSubmit={props.onSubmit}>
          <Text
            as="h2"
            fontSize={5}
          >
            {props.data.title}
          </Text>
          <Text>
            {props.data.bodyCopy}
          </Text>
          <FormWrapper
          >
            {
              newFields.map((field): JSX.Element | null => {
                const RenderingField = field.config!.inputType === "textarea" ? TextArea : TextInput;
                return (
                  <FullFormFieldStyles key={field.id} fieldWidth={field.width}>
                    <RenderingField
                      data={field}
                      onChange={props.onChange}
                      value={props.formData[field.id]}
                    />
                  </FullFormFieldStyles>
                );
              })
            }
          </FormWrapper>
          <Flex justifyContent="flex-end" alignItems="flex-end">
            {
              props.error &&
                <ErrorText
                    as="p"
                    fontSize={2}
                >
                  Something went wrong, please try again.
                </ErrorText>
            }
            <SubmitWrapper
              mt="30px"
              as="button"
              type="submit"
              status={props.status}
            >
              {
                props.status === EmailStatus.NONE ? 'Send'
                : props.status === EmailStatus.SENDING ? <SendingSymbol/>
                : props.status === EmailStatus.SENT ?
                  <Icon
                    iconName={ICON_NAMES.TICK}
                    styles={IconStyle}
                  />
                :
                  <Icon
                    iconName={ICON_NAMES.CLOSE}
                    styles={IconStyle}
                  />
              }
            </SubmitWrapper>
          </Flex>
        </form>
      </Flex>
    </FluidContainer>
  );
};

export default BegoniaCentered;