import classNames from "classnames";
import React from "react";
import { FilterButtonProps } from "./FilterableTypes";
import { Select } from "../../../select";
import { useConfig } from "../../../_util/config-context";

export function SingleFilterButton({
  all,
  className,
  style,
  children,
  options,
  value,
  ...selectProps
}: FilterButtonProps<string>) {
  const { classPrefix } = useConfig();
  let active = Boolean(value);
  if (all) {
    options = [all, ...options]; // eslint-disable-line no-param-reassign
    active = value !== all.value;
  }
  return (
    <span
      className={classNames(
        `${classPrefix}-table__filterbtn`,
        { "is-active": active },
        className
      )}
      style={style}
    >
      <Select
        {...selectProps}
        type="simulate"
        appearance="filter"
        button={children}
        options={options.map(({ label, text, ...option }) => ({
          ...option,
          text: text || label,
        }))}
        value={value}
      />
    </span>
  );
}