import React from 'react';
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryObj } from '@storybook/react';
import InputSearch from './InputSearch';

/** The `InputSearch` component creates a search field inside an HTML container. */

const meta: Meta<typeof InputSearch> = {
	title: 'Inputs/InputSearch',
	component: InputSearch,
	parameters: {
		a11yTarget: 'containerLabel',
		controls: {
			include: [
				'aria-label',
				'containerLabel',
				'id',
				'onChange',
				'placeholder',
				'className',
				'containerClassName',
				'value',
			],
		},
	},
	render: function Render(args) {
		const [{ onChange }, updateArgs] = useArgs<typeof args>();

		const handleChange = (event: HTMLElementEvent<HTMLInputElement>) => {
			updateArgs({ value: event.target.value });
			onChange?.(event);
		};

		return <InputSearch {...args} onChange={handleChange} />;
	},
};

export default meta;
type Story = StoryObj<typeof InputSearch>;

export const SearchField: Story = {
	args: {
		'aria-label': 'Input label',
		containerLabel: 'Container label',
		id: 'input-search',
		placeholder: 'Type here ...',
	},
};