import { spread } from '@open-wc/lit-helpers';
import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
import { html } from 'lit';
import { prespread } from '../../.storybook/utilities.js';
import './index.js';
const { events, args, argTypes } = getStorybookHelpers('w-button');
import '@warp-ds/icons/elements/close-16';
import '@warp-ds/icons/elements/heart-16';
import '@warp-ds/icons/elements/chevron-right-16';
import '@warp-ds/icons/elements/chevron-left-16';
const meta = {
    title: 'Buttons/Button',
    render(args) {
        return html `<w-button ${spread(prespread(args))}>Button Text</w-button>`;
    },
    args,
    argTypes,
    parameters: {
        actions: {
            handles: events,
        },
    },
};
export default meta;
export const Primary = {
    args: {
        variant: 'primary',
        type: 'button',
    },
};
export const Secondary = {
    args: {
        variant: 'secondary',
        type: 'button',
    },
};
export const Negative = {
    args: {
        variant: 'negative',
        type: 'button',
    },
};
export const Utility = {
    args: {
        variant: 'utility',
        type: 'button',
    },
};
export const Link = {
    args: {
        variant: 'link',
        type: 'button',
        href: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_components',
        target: '_new',
    },
};
export const Pill = {
    args: {
        variant: 'pill',
        type: 'button',
    },
    render(args) {
        return html `<w-button ${spread(prespread(args))}>
        <w-icon-chevron-left-16 style="height: 16px;"></w-icon-chevron-left-16>
      </w-button>
      <w-button ${spread(prespread(args))}>
        <w-icon-close-16 style="height: 16px;"></w-icon-close-16>
      </w-button>
      <w-button ${spread(prespread(args))}>
        <w-icon-heart-16 style="height: 16px;"></w-icon-heart-16>
      </w-button>
      <w-button ${spread(prespread(args))}>
        <w-icon-chevron-right-16
          style="height: 16px;"
        ></w-icon-chevron-right-16>
      </w-button>
      <br />
      <w-button ${spread(prespread(args))} small="">
        <w-icon-chevron-left-16 style="height: 16px;"></w-icon-chevron-left-16>
      </w-button>
      <w-button ${spread(prespread(args))} small="">
        <w-icon-close-16 style="height: 16px;"></w-icon-close-16>
      </w-button>
      <w-button ${spread(prespread(args))} small="">
        <w-icon-heart-16 style="height: 16px;"></w-icon-heart-16>
      </w-button>
      <w-button ${spread(prespread(args))} small="">
        <w-icon-chevron-right-16
          style="height: 16px;"
        ></w-icon-chevron-right-16>
      </w-button>`;
    },
};
export const Small = {
    args: {
        variant: 'primary',
        small: true,
        type: 'button',
    },
};
export const Quiet = {
    args: {
        variant: 'secondary',
        quiet: true,
        type: 'button',
    },
};
export const Loading = {
    args: {
        variant: 'primary',
        loading: true,
        type: 'button',
    },
};
export const FullWidth = {
    args: {
        variant: 'primary',
        'full-width': true,
        type: 'button',
    },
    render(args) {
        return html `
      <div class="w-full flex flex-col gap-8">
        <w-button ${spread(prespread(args))}>Full width</w-button>
      </div>
    `;
    },
};
export const AsLink = {
    args: {
        variant: 'primary',
        href: 'https://example.com',
        target: '_blank',
        type: 'button',
    },
    render(args) {
        return html `<w-button ${spread(prespread(args))}>Visit Example</w-button>`;
    },
};
export const FormControl = {
    args: {},
    render() {
        return html `
      <form name="form-control">
        <input type="text" value="I am an input field" name="demoValue" style="border: 1px solid lime" />
        <w-button type="reset" name="resetButton" value="fooyoo">Reset</w-button>
        <w-button type="submit" name="submuitButtton" value="fooyoo">Send thing</w-button>
      </form>
    `;
    },
};
