import * as React from 'react';

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

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

  function onChange(event: React.ChangeEvent<HTMLInputElement>) {
    const { value } = event.target;
    setSelectedValues([value]);
  }

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

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

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

  return (
    <React.Fragment>
      {radios.map(({ label, value }) => (
        <DropdownContent mb={2} key={value}>
          <Radio
            label={label as any}
            value={value}
            onChange={onChange}
            checked={selectedValues.length && selectedValues[0] === value}
          />
        </DropdownContent>
      ))}

      <DropdownDivider />

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

export { FilterRadioGroup };