import type { Meta, StoryObj } from '@storybook/svelte';
import UpObject from '../lib/components/display/UpObject.svelte';
import { videoAddress } from './common';
import NarrowDecorator from './NarrowDecorator.svelte';

const address = videoAddress;

const meta: Meta<UpObject> = {
	title: 'Display/UpObject',
	component: UpObject,
	tags: ['autodocs'],
	args: {
		address
	},
	argTypes: {
		address: {
			defaultValue: address,
			name: 'Address',
			type: 'string'
		},
		onResolved: {
			action: 'resolved'
		}
	}
};

export default meta;
type Story = StoryObj<UpObject>;

// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
export const Default: Story = {};

export const WithLabels: Story = {
	args: {
		labels: ['Label 1', 'Label B', 'Label III']
	}
};

export const Link: Story = {
	args: {
		link: true
	}
};

export const Keyed: Story = {
	args: {
		address: 'zb2rhmpmTFPxdhaxTQg5Ug3KHFU8DZNUPh8TaPY2v8UQVJbQk'
	}
};

export const Banner: Story = {
	args: {
		banner: true
	}
};

export const BannerWithLabels: Story = {
	args: {
		banner: true,
		labels: ['Label 1', 'Label B', 'Label III']
	}
};

export const KeyedBanner: Story = {
	args: {
		address: 'zb2rhmpmTFPxdhaxTQg5Ug3KHFU8DZNUPh8TaPY2v8UQVJbQk',
		banner: true
	}
};

export const Overflow: Story = {
	args: {
		labels: ['qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm'.repeat(3)]
	},
	decorators: [() => NarrowDecorator as any]
};