import React from 'react';
import { css } from '@emotion/core';
import { Flex, Text } from '@rebass/emotion';
import { HTMLService } from 'lib';
import { FluidContainer } from 'utils/styles/mixins';

import theme, { breakpoints } from 'utils/theme';
import { getColumnSize } from 'utils/styles/grid';
import typography from 'utils/typography';
import { TextModuleProps } from '../../text-module.types';

const AsterDefault = ({data}: TextModuleProps): JSX.Element => {
  const {text, heading, alignment} = data;
  const positions: { [key: string]: string } = {
    centered: 'center',
    left: 'flex-start',
    right: 'flex-end'
  };

  return (
    <FluidContainer>
      <Flex
        flexDirection="column"
        css={css`
          align-items: ${positions[alignment]};
          padding: 0 30px;
          @media (min-width: ${breakpoints.large}) {
            padding-${alignment}: ${getColumnSize(1)}px;
          }

          p {
            color: ${theme.colors.textDark};
            font-size: ${theme.fontSizes[2]};
            line-height: ${theme.lineHeights[2]};

            @media (min-width: ${breakpoints.large}) {
              font-size: ${theme.fontSizes[3]};
              line-height: ${theme.lineHeights[6]};
            }
          }

          a:-webkit-any-link {
            text-decoration: inherit;
            color: inherit;
            font-weight: bold;
          }

          ol {
            list-style: none;
            counter-reset: rich-counter;
            margin: 0;

            @media (max-width: ${breakpoints.medium}) {
              font-size: ${theme.fontSizes[2]};
            }
          }
          ol li {
            counter-increment: rich-counter;
            margin: 40px 0;

            @media (min-width: ${breakpoints.medium}) {
              display: flex;
              align-items: baseline;
            }
          }
          ol li::before {
            content: counter(rich-counter) ". ";
            margin-right: 46px;
            font-size: ${theme.fontSizes[5]};
            font-weight: bold;
            font-family: ${typography.options.headerFontFamily};
          }
          blockquote {
            font-size: ${theme.fontSizes[8]};
            line-height: ${theme.lineHeights[9]};
            font-style: italic;
            width: 100%;
            margin: 40px 0 20px 0;
            font-family: ${typography.options.headerFontFamily};
          }
        `}
      >
        {heading &&
        <Text
            as="h2"
            my={4}
            width={[1, 1, `${getColumnSize(8)}px`]}
            fontSize={[7, 8]}
            lineHeight={[7, 8]}
        >
          {heading}
        </Text>
        }
        <Text
          width={[1, 1, `${getColumnSize(8)}px`]}
          dangerouslySetInnerHTML={{
            __html: HTMLService.htmlFromMarkdown(text)
          }}
        />
      </Flex>
    </FluidContainer>
  );
};

export default AsterDefault;