import * as React from 'react';

import { Checkbox } from '@lightspeed/flame/Checkbox';
import { useFilteringActions } from './FilterContext';
import { DropdownDivider, DropdownContent } from './FilterDropdown';

type CheckboxType = {
  label: React.ReactNode;
  value: string;
};
interface Props {
  checkboxes: CheckboxType[];
  filterKey: string;
  children: (props: {
    applyFilter: (selectedValues: string | ((selectedValues: string[]) => string)) => void;
    undoChanges: () => void;
  }) => React.ReactNode;
}
const FilterCheckboxGroup: React.FC<Props> = ({ checkboxes, filterKey, children }) => {
  const { initialValues, applyFilter, deleteFilter } = useFilteringActions(filterKey);
  const [selectedValues, setSelectedValues] = React.useState(initialValues || []);

  function onChange(event: React.ChangeEvent<HTMLInputElement>) {
    const { value } = event.target;
    const valueIndex = selectedValues.indexOf(value);

    /* eslint-disable react/no-access-state-in-setstate */
    if (valueIndex >= 0) {
      setSelectedValues([
        ...selectedValues.slice(0, valueIndex),
        ...selectedValues.slice(valueIndex + 1),
      ]);
    } else {
      setSelectedValues([...selectedValues, value]);
    }
  }

  function nextApplyFilter(cb: string | ((selectedValues: any) => string)) {
    const nextTagLabel = (typeof cb === 'function' && cb(selectedValues)) || cb;

    if (selectedValues.length) {
      applyFilter(nextTagLabel as string, selectedValues);
    } else {
      deleteFilter();
    }
  }

  function undoChanges() {
    setSelectedValues([]);
  }

  return (
    <React.Fragment>
      {checkboxes.map(({ label, value }) => (
        <DropdownContent mb={2} key={value}>
          <Checkbox
            label={label as any}
            value={value}
            onChange={onChange}
            checked={selectedValues.indexOf(value) >= 0}
          />
        </DropdownContent>
      ))}

      <DropdownDivider />

      {children({ applyFilter: nextApplyFilter, undoChanges })}
    </React.Fragment>
  );
};

export { FilterCheckboxGroup };