import React, { useEffect, useRef, useReducer, useCallback } from 'react';
import ChevronRightIcon from '@moda/icons/chevron-right-16';
import ChevronLeftIcon from '@moda/icons/chevron-left-16';

import './Size.scss';
import { Inventory } from '../types/VariantTypes';

const numberOfCellsViewableAtATime = 2;

const sizes = (props: Partial<Props>): Array<JSX.Element> =>
  props.sizesArr.map((sizeObj: Inventory) => (
    <button
      key={sizeObj.size}
      onClick={(): void => props.onSetSize(sizeObj)}
      title={sizeObj.size}
      className={`SizeSlider__Item ${
        sizeObj.can_sell
          ? props.selectedSize && props.selectedSize.size == sizeObj.size
            ? 'SizeSlider__Item--selected'
            : ''
          : 'SizeSlider__Item--sold-out'
      }`}
    >
      {sizeObj.size}
    </button>
  ));

interface Props {
  sizesArr: Inventory[];
  selectedSize?: Inventory | null;
  initialSize?: Inventory | null;
  onSetSize(size: Inventory): void;
  expand?: boolean;
}

interface State {
  currentCell: number;
  maxCells: number;
}

type Action =
  | { type: 'SetCurrentCell'; payload: number }
  | { type: 'SetMaxCells'; payload: number };

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'SetCurrentCell':
      return {
        ...state,
        currentCell: action.payload,
      };
    case 'SetMaxCells':
      return { ...state, maxCells: action.payload };
  }
};

const initialState: State = {
  currentCell: 0,
  maxCells: 0,
};

export const Size: React.FC<Props> = ({
  sizesArr = [],
  selectedSize = null,
  onSetSize,
}) => {
  const tracksRef = useRef<HTMLDivElement>(null);
  const [state, dispatch] = useReducer(reducer, initialState);

  const setTrack = useCallback((cell: number) => {
    dispatch({
      type: 'SetCurrentCell',
      payload: cell,
    });
  }, []);

  const handlePrev = useCallback(() => {
    state.currentCell >= numberOfCellsViewableAtATime
      ? setTrack(state.currentCell - numberOfCellsViewableAtATime)
      : setTrack(0);
  }, [setTrack, state.currentCell]);

  const handleNext = useCallback(() => {
    state.maxCells - (state.currentCell + numberOfCellsViewableAtATime - 1) >
    numberOfCellsViewableAtATime
      ? setTrack(state.currentCell + numberOfCellsViewableAtATime)
      : setTrack(state.maxCells - numberOfCellsViewableAtATime);
  }, [setTrack, state.currentCell, state.maxCells]);

  useEffect(() => {
    if (tracksRef.current) {
      dispatch({
        type: 'SetMaxCells',
        payload: tracksRef.current.childNodes.length,
      });
    }
  }, [tracksRef]);

  return (
    <div className="SizeSlider">
      {state.maxCells > 0 && (
        <button
          className="SizeSlider__Arrow"
          disabled={state.currentCell === 0}
          onClick={handlePrev}
        >
          <ChevronLeftIcon />
        </button>
      )}
      <div className="SizeSlider__Viewer">
        <div
          ref={tracksRef}
          className="SizeSlider__Rail"
          style={{
            transform: `translateX(-${state.currentCell * 50}%)`,
          }}
        >
          {sizes({
            sizesArr,
            selectedSize,
            onSetSize,
          }).map((size: JSX.Element, index: number) => (
            <div key={index} className="SizeSlider__Cell">
              {size}
            </div>
          ))}
        </div>
      </div>
      {state.maxCells > 0 && (
        <button
          className="SizeSlider__Arrow"
          disabled={
            state.currentCell >= state.maxCells - numberOfCellsViewableAtATime
          }
          onClick={handleNext}
        >
          <ChevronRightIcon />
        </button>
      )}
    </div>
  );
};