import { useFormik } from "formik";
import { FC } from "react";

export interface FilterValues {
	useOnlyEmptyAssetId: boolean;
}

interface Props {
	onChange: (values: FilterValues) => void;
	isLoading: boolean;
}

export const Filter: FC<Props> = ({ onChange, isLoading }) => {
	const { values, handleChange, handleSubmit } = useFormik({
		onSubmit: (values) => {
			onChange(values);
		},
		initialValues: {
			useOnlyEmptyAssetId: false,
		},
	});

	return (
		<form
			className="d-flex gap-3 align-items-center"
			onSubmit={handleSubmit}
		>
			<div className="form-group d-flex gap-1">
				<input
					id="useOnlyEmptyAssetId"
					name="useOnlyEmptyAssetId"
					type="checkbox"
					onChange={handleChange}
					checked={values.useOnlyEmptyAssetId}
				/>
				<label htmlFor="useOnlyEmptyAssetId">
					Использовать только пустые ИД
				</label>
			</div>

			<div>
				<button
					type="submit"
					className="btn btn-primary"
					disabled={isLoading}
				>
					Применить
					{isLoading && (
						<span className="spinner-border spinner-border-sm"></span>
					)}
				</button>
			</div>
		</form>
	);
};
