import { Box, IconButton } from '@rocket.chat/fuselage';
import { UserAvatar } from '@rocket.chat/ui-avatar';
import type { Meta, StoryFn } from '@storybook/react';
import { action } from 'storybook/actions';

import Medium from './Medium';
import * as Status from '../../components/UserStatus';

export default {
	component: Medium,
	args: {
		title: 'John Doe',
	},
	decorators: [
		(fn) => (
			<Box maxWidth='x300' backgroundColor='dark' borderRadius='x4'>
				{fn()}
			</Box>
		),
	],
} satisfies Meta<typeof Medium>;

const Template: StoryFn<typeof Medium> = (args) => (
	<Medium
		{...args}
		titleIcon={
			<Box marginInline={4}>
				<Status.Online />
			</Box>
		}
		avatar={<UserAvatar username='john.doe' size='x16' url='https://via.placeholder.com/16' />}
	/>
);

export const Normal = {
	render: Template,
};

export const Selected = {
	render: Template,

	args: {
		selected: true,
	},
};

export const Menu = {
	render: Template,

	args: {
		menuOptions: {
			hide: {
				label: { label: 'Hide', icon: 'eye-off' },
				action: action('action'),
			},
			read: {
				label: { label: 'Mark_read', icon: 'flag' },
				action: action('action'),
			},
			favorite: {
				label: { label: 'Favorite', icon: 'star' },
				action: action('action'),
			},
		},
	},
};

export const Actions = {
	render: Template,

	args: {
		actions: (
			<>
				<IconButton secondary success icon='phone' />
				<IconButton secondary danger icon='circle-cross' />
				<IconButton secondary info icon='trash' />
				<IconButton secondary icon='phone' />
			</>
		),
	},
};