import generalDocs from '~forestry/4 - Components/Basic Controls/button.mdx';
import primaryDocs from '~forestry/4 - Components/Basic Controls/button-primary.mdx';
import primaryDarkDocs from '~forestry/4 - Components/Basic Controls/primary-button-dark-background.mdx';
import secondaryDocs from '~forestry/4 - Components/Basic Controls/button-secondary.mdx';
import secondaryDarkDocs from '~forestry/4 - Components/Basic Controls/button-transparent.mdx';

export default {
	title: '4 - Components/Basic Controls/Button',
	parameters: {
		componentName: 'sr-button'
	}
};

export const General = () => '';
export const PrimaryButtonDefault = () => '';
export const PrimaryButtonDarkBackground = () => '';
export const SecondaryButtonDefault = () => '';
export const SecondaryButtonDarkBackground = () => '';
export const OtherOptions = () => '';

General.parameters = {
	hideStory: true,
	docs: {
		page: generalDocs
	}
};

PrimaryButtonDefault.storyName = 'Primary Button (default)';
PrimaryButtonDefault.parameters = {
	docs: {
		page: primaryDocs
	},
	variations: [
		{
			title: 'Default',
			src: `<sr-button>Button</sr-button>`
		},
		{
			title: 'Small',
			src: `<sr-button size="small">Button</sr-button>`
		},
		{
			title: 'Disabled',
			src: `<sr-button disabled>Button</sr-button>`
		},
		{
			title: 'As Link',
			src: `<sr-button href="https://google.com">I’m a link</sr-button>`
		},
		{
			title: 'Icon Before Content',
			src: `<sr-button icon-before="bin">Delete</sr-button>`
		},
		{
			title: 'Icon After Content',
			src: `<sr-button icon-after="bin">Delete</sr-button>`
		}
	]
};

PrimaryButtonDarkBackground.storyName = 'Primary Button (on dark)';
PrimaryButtonDarkBackground.parameters = {
	backgrounds: {
		default: 'dark',
		values: [{ name: 'dark', value: '#282828' }]
	},
	docs: {
		page: primaryDarkDocs
	},
	variations: [
		{
			title: 'Default',
			src: `<sr-button color="primary-dark">Button</sr-button>`
		},
		{
			title: 'Small',
			src: `<sr-button color="primary-dark" size="small">Button</sr-button>`
		},
		{
			title: 'Disabled',
			src: `<sr-button color="primary-dark" disabled>Button</sr-button>`
		},
		{
			title: 'As Link',
			src: `<sr-button color="primary-dark" href="https://google.com">I’m a link</sr-button>`
		},
		{
			title: 'Icon Before Content',
			src: `<sr-button color="primary-dark" icon-before="bin">Delete</sr-button>`
		},
		{
			title: 'Icon After Content',
			src: `<sr-button color="primary-dark" icon-after="bin">Delete</sr-button>`
		}
	]
};

SecondaryButtonDefault.storyName = 'Secondary Button (default)';
SecondaryButtonDefault.parameters = {
	docs: {
		page: secondaryDocs
	},
	variations: [
		{
			title: 'Default',
			src: `<sr-button color="secondary">Button</sr-button>`
		},
		{
			title: 'Small',
			src: `<sr-button color="secondary" size="small">Button</sr-button>`
		},
		{
			title: 'Disabled',
			src: `<sr-button color="secondary" disabled>Button</sr-button>`
		},
		{
			title: 'As Link',
			src: `<sr-button color="secondary" href="https://google.com">I’m a link</sr-button>`
		},
		{
			title: 'Icon Before Content',
			src: `<sr-button color="secondary" icon-before="bin">Delete</sr-button>`
		},
		{
			title: 'Icon After Content',
			src: `<sr-button color="secondary" icon-after="bin">Delete</sr-button>`
		}
	]
};

SecondaryButtonDarkBackground.storyName = 'Secondary Button (on dark)';
SecondaryButtonDarkBackground.parameters = {
	backgrounds: {
		default: 'dark',
		values: [{ name: 'dark', value: '#282828' }]
	},
	docs: {
		page: secondaryDarkDocs
	},
	variations: [
		{
			title: 'Default',
			src: `<sr-button color="secondary-dark">Button</sr-button>`
		},
		{
			title: 'Small',
			src: `<sr-button color="secondary-dark" size="small">Button</sr-button>`
		},
		{
			title: 'Disabled',
			src: `<sr-button color="secondary-dark" disabled>Button</sr-button>`
		},
		{
			title: 'As Link',
			src: `<sr-button color="secondary-dark" href="https://google.com">I’m a link</sr-button>`
		},
		{
			title: 'Icon Before Content',
			src: `<sr-button color="secondary-dark" icon-before="bin">Delete</sr-button>`
		},
		{
			title: 'Icon After Content',
			src: `<sr-button color="secondary-dark" icon-after="bin">Delete</sr-button>`
		}
	]
};

OtherOptions.parameters = {
	docs: false,
	variations: [
		{
			title: 'With A11Y-Text',
			src: `	<sr-button>
						Load
						<span class="visuallyhidden">more entries</span>
					</sr-button>`
		},
		{
			title: 'Regular display is inline-block',
			src: `	<sr-button>Button</sr-button>
					<sr-button>Button</sr-button>`
		},
		{
			title: 'Display as block (can a lso be done with CSS)',
			src: `	<sr-button block class="sr-gap-bottom">Button</sr-button>
					<sr-button block>Button</sr-button>`
		},
		{
			title: 'Full Width',
			src: `<sr-button full-width>Full width button</sr-button>`
		}
	]
};
