import React, { useState, useMemo, useCallback } from "react";
import _ from "lodash";

interface IFilterOptionProps {
  checked: boolean;
  text: string;
  onChange: (checked: boolean) => void;
  ["data-testid"]?: string;
}

const FilterOption = (props: IFilterOptionProps) => {
  const [checked, setChecked] = useState(props.checked);
  const id = useMemo(() => _.uniqueId("filter-option-"), []);
  const onChange = useCallback(() => {
    setChecked(!checked);
    props.onChange(!checked);
  }, [checked]);

  const testId = props["data-testid"] || `honeyui-filter-option-${id}`;

  return (
    <div className="custom-control custom-checkbox my-1" data-testid={testId}>
      <input
        type="checkbox"
        className="custom-control-input"
        id={id}
        onChange={onChange}
        checked={checked}
        data-testid={`${testId}-checkbox`}
      />
      <label className="custom-control-label" htmlFor={id}>
        {props.text}
      </label>
    </div>
  );
};

FilterOption.displayName = "FilterOption";
FilterOption.defaultProps = {};
export default FilterOption;