import { componentName } from '../src/components/descope-alert';

import {
  fullWidthControl,
  directionControl,
  borderRadiusControl,
  borderedControl,
  typographyVariantControl,
} from './commonControls';

import icon from './icons/alert.svg?no-inline';

const iconAttrs = `st-icon="url(${icon})"`;

const Template = ({
  text,
  direction,
  mode,
  variant,
  spacing,
  bordered,
  'text-align': textAlign,
  'link-target-blank': linkTargetBlank,
  'full-width': fullWidth,
  'background-color': backgroundColor,
  'border-color': borderColor,
  'border-radius': radius,
  'border-width': borderWidth,
  hasIcon,
}) =>
  `
    <descope-alert
      bordered="${bordered || false}"
      full-width="${fullWidth || false}"
      spacing="${spacing || ''}"
      mode="${mode || ''}"
      variant="${variant || ''}"
      border-radius="${radius || ''}"
      border-width="${borderWidth || ''}"
      link-target-blank="${linkTargetBlank || false}"
      text-align="${textAlign || ''}"
      st-background-color="${backgroundColor || ''}"
      st-border-color="${borderColor || ''}"
      st-host-direction="${direction ?? ''}"
      ${hasIcon ? iconAttrs : ''}
    >
      ${text}
    </descope-alert>
  `;

export default {
  component: componentName,
  title: 'descope-alert',
  argTypes: {
    ...fullWidthControl,
    ...directionControl,
    ...borderRadiusControl,
    ...borderedControl,
    ...typographyVariantControl,
    mode: {
      name: 'Mode',
      options: ['success', 'error'],
      control: { type: 'select' },
    },
    hasIcon: {
      name: 'Has Icon',
      control: { type: 'boolean' },
    },
    'border-width': {
      name: 'Border Width',
      control: { type: 'select' },
      options: ['xs', 'sm', 'md', 'lg', 'xl'],
    },
    'background-color': {
      name: 'Background Color',
      control: { type: 'color' },
    },
    'border-color': {
      name: 'Border Color',
      control: { type: 'color' },
    },
    spacing: {
      name: 'Spacing',
      control: { type: 'select' },
      options: ['', 'xs', 'sm', 'md', 'lg', 'xl'],
    },
    'text-align': {
      name: 'Text Align',
      control: { type: 'select' },
      options: ['left', 'center', 'right'],
    },
  },
};

export const Default = Template.bind({});

Default.args = {
  text: 'Alert text ([link](https://descope.com))',
  mode: 'error',
  variant: 'body1',
  'link-target-blank': true,
};
