Identity Block

import { Meta, StoryObj } from '@storybook/react-vite';

import { IdentityBlock, IdentityBlockProps } from './IdentityBlock';

// Storybook controls for the Agent Avatar, passed to `avatarProps`. Controls
// can't edit a nested object field by field, so they are flat args here.
type IdentityBlockArgs = IdentityBlockProps & {
	avatarHasHalo?: boolean;
	avatarIconName?: 'sparklesSolid' | 'zappy';
	avatarLabel?: string;
	avatarShape?: 'circle' | 'square';
};

const meta: Meta<IdentityBlockArgs> = {
	title: 'Proposals/Identity/Identity Block',
	component: IdentityBlock,
	parameters: {
		docs: {
			description: {
				component:
					'Proposal, based on the PDS Identity Block, with the Agent Avatar in place of the human Avatar. An agent avatar alongside primary and secondary text.',
			},
		},
	},
	argTypes: {
		avatarHasHalo: { control: 'boolean', table: { category: 'Avatar' } },
		avatarIconName: {
			control: 'select',
			options: ['zappy', 'sparklesSolid'],
			table: { category: 'Avatar' },
		},
		avatarLabel: { control: 'text', table: { category: 'Avatar' } },
		avatarProps: { control: false, table: { category: 'Content' } },
		avatarShape: {
			control: 'select',
			options: ['circle', 'square'],
			table: { category: 'Avatar' },
		},
		className: { table: { category: 'Base attributes' } },
		isSidebarCollapsed: { table: { category: 'State' } },
		isSingleLine: { table: { category: 'Component configuration' } },
		primaryText: { table: { category: 'Content' } },
		secondaryText: { table: { category: 'Content' } },
	},
	args: {
		avatarHasHalo: true,
		avatarIconName: 'zappy',
		avatarLabel: 'Agent',
		avatarShape: 'circle',
		isSidebarCollapsed: false,
		primaryText: 'Zappy',
		secondaryText: 'Pantheon AI',
	},
	render: ({
		avatarHasHalo,
		avatarIconName,
		avatarLabel,
		avatarShape,
		...args
	}) => (
		<IdentityBlock
			{...args}
			avatarProps={{
				hasHalo: avatarHasHalo,
				iconName: avatarIconName,
				label: avatarLabel ?? '',
				shape: avatarShape,
			}}
		/>
	),
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};

export const SingleLine: Story = {
	name: 'Single Line',
	parameters: {
		docs: {
			description: {
				story:
					'Omit the secondary text for a smaller avatar with one line, for an agent with no attribution or where vertical space is tight.',
			},
		},
	},
	args: {
		isSingleLine: true,
		primaryText: 'Zappy',
		secondaryText: undefined,
	},
};

export const Collapsed: Story = {
	parameters: {
		docs: {
			description: {
				story:
					'`isSidebarCollapsed` hides the text and leaves the avatar, with a tooltip carrying both lines.',
			},
		},
	},
	args: { isSidebarCollapsed: true },
};