import type { Meta, StoryObj } from '@storybook/vue3-vite';

import MButton from './MButton.vue';
import { ChevronRight24, Edit24, Search24 } from '@mozaic-ds/icons-vue';

const meta: Meta<typeof MButton> = {
  title: 'Action/Button',
  component: MButton,
  parameters: {
    docs: {
      description: {
        component:
          'Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.',
      },
    },
  },
  args: { default: 'Button Label' },
  render: (args) => ({
    components: { MButton, ChevronRight24, Edit24, Search24 },
    setup() {
      return { args };
    },
    template: `
      <MButton 
        v-bind="args"
      >
        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
        <template v-if="${'default' in args}" v-slot>${args.default}</template>
      </MButton>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MButton>;

export const Filled: Story = {
  parameters: {
    docs: {
      description: {
        story:
          'Most visible variant, used to emphasize the primary action on a page or a section.',
      },
    },
  },
};

export const Outlined: Story = {
  args: { outlined: true },
  parameters: {
    docs: {
      description: {
        story:
          'Complements the filled button for secondary actions that require less attention. It can also be used when multiple actions are available, without one standing out as more important.',
      },
    },
  },
};

export const Ghost: Story = {
  args: { ghost: true },
  parameters: {
    docs: {
      description: {
        story:
          'More discreet, should be used exclusively for canceling or ignoring a task or action.',
      },
    },
  },
};

export const IconLeft: Story = {
  args: {
    iconPosition: 'left',
    icon: '<Edit24/>',
  },
  parameters: {
    docs: {
      description: {
        story:
          'An icon can enhance the action or provide a visual element that helps user understanding.<br/> Used in conjunction with the action verb, reinforcing its meaning.',
      },
    },
  },
};

export const IconRight: Story = {
  args: {
    iconPosition: 'right',
    icon: '<ChevronRight24/>',
  },
  parameters: {
    docs: {
      description: {
        story:
          'An icon can enhance the action or provide a visual element that helps user understanding.<br/> Often emphasizes the concept of navigation, guiding users effectively.',
      },
    },
  },
};

export const IconOnly: Story = {
  args: {
    default: undefined,
    iconPosition: 'only',
    icon: '<Search24/>',
    ariaLabel: 'Search button',
  },
  parameters: {
    docs: {
      description: {
        story:
          'An icon can enhance the action or provide a visual element that helps user understanding.<br/> Used when the action is generic enough to be understood without accompanying text.',
      },
    },
  },
};

export const Standard: Story = {
  args: { appearance: 'standard' },
  parameters: {
    docs: {
      description: {
        story:
          'The standard style is a neutral variant used for general actions that don’t require special attention, ensuring a consistent and accessible look.',
      },
    },
  },
};

export const Accent: Story = {
  args: { appearance: 'accent' },
  parameters: {
    docs: {
      description: {
        story:
          'The accent style is a more prominent variant used for engaging actions that require attention, such as conversions or highlighting specific tasks, ensuring a vibrant and accessible appearance.',
      },
    },
  },
};

export const Danger: Story = {
  args: { appearance: 'danger' },
  parameters: {
    docs: {
      description: {
        story:
          'The danger style is intended for critical or irreversible actions, such as deleting sensitive data (e.g., deleting a profile picture is not considered sensitive), ensuring that users are clearly warned before proceeding.',
      },
    },
  },
};

export const Inverse: Story = {
  globals: {
    backgrounds: { value: 'inverse' },
  },
  args: { appearance: 'inverse' },
  parameters: {
    docs: {
      description: {
        story:
          'The inverse style must be used exclusively on dark backgrounds, providing contrast and clarity.',
      },
    },
  },
};

export const Small: Story = {
  args: { size: 's' },
  parameters: {
    docs: {
      description: {
        story:
          'Exclusively used on desktop interfaces. Ideal for complex interfaces with a high volume of content.',
      },
    },
  },
};

export const Medium: Story = {
  args: { size: 'm' },
  parameters: {
    docs: {
      description: {
        story:
          'This is the minimum size recommended for mobile use, and it is the default size based on standard height. It provides an adequate touch area for mobile devices.',
      },
    },
  },
};

export const Large: Story = {
  args: { size: 'l' },
  parameters: {
    docs: {
      description: {
        story:
          'Primarily used on landing pages or layouts with generous spacing. It may also be applicable in more complex scenarios, such as for small mobile devices used by warehouse employees.',
      },
    },
  },
};

export const Loading: Story = {
  args: {
    isLoading: true,
    ariaLabel: 'Loading button',
  },
  parameters: {
    docs: {
      description: {
        story:
          'Visually communicates to users that a process or action is in progress. It helps set user expectations during waiting periods by indicating that the system is working. Typically used for actions that require more than a fraction of a second to complete.',
      },
    },
  },
};