import React, { useEffect, Fragment } from 'react';
import { Collapsible } from './Collapsible';
import classnames from 'classnames';
import './SelectDropdown.scss';

interface OptionObject {
  label: string;
  value: string;
  disabled?: boolean;
}

interface Props {
  state?: any;
  key_?: number;
  label?: string;
  width?: string;
  setState?: any;
  disabled?: boolean;
  className?: string;
  defaultOption?: string;
  inputToInitialize?: any;
  showInnerLabel?: boolean;
  showOuterLabel?: boolean;
  setInputToInitialize?: any;
  options?: (string | OptionObject)[];
  onChange?: (value: string) => object;
}

export const SelectDropdown: React.FC<Props> = ({
  key_,
  label,
  options,
  setState,
  state = {},
  className = '',
  width = '120px',
  disabled = false,
  inputToInitialize,
  onChange = () => {},
  setInputToInitialize,
  showInnerLabel = false,
  showOuterLabel = false,
  // @ts-ignore TS2339 // property 'value' does not exist on type string
  defaultOption = options[0].value || options[0],
}) => {
  const newState: any = Object.assign({}, state);
  const value: any = state['value'];
  const optionsType = () => {
    if (options.every(o => typeof o === 'string')) {
      return 'strings';
    } else if (options.every(o => typeof o === 'object')) {
      return 'objects';
    }
  };

  const handleClick = (value: string) => {
    newState.value = value;
    setState(newState);
    onChange(value);
  };

  useEffect(() => {
    if (inputToInitialize === key_) {
      newState.name = label;
      newState.value = defaultOption;
      setState(newState);
      setInputToInitialize(key_ + 1);
    }
    return;
  }, [inputToInitialize]);

  const innerLabel = (): string => {
    const displayValue = ((): string => {
      switch (optionsType()) {
        case 'strings':
          return value;
        case 'objects':
          const option = options.find((o: OptionObject) => o.value === value);
          // @ts-ignore TS2339 // property 'label' does not exist on type string
          return option ? option.label : '';
      }
    })();

    return showInnerLabel ? `${label}: ${displayValue}` : displayValue;
  };

  const outerLabel = showOuterLabel && (
    <div className="mo-display-input__select-dropdown-label">{label}</div>
  );

  const renderOptions = (): JSX.Element[] => {
    console.log(value);
    switch (optionsType()) {
      case 'strings':
        return options
          .filter((o: string) => o !== value)
          .map((option: string) => (
            <div
              key={option}
              onClick={(): void => handleClick(option)}
              className="mo-display-input__option"
            >
              {option}
            </div>
          ));
      case 'objects':
        return options
          .filter((o: OptionObject) => o.value !== value)
          .map((option: OptionObject) => (
            <div
              key={option.value}
              onClick={(): void =>
                !option.disabled && handleClick(option.value)
              }
              className={classnames('mo-display-input__option', {
                'mo-display-input__option--disabled': option.disabled,
              })}
            >
              {option.label}
            </div>
          ));
    }
  };

  return (
    <Fragment>
      {outerLabel}
      <div
        className={classnames('mo-display-input__select-dropdown', className, {
          'mo-display-input__select-dropdown--disabled': disabled,
        })}
        style={{ ['--width' as string]: width, zIndex: 100 - key_ }}
      >
        <Collapsible
          header={innerLabel()}
          disabled={disabled}
          collapseOnChildClick={true}
        >
          {renderOptions()}
        </Collapsible>
      </div>
    </Fragment>
  );
};