import type { Story } from '@kivra/toybox';
import { Button } from './Button';

export const story: Story = {
  header: {
    // Title of story
    title: 'Button',
    // Three different types of buttons are available, github, figma or designsystem.
    // Url for github type is optional, we will try to generate a url based on the component name. You could also give it a value if you prefer.
    // Figma url is a link to the design of the component.
    // designsystem is our documentation helper that gives developers more detailed documentation of the component.
    storyButtons: [
      { type: 'github' },
      {
        type: 'figma',
        url: 'https://www.figma.com/file/cqWQxzXlhuLc5SRXemxy4F/Kivra-Style-Guide?node-id=20746%3A39897',
      },
      {
        type: 'designsystem'
        url: 'https://design.kivra.com/07ebba6a7/p/91f64e-intro',
      },
    ],
    // Description of the component
    description:
      'Buttons communicate actions that users can take. Button labels express what action will occur when the user interacts with it.',
  },
  stories: [
    {
      name: 'How to use the Button component', // The name of this story
      center: true, // Should the component be in center or not
      /**
       * The code template will show how to use the component.
       * `props` is a string representation of all stings in a single line.
       * If you wnat to show the props on multi lines you can use `props.asMultiline(indentSpace)` instead.
       */
      codeTemplate: (props, children) => `
        <Button${props}>
          ${children}
        </Button>`,
      render({ boolean, text, segment, button }, action) {
        // This will add a control button but will not add any extra props in `codeTemplate`
        button('Click on me', () => alert('Hello!'));
        return (
          <Button
            disabled={boolean({ name: 'disabled', value: false })} // It is important that `name` match the property name, in order to make `codeTemplate` work as expected
            size={segment({
              name: 'size',
              value: 'small',
              options: [
                ['big', 'Big'],
                ['small', 'Small'],
              ],
              defaultValue: 'small', // This is the default value of the propery so if this value is selected the prop will not appear in `codeTemplate`.
            })}
            startIcon={
              boolean({
                name: 'startIcon',
                value: false,
                mapValueToTextProp: v => (v ? '<TopIcon />' : undefined), // You can map a prop value to another value in `codeTemplate`
              }) && <TopIcon />
            }
            onClick={action('Button click')} // This will print the text "Button click" and the event under the component
          >
            {text({ displayName: 'text', name: 'children', value: 'Save' })}
          </Button>
        );
      },
    };
  ]
};