Agent Step

import { ReactNode } from 'react';

import { FlexContainer } from '@pantheon-systems/pds-toolkit-react';
import { Meta, StoryObj } from '@storybook/react-vite';

import { AgentStep } from './AgentStep';

const meta: Meta<typeof AgentStep> = {
	tags: ['new-pattern'],
	title: 'Proposals/Agent Step',
	component: AgentStep,
	parameters: {
		docs: {
			description: {
				component:
					'**New pattern:** not in PDS v2 today. One thing an agent did or is doing: a status icon, a label, quiet secondary text and optional expandable detail. Use it alone inline or inside Chain of Thought.',
			},
		},
	},
	argTypes: {
		className: { table: { category: 'Base attributes' } },
		detail: { control: 'text', table: { category: 'Content' } },
		iconName: {
			control: 'select',
			options: [undefined, 'wrench', 'zappy', 'sparklesSolid', 'check'],
			table: { category: 'Content' },
		},
		label: { control: 'text', table: { category: 'Content' } },
		secondaryText: { control: 'text', table: { category: 'Content' } },
		status: {
			control: 'select',
			options: [undefined, 'pending', 'active', 'done', 'error'],
			table: { category: 'State' },
		},
	},
	args: {
		label: 'Read the page',
		secondaryText: 'home',
		status: 'done',
	},
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};

const STATUS_ROWS: { name: string; step: ReactNode }[] = [
	{
		name: 'Pending',
		step: <AgentStep label='Saved changes' status='pending' />,
	},
	{
		name: 'Active',
		step: <AgentStep label='Reserved the page for editing' status='active' />,
	},
	{
		name: 'Done',
		step: <AgentStep label='Confirmed edit permission' status='done' />,
	},
	{
		name: 'Error',
		step: (
			<AgentStep
				label="Couldn't save changes"
				secondaryText='Permission denied'
				status='error'
			/>
		),
	},
	{
		name: 'No status',
		step: <AgentStep label='Read the page' secondaryText='home' />,
	},
	{
		name: 'Done, with detail',
		step: (
			<AgentStep
				detail='Updated the heading, two paragraphs and two links.'
				label='Applied changes'
				secondaryText='5 edits'
				status='done'
			/>
		),
	},
];

export const AllStatuses: Story = {
	parameters: {
		docs: {
			description: {
				story:
					'Each status, labeled. `done` with `detail` expands to show more.',
			},
		},
	},
	render: () => (
		<FlexContainer flexDirection='column' gap='m'>
			{STATUS_ROWS.map(({ name, step }) => (
				<FlexContainer alignItems='center' gap='m' key={name}>
					<span style={{ width: '10rem' }}>{name}</span>
					{step}
				</FlexContainer>
			))}
		</FlexContainer>
	),
};