import React, { Component, ReactNode } from 'react';
import { Box } from '@rebass/emotion';
import { css } from '@emotion/core';

import FloomBannerBadge from '../../../../assets/images/floom-banner-badge.png';

import Icon from 'components/icon';
import Button from 'components/button';
import { getColumnSize } from 'utils/styles/grid';

import floomxFooterConfig from './floomx-footer-module.constants';
import * as Styles from './floomx-footer-module.styles';
import { FloomxFooterContent } from 'types/generator-page';

import Image from 'components/Image';
import { ICON_NAMES } from 'utils/constants/assets';
import { SiteTheme } from 'lib';
import { FluidContainer } from 'utils/styles/mixins';

export default class FloomxFooter extends Component<{ data: FloomxFooterContent }> {

  render(): ReactNode {

    const {
      data: {
        bannerDesktop,
        bannerTablet,
        bannerMobile,
        iconColour,
        bodyTextColour,
        displayBadge
      }
    } = this.props

    // TODO: Come back to this. Might need to store the "Floom brand colour" somewhere.
    // const processedIconColour = SiteTheme.setColour(iconColour, 'white');
    const processBodyTextColour = SiteTheme.setColour(bodyTextColour, 'white');

    return (
      <Box>
        <FluidContainer>
          <Styles.Container hasBadge={displayBadge}>
            <Styles.DesktopBackground hasBadge={displayBadge}>
              <Image
                isBackground={true}
                classId="desktop-banner"
                fluid={bannerDesktop}
              />
              <Image
                isBackground={true}
                classId="tablet-banner"
                fluid={bannerTablet}
              />
              <Image
                isBackground={true}
                classId="mobile-banner"
                fluid={bannerMobile}
              />
            </Styles.DesktopBackground>
            <Styles.ContentContainer hasBadge={displayBadge}>
              {
                displayBadge && (
                  <Styles.Badge>
                    <img src={FloomBannerBadge} />
                  </Styles.Badge>
                )
              }
              <a href={floomxFooterConfig.buttonLink}>
                <Styles.IconContainer colour={'#00124F'}>
                  <Icon iconName={ICON_NAMES.FLOOM} styles={Styles.Icon}/>
                </Styles.IconContainer>
              </a>
              <Styles.Copy
                fontSize={[3]}
                lineHeight={[6]}
                as="p"
                mt={0}
                hasBadge={displayBadge}
                color={processBodyTextColour}
              >
                {floomxFooterConfig.content.body}
              </Styles.Copy>
              <Box
                width={[1, `${getColumnSize(2)}px`]}
              >
                <Button
                  customCSS={css`
                    background: #00124F;
                    font-weight: 400;
                  `}
                  url={floomxFooterConfig.buttonLink}
                  fullwidth={true}
                  onClick={(): void => console.log('clicked!')}
                >
                  {floomxFooterConfig.content.buttonText}
                </Button>
              </Box>
            </Styles.ContentContainer>
          </Styles.Container>
        </FluidContainer>
      </Box>
    );
  }
}