import React, { Component, ReactNode } from 'react';
import { StaticQuery, graphql } from 'gatsby';

import { SiteTheme } from 'lib';
import { ProductCategory } from 'types/graphql-nodes';

import SortBy from 'components/sort-by';

import { ColourConfig } from 'types/theme';

import * as Styles from './category-list.styles';
import * as Types from './category-list.types';
import { ShowOnTabletDown, ShowOnLarge } from 'utils/styles/display';

export default class CategoryList extends Component<Types.CategoryListProps> {
  static defaultProps = {
    activeCategory: null
  };

  CATEGORY_THEME_DEFAULTS = {
    backgroundColour: 'backgroundLight',
    categoryBackground: 'primaryLight',
    categoryTextColour: 'textDark',
    activeBackground: 'primary',
    activeTextColour: 'textLight'
  };

  buildThemeColours = (theme: any): ColourConfig => {
    return SiteTheme.buildThemeConfig(this.CATEGORY_THEME_DEFAULTS, {
      backgroundColour: theme.categoryModuleBackgroundColour,
      categoryBackground: theme.categoryModuleCategoryBg,
      categoryTextColour: theme.categoryModuleTextColour,
      activeBackground: theme.categoryModuleActiveBg,
      activeTextColour: theme.categoryModuleActiveTextColour
    });
  }

  extendCategories = (categories: ProductCategory[]): ProductCategory[] => {
    return [
      { title: 'All', slug: 'all' },
      ...categories.map(({ node }: any) => node)
    ];
  }

  isActive = (slug: string): boolean => {
    return !!this.props.activeCategory && this.props.activeCategory === slug;
  }

  renderMobileLayout = (categories: ProductCategory[], selectedCategory: string | null | undefined): JSX.Element => {
    const options = categories.map((category, index) => {
      const options: any = {
        slug: category.slug,
        title: category.title,
        valueKey: index,
        selected: selectedCategory && category.slug === selectedCategory
      }
      return options
    })
    return (
      <Styles.Container>
        <SortBy
          maxWidth
          options={options}
          onChange={(e) => this.props.onCategorySelect(e.target.value)}
        />
      </Styles.Container>
    )
  }

  renderDesktopLayout = (categories: ProductCategory[], theme: any): JSX.Element => {
    return (
      <Styles.Container>
        <Styles.CategoryDesktopTitleItem disabled={true}>
        Category:
        </Styles.CategoryDesktopTitleItem>
        {
          categories.map((category: any) => (
            <Styles.CategoryDesktopItem
              key={category.slug}
              theme={theme}
              isActive={this.isActive(category.slug)}
              onClick={(): void => this.props.onCategorySelect(category.slug)}
            >
              {category.title}
            </Styles.CategoryDesktopItem>
          ))
        }
      </Styles.Container>
    )
  }


  /**
   * @TODO This module needs to support module layout options, but
   * for now only a sigle Text category list is rendered.
   * Will need to abstract this module into individual module layouts
   * when the time comes to it.
   */
  render(): ReactNode {
    return (
      <StaticQuery
        query={graphql`
          query CategoryListQuery {
            allFxCategory {
              edges {
                node {
                  fxId
                  title
                  slug
                }
              }
            }
            siteConfig {
              theme {
                categoryModuleBackgroundColour { key }
                categoryModuleCategoryBg { key }
                categoryModuleTextColour { key }
                categoryModuleActiveBg { key }
                categoryModuleActiveTextColour { key }
              }
            }
          }
        `}
        render={({ allFxCategory: { edges }, siteConfig }): JSX.Element | null => {
          const categories: ProductCategory[] = this.extendCategories(edges);
          const theme = this.buildThemeColours(siteConfig.theme);

          if (!categories) {
            // We want to return null here and not return
            // the category list as all products might legitimately
            // not have any product types applied.
            return null;
          }

          return (
              <>
                <ShowOnTabletDown>
                  {this.renderMobileLayout(categories, this.props.activeCategory)}
                </ShowOnTabletDown>
                <ShowOnLarge>
                  {this.renderDesktopLayout(categories, theme)}
                </ShowOnLarge>
              </>
          );
        }}
      />
    );
  }
}