import React, { Component } from 'react';
import { css } from '@emotion/core';
import { Flex, Box, Heading } from '@rebass/emotion';
import debounce from 'lodash.debounce';

import { SiteTheme } from 'lib';
import { colors } from 'utils/theme';
import { MerchantProduct } from 'types/product';
import { FluidContainer } from 'utils/styles/mixins';

import ProductItem from 'components/product-item';
import StyledCarousel from 'components/styled-carousel';

import { ProductListModuleProps } from '../product-list-module.types';
import { ListConfig } from './product-list-module-default.constants';
import * as Styles from './product-list-module-default.styles';
import { PRODUCT_LIST } from 'utils/constants/layouts-names';

// Slick Default Styling
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

type ProductSlide = MerchantProduct | MerchantProduct[];

export default class ProductListModuleDefault extends Component<ProductListModuleProps> {
  imageRef: any = React.createRef();

  state = {
    arrowOffset: false,
    isDragging: false,
    setArrowOffset: ListConfig[this.props.data.layoutOption].setArrowOffset
  };

  componentDidMount(): void {
    window.addEventListener('resize', debounce(this.setArrowOffset, 1));
  }

  componentWillUnmount(): void {
    window.removeEventListener('resize', this.setArrowOffset);
  }

  getImageHeight = (): number => {
    try {
      return this.imageRef
        .getElementsByTagName('img')[0]
        .getBoundingClientRect().height;
    } catch (e) {
      console.error(e);
      return 0;
    }
  }

  setArrowOffset = (): void => {
    if (this.imageRef) {
      this.setState({
        arrowOffset: this.state.setArrowOffset ? this.getImageHeight() / 2 : false
      });
    }
  };

  setImageRef = (ref: React.RefObject<Element>): void => {
    this.imageRef = ref;

    this.setArrowOffset();
  };

  preventProductClick = (event: React.MouseEvent, isDragging: boolean): any =>
    isDragging && event.preventDefault();

  isMultipleProducts = (slide: ProductSlide): slide is MerchantProduct[] =>
    Array.isArray(slide);

  render(): React.ReactNode {
    let isDragging = false;
    const {
      products,
      layoutOption,
      dialogueBackgroundColour,
      titleTextColour
    } = this.props.data;
    const iconColour = SiteTheme.setColour(this.props.data.iconColour, 'primary');

    if (!!products.length) {
      const listConfig = ListConfig[layoutOption];
      const Wrapper = listConfig.wrapper;
      const isSideLayout = layoutOption === PRODUCT_LIST.MEDIUM_WITH_SIDE_HEADING;

      return (
        <Wrapper>
          <Flex
            width={1}
            flexWrap={isSideLayout ? ['wrap', 'wrap', 'nowrap'] : 'wrap'}
          >
            <Heading
              as="h2"
              fontSize={[6, listConfig.heading.fontSize || 8]}
              width={listConfig.heading.width}
              textAlign={listConfig.heading.textAlign || 'left'}
              css={css`
                ${listConfig.heading.customCSS};
                background: ${isSideLayout ? (colors[dialogueBackgroundColour.key] || colors.primary) : 'none'};
                color: ${colors[titleTextColour.key] || colors.textDark};
              `}
              mb={[1, 2]}
            >
              {isSideLayout
                ? this.props.data.title
                : <FluidContainer>{this.props.data.title}</FluidContainer>
              }
            </Heading>
            <Box
              width={1}
              css={css`
                ${Styles.SliderWrapper}
                ${listConfig.sliderWrapperStyles}
              `}
            >
              <StyledCarousel
                settings={{
                  ...listConfig.slider,
                  swipeEvent: (): any => isDragging = true
                }}
                arrowOffset={this.state.arrowOffset}
                iconColour={iconColour}
                css={listConfig.slickStyles}
              >
                {!!products.length &&
                  products.map((slide: MerchantProduct, index: number) => (
                      <Box
                        key={index}
                        onMouseDown={(): any => isDragging = false}
                        {...(index === 0 && { ref: this.setImageRef })}
                      >
                        <Box pt={isSideLayout ? 20 : '0px'}>
                          <ProductItem
                            product={slide.fields.productData}
                            onClickCapture={(e: React.MouseEvent): void => this.preventProductClick(e, isDragging)}
                            key={slide.id}
                          />
                        </Box>
                      </Box>
                    )
                  )
                }
              </StyledCarousel>
            </Box>
          </Flex>
        </Wrapper>
      );
    } else {
      return null;
    }
  }
}