import React, {
  useReducer,
  createRef,
  Fragment,
  useCallback,
  ReactElement,
} from 'react';
import { Collapsible } from './Collapsible';
import classnames from 'classnames';

import './LeftNav.scss';

export interface Item {
  key: string;
  label: string;
  count?: number;
  isSelected?: boolean;
  isHeader?: boolean;
}

export interface State {
  searchText: string;
  collapsed: boolean;
}

export type Action =
  | { type: 'SetSearch'; searchValue: string }
  | { type: 'SetCollapsed'; collapsedValue: boolean };

export interface Props {
  name: string;
  onChange(key: string): void;
  onClear(): void;
  onSearch?(searchQuery: string): void;
  onToggleCollapsed?(isToggled: boolean): void;
  items: Item[];
  collapsible?: boolean;
  defaultCollapsed?: boolean;
  collapseOnOutsideClick?: boolean;
  compact?: boolean;
  multiSelect?: boolean;
  showSearch?: boolean;
  showClear?: boolean;
  disabled?: boolean;
}

export const Section: React.FC<Props> = ({
  name,
  onChange,
  onClear,
  onSearch = (): void => {},
  onToggleCollapsed = (): void => {},
  items,
  collapsible = false,
  defaultCollapsed = true,
  collapseOnOutsideClick = true,
  compact = false,
  multiSelect = false,
  showSearch = false,
  showClear = false,
  disabled = false,
}) => {
  const initialState: State = {
    searchText: '',
    collapsed: false,
  };

  const reducer = (state: State, action: Action): State => {
    switch (action.type) {
      case 'SetSearch':
        return { ...state, searchText: action.searchValue };
      case 'SetCollapsed':
        return { ...state, collapsed: action.collapsedValue };
    }
  };

  const [state, dispatch] = useReducer(reducer, initialState);

  const searchRef = createRef<HTMLInputElement>();

  const handleChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>): void => {
      dispatch({ type: 'SetSearch', searchValue: event.target.value });
      onSearch(event.target.value);
    },
    [onSearch],
  );

  const sectionDetails = (): ReactElement<HTMLDivElement> => (
    <div key={`leftnav-section-${name}`}>
      {showSearch && (
        <div className="leftnav-search-box">
          <i className="mo-display-icon-search_web" />
          <input
            ref={searchRef}
            type="text"
            placeholder={`Search for ${name.toLowerCase()}`}
            onChange={handleChange}
            value={state.searchText}
          />
        </div>
      )}

      <ul
        className={
          compact
            ? 'leftnav-section-results compact'
            : 'leftnav-section-results'
        }
      >
        {items
          .filter(item =>
            item.label.toLowerCase().includes(state.searchText.toLowerCase()),
          )
          .map((item, index: number) =>
            item.isHeader ? (
              <div key={index} className="leftnav-item-header">
                {item.label}
              </div>
            ) : (
              <li
                key={item.key}
                className={
                  item.isSelected && !multiSelect
                    ? 'leftnav-item selected'
                    : 'leftnav-item'
                }
                onClick={(): void => !disabled && onChange(item.key)}
              >
                {multiSelect && (
                  <Fragment>
                    <input
                      id={`leftnav-item-checkbox-${name}-${item.key}`}
                      className="leftnav-item-checkbox"
                      type="checkbox"
                      onChange={(): void => !disabled && onChange(item.key)}
                      onClick={(event): void => event.stopPropagation()}
                      checked={item.isSelected}
                    />
                    <label
                      className="leftnav-item-checkbox"
                      onClick={(event): void => event.stopPropagation()}
                      htmlFor={`leftnav-item-checkbox-${name}-${item.key}`}
                    ></label>
                  </Fragment>
                )}

                <span className="leftnav-item-label">{item.label}</span>

                {
                  <span className="leftnav-item-count">
                    {item.count >= 1000
                      ? item.count.toLocaleString()
                      : item.count}
                  </span>
                }
              </li>
            ),
          )}
      </ul>

      {showClear && items.some(item => item.isSelected) && (
        <div
          className="leftnav-section-clear"
          onClick={(): void => {
            if (!disabled) {
              dispatch({ type: 'SetSearch', searchValue: '' });
              searchRef.current.focus();
              onClear();
            }
          }}
        >
          Clear
        </div>
      )}
    </div>
  );

  return (
    <div
      className={classnames('leftnav-section', {
        disabled: disabled,
        compact: compact,
      })}
    >
      {collapsible ? (
        <Collapsible
          collapsed={defaultCollapsed}
          collapseOnOutsideClick={collapseOnOutsideClick}
          header={<div className="leftnav-section-header">{name}</div>}
          onToggle={onToggleCollapsed}
        >
          {sectionDetails()}
        </Collapsible>
      ) : (
        <div>
          <div className="leftnav-section-header">{name}</div>
          {sectionDetails()}
        </div>
      )}
    </div>
  );
};