import * as React from 'react';

import { Selector, Header, Wrapper } from './FastSelection.styled';

interface IProps {
  onChange: (event?: any) => any;
  children?: React.ReactNode;
  header?: string;
  items: [{
    value?: string;
    label?: string;
    disabled?: boolean;
    id?: any;
  }];
  loading?: boolean;
  single?: boolean;
  selecteds: [{
    value?: string;
  }];
}

interface IState {
  isActive?: boolean|number;
  actives?: any;
  isSingle?: (number?: any) => void;
  activeIndex?: number|null;
}

export default class FastSelection extends React.PureComponent<IProps, IState> {
  state = {
    isActive: false,
    actives: [],
    isSingle: () => false,
    activeIndex: null,
  };

  onItemsClick = async ({ target }: { target: any }, index: number) => {
    const { value } = target;
    const { actives } = this.state;
    const { onChange, single, items } = this.props;
    const activeIndex = `isActive${index}`;

    // @ts-ignore
    if (!actives.includes(value)) {
      await this.setState(prevState => ({ actives: [...prevState.actives, value]}));
    } else {
      await this.setState(prevState => ({ actives: [...prevState.actives.filter((item: string) => item !== value)]}));
    }

    if (single) {
      await this.setState({ activeIndex: index });
      onChange(items.filter((item, ind) => ind === index));
      return;
    }

    onChange(this.state.actives);
    await this.setState((prevState: any) => ({ [activeIndex]: !prevState[activeIndex] }));
  }

  render () {
    const { items, header, single, selecteds, loading } = this.props;
    const { activeIndex } = this.state;
    const selectedsValues = selecteds.length > 0 ? selecteds : [{ value: '' }];

    return (
      <React.Fragment>
        { header && <Header>{header}</Header> }
        <Wrapper>
          { items && items.map((item, index) => (
              <Selector
                {...item}
                onClick={(e) => this.onItemsClick(e, index)}
                disabled={item.disabled || loading}
                isActive={
                  // @ts-ignore
                  this.state[`isActive${index}`] ||
                  (single && (activeIndex === index) || selectedsValues[0].value === item.value) ||
                  // @ts-ignore
                  (selectedsValues.some((selected: any) => (selected.value === item.value || selected === item.value)))
                }
                key={item.id || Math.random()}
              >
                {item.label}
              </Selector>
            ))
          }
        </Wrapper>
      </React.Fragment>
    );
  }
}