import React, { FC, useEffect, useRef, useState } from 'react';

import IconLoader from '../../blocks/IconLoader';
import css from './index.module.css';
import Content from '../Content';
import { MilaGridColumn, MilaGridVoid } from '../../index';
import ResizeObserver from 'resize-observer-polyfill';
import classnames from 'classnames';
import CategoryModal from '../CategoryModal';
import SimpleBar from 'simplebar-react';
import 'simplebar/dist/simplebar.min.css';

export interface SubCategory {
  slug: string;
  description: string;
  name: string;
  milaInternalId: string;
}

export interface Category {
  slug: string;
  name: string;
  subcategories: Array<SubCategory>;
  image: string;
  milaInternalId: string;
}
interface PackageCategoryTabProps {
  categories: Array<Category>;
  onSelectCategory: (category, slug) => void;
  variant: 'normal' | 'banner' | 'partner';
  selectedIndex: number;
  title: string;
  description: string;
  Translations: {
    showAll: string;
    showServices: string;
    title: string;
  };
}
const PackageCategoryTab: FC<PackageCategoryTabProps> = ({
  categories,
  onSelectCategory,
  variant,
  selectedIndex,
  title,
  description,
  Translations,
}) => {
  const [category, setCategory] = useState<Category>(null);

  const [modalIsOpen, setIsOpen] = useState(false);
  const openModal = (): void => {
    setIsOpen(true);
  };

  const closeModal = (): void => {
    setIsOpen(false);
  };

  const [elementsCount, _] = useState(categories.length);
  const tabRef = useRef(null);
  const gridRef = useRef(null);
  const [tabIndex, setTabIndex] = useState(-1);

  const [showSlider, setShowSlider] = useState(false);
  const scrollableNodeRef = useRef(null);

  useEffect(() => {
    if (tabIndex === -1) return;
    const target = gridRef.current.children[tabIndex];
    const scrollRect = scrollableNodeRef.current.getBoundingClientRect();
    const activeRect = target.getBoundingClientRect();
    const scrollLeftPosition =
      activeRect.left -
      scrollRect.left -
      scrollRect.width / 2 +
      activeRect.width / 2;

    scrollableNodeRef?.current.scrollTo({
      behavior: 'smooth',
      left: scrollableNodeRef.current.scrollLeft + scrollLeftPosition,
    });
  }, [tabIndex]);

  useEffect(() => {
    setTabIndex(selectedIndex);
    setCategory(categories[selectedIndex]);
  }, [selectedIndex]);

  const ro = new ResizeObserver((entries, _) => {
    const containerWidth = entries[0].contentRect.width;
    setShowSlider(
      containerWidth < elementsCount * 80 + (elementsCount - 1) * 20,
    );
  });

  useEffect(() => {
    ro.observe(tabRef.current);
    return (): void => ro.unobserve(tabRef.current);
  }, [tabRef]);

  const [shadow, setShadow] = useState('right');

  const handleScroll = (e): void => {
    if (e.target.scrollLeft === 0) {
      setShadow('right');
    } else if (
      e.target.scrollLeft ===
      e.target.scrollWidth - e.target.clientWidth
    ) {
      setShadow('left');
    } else {
      setShadow('both');
    }
  };

  useEffect(() => {
    if (showSlider) {
      handleScroll({
        target: scrollableNodeRef.current,
      });
    }
  }, [scrollableNodeRef]);
  return (
    <>
      <div className={`${variant === 'banner' ? css.category__banner : ''}`}>
        <Content>
          <MilaGridVoid>
            {variant != 'banner' && (
              <MilaGridColumn
                columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
                offset={['lg-1', 'xl-2', 'xxl-3']}
              >
                <h2 className={css.category__title}>{title}</h2>
                {description && (
                  <div className={`lead-2 ${css.category__description}`}>
                    {description}
                  </div>
                )}
              </MilaGridColumn>
            )}
            <MilaGridColumn
              columns={['sm-12', 'xl-10']}
              offset={['xl-1']}
              {...(elementsCount > 4
                ? { columns: ['sm-12', 'lg-10'], offset: ['lg-1'] }
                : {
                    columns: ['sm-12', 'lg-10', 'xl-8', 'xxl-6'],
                    offset: ['lg-1', 'xl-2', 'xxl-3'],
                  })}
              className={css.category__gridSpacer}
            >
              <div
                className={classnames(css.category__gridWrapper, {
                  [css.scrollShadowRight]:
                    showSlider && (shadow === 'right' || shadow === 'both'),
                  [css.scrollShadowLeft]:
                    showSlider && (shadow === 'left' || shadow === 'both'),
                })}
                ref={tabRef}
              >
                <SimpleBar
                  scrollableNodeProps={{ ref: scrollableNodeRef }}
                  onScroll={handleScroll}
                  autoHide={false}
                  clickOnTrack={false}
                  scrollbarMinSize={120}
                  scrollbarMaxSize={120}
                  // @ts-ignore
                  classNames={{
                    track: variant === 'normal' ? css.slider : css.hide,
                    scrollbar: css.thumb,
                  }}
                >
                  <div
                    className={classnames(css.category__grid, {
                      [css.category__gridAnim]:
                        (variant === 'normal' && showSlider) ||
                        (showSlider && selectedIndex === -1),
                    })}
                    ref={gridRef}
                    data-overflow={showSlider}
                    data-spacing={elementsCount > 4 ? 'evenly' : 'normal'}
                  >
                    {categories.map((item, index) => {
                      return (
                        <div
                          key={item.milaInternalId}
                          className={classnames(css.category__item, {
                            [css.category__itemHover]:
                              variant !== 'normal' || !showSlider,
                            [css.category__itemActive]:
                              index === tabIndex &&
                              (variant === 'banner' || variant === 'partner'),
                          })}
                          onClick={(): void => {
                            const selectedCategory = categories[index];
                            setCategory(selectedCategory);
                            if (selectedCategory.subcategories.length === 0) {
                              onSelectCategory(selectedCategory, 'all');
                            } else if (
                              selectedCategory.subcategories.length === 1
                            ) {
                              onSelectCategory(
                                selectedCategory,
                                selectedCategory.subcategories[0].slug,
                              );
                            } else {
                              openModal();
                            }
                          }}
                        >
                          <IconLoader
                            name={item.image ? item.image : 'mila-icon-audio'}
                            {...{
                              className: css.icon__svg,
                              fill:
                                variant === 'normal' || variant === 'partner'
                                  ? 'black'
                                  : 'white',
                            }}
                          />
                          {item.name}
                        </div>
                      );
                    })}
                  </div>
                </SimpleBar>
                {showSlider && (variant === 'banner' || variant === 'partner') && (
                  <div
                    className={classnames({
                      [css.slider__underlineDark]: variant === 'banner',
                      [css.slider__underline]: variant === 'partner',
                    })}
                  />
                )}
              </div>
            </MilaGridColumn>
          </MilaGridVoid>
        </Content>
      </div>
      <CategoryModal
        isOpen={modalIsOpen}
        handleSelect={(slug: string): void => {
          closeModal();
          onSelectCategory(category, slug);
        }}
        onRequestClose={closeModal}
        selectedCategory={category}
        Translations={Translations}
      />
    </>
  );
};

export default PackageCategoryTab;