/**
 * External dependencies
 */
import type { Meta, StoryFn } from '@storybook/react-vite';

/**
 * Internal dependencies
 */
import { Flex, FlexItem, FlexBlock } from '../';
import { View } from '../../view';

const meta: Meta< typeof Flex > = {
	component: Flex,
	title: 'Components/Flex',
	subcomponents: { FlexBlock, FlexItem },
	argTypes: {
		align: { control: { type: 'text' } },
		as: { control: { type: 'text' } },
		children: { control: false },
		gap: { control: { type: 'text' } },
		justify: { control: { type: 'text' } },
		// Disabled isReversed because it's deprecated.
		isReversed: {
			table: {
				disable: true,
			},
		},
	},
	parameters: {
		controls: {
			expanded: true,
		},
		docs: { canvas: { sourceState: 'shown' } },
		componentStatus: {
			status: 'not-recommended',
			whereUsed: 'global',
			notes: 'Planned for deprecation. For use cases not covered by `Stack` from `@wordpress/ui`, write your own CSS.',
		},
	},
};
export default meta;

const GrayBox = ( { children }: { children: string } ) => (
	<View style={ { backgroundColor: '#eee', padding: 10 } }>{ children }</View>
);

export const Default: StoryFn< typeof Flex > = ( { ...args } ) => {
	return (
		<Flex { ...args }>
			<FlexItem>
				<GrayBox>Item 1</GrayBox>
			</FlexItem>
			<FlexItem>
				<GrayBox>Item 2</GrayBox>
			</FlexItem>
			<FlexItem>
				<GrayBox>Item 3</GrayBox>
			</FlexItem>
		</Flex>
	);
};
Default.args = {};

export const ResponsiveDirection: StoryFn< typeof Flex > = ( { ...args } ) => {
	return (
		<Flex { ...args }>
			<FlexItem>
				<GrayBox>Item 1</GrayBox>
			</FlexItem>
			<FlexBlock>
				<GrayBox>Item 2</GrayBox>
			</FlexBlock>
			<FlexItem>
				<GrayBox>Item 3</GrayBox>
			</FlexItem>
			<FlexItem>
				<GrayBox>Item 4</GrayBox>
			</FlexItem>
		</Flex>
	);
};
ResponsiveDirection.args = {
	direction: [ 'column', 'row' ],
};