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

export function MultipleFilterButton({
  all,
  className,
  style,
  children,
  options,
  value,
  ...selectProps
}: FilterButtonProps<string[]>) {
  const { classPrefix } = useConfig();
  const active = Boolean(value && value.length > 0);
  return (
    <span
      className={classNames(
        `${classPrefix}-table__filterbtn`,
        { "is-active": active },
        className
      )}
      style={style}
    >
      <SelectMultiple
        {...selectProps}
        appearance="filter"
        button={children}
        style={style}
        options={options.map(option => ({
          ...option,
          text: option.text || option.label,
        }))}
        allOption={all ? { ...all, text: all.text || all.label } : false}
        value={value}
      />
    </span>
  );
}