import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { action } from 'storybook/actions';
import './Checkbox.svelte';
import '../link/Link.svelte';
const meta = {
    title: 'Form Elements/Checkbox',
    component: 'm-checkbox',
    args: {
        label: 'Label',
        id: 'checkboxId',
    },
    render: (args) => {
        const onChange = action('change');
        const onFocus = action('focus');
        const onBlur = action('blur');
        return html `
      <m-checkbox
        id=${ifDefined(args.id)}
        name=${ifDefined(args.name)}
        label=${ifDefined(args.label)}
        ?checked=${args.checked}
        ?indeterminate=${args.indeterminate}
        ?isinvalid=${args.isinvalid}
        ?disabled=${args.disabled}
        ?indented=${args.indented}
        @change=${(event) => {
            onChange(event);
        }}
        @focus=${(event) => {
            onFocus(event);
        }}
        @blur=${(event) => {
            onBlur(event);
        }}
      ></m-checkbox>
    `;
    },
};
export default meta;
export const Default = {};
export const Checked = {
    args: {
        checked: true,
        id: 'checkedId',
    },
};
export const Indeterminate = {
    args: {
        indeterminate: true,
        id: 'IndeterminateId',
    },
};
export const Disabled = {
    args: {
        disabled: true,
        id: 'disabledId',
    },
};
export const Invalid = {
    args: {
        isinvalid: true,
        id: 'invalidId',
    },
};
export const IndeterminateDisabled = {
    args: {
        indeterminate: true,
        disabled: true,
        id: 'checkedIndeterminateId',
    },
};
export const CheckedDisabled = {
    args: {
        checked: true,
        disabled: true,
        id: 'checkedDisabledId',
    },
};
export const Link = {
    args: {
        id: 'IdForTheLabel',
        label: undefined,
    },
    render: (args) => {
        const onChange = action('change');
        const onFocus = action('focus');
        const onBlur = action('blur');
        return html `
      <div style="display: flex; align-items: center; gap: 0.5rem;">
        <m-checkbox
          id=${ifDefined(args.id)}
          name=${ifDefined(args.name)}
          label=${ifDefined(args.label)}
          ?checked=${args.checked}
          ?indeterminate=${args.indeterminate}
          ?isinvalid=${args.isinvalid}
          ?disabled=${args.disabled}
          ?indented=${args.indented}
          @change=${(event) => {
            onChange(event);
        }}
          @focus=${(event) => {
            onFocus(event);
        }}
          @blur=${(event) => {
            onBlur(event);
        }}
        ></m-checkbox>
        <label for="IdForTheLabel">I acknowledge the</label>
        <m-link href="#" inline size="m">terms and conditions</m-link>
      </div>
    `;
    },
};
