import { componentName } from '../src/components/descope-user-attribute';
import {
  directionControl,
  fullWidthControl,
  labelControl,
  placeholderControl,
  readOnlyControl,
  requiredControl,
} from './commonControls';

import customDeleteIcon from './icons/apple.svg';
import customEditIcon from './icons/google.svg';

const slottedChildren = `
  <descope-icon slot="delete-icon" src="${customDeleteIcon}" src-dark="${customDeleteIcon}"></descope-icon>
  <descope-icon slot="edit-icon" src="${customEditIcon}" src-dark="${customEditIcon}"></descope-icon>
`;

const Template = ({
  'full-width': fullWidth,
  direction,
  value,
  placeholder,
  label,
  required,
  readonly,
  'badge-label': badgeLabel,
  'badge-tooltip-text': badgeTooltipText,
  'edit-button-label': editButtonLabel,
  'delete-button-label': deleteButtonLabel,
  'hide-delete': hideDelete,
  customIcons,
}) => `
  <descope-user-attribute
    full-width="${fullWidth || 'false'}"
    value="${value || ''}"
    placeholder="${placeholder || ''}"
    label="${label || ''}"
    required="${required || 'false'}"
    badge-label="${badgeLabel || ''}"
    badge-tooltip-text="${badgeTooltipText || ''}"
    edit-button-label="${editButtonLabel || ''}"
    delete-button-label="${deleteButtonLabel || ''}"
    hide-delete="${hideDelete || 'false'}"
    st-host-direction="${direction ?? ''}"
    readonly="${readonly || false}"
  >
    ${customIcons ? slottedChildren : ''}
  </descope-user-attribute>
`;

export default {
  component: componentName,
  title: 'descope-user-attribute',
  argTypes: {
    ...fullWidthControl,
    ...directionControl,
    ...labelControl,
    ...placeholderControl,
    ...requiredControl,
    ...readOnlyControl,
    value: {
      name: 'Value',
      control: { type: 'text' },
    },
    'badge-label': {
      name: 'Badge Label',
      control: { type: 'text' },
    },
    'badge-tooltip-text': {
      name: 'Badge Tooltip Text',
      control: { type: 'text' },
    },
    'edit-button-label': {
      name: 'Edit Button Label',
      control: { type: 'text' },
    },
    'delete-button-label': {
      name: 'Delete Button Label',
      control: { type: 'text' },
    },
    'hide-delete': {
      name: 'Hide Delete',
      control: { type: 'boolean' },
    },
    customIcons: {
      name: 'Custom Icons',
      control: { type: 'boolean' },
    },
  },
};

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

Default.args = {
  value: 'Value',
  placeholder: 'Placeholder',
  label: 'Label',
  required: 'false',
  'badge-label': 'Badge Label',
  'badge-tooltip-text': 'Badge Tooltip Text',
  customIcons: false,
};
