import { componentName } from '../src/components/descope-container';
import {
  boxShadowControl,
  borderRadiusControl,
  customHeightControl,
  customWidthControl,
  directionControl,
} from './commonControls';
import bgImageUrl from './images/game.png';

const Template = ({
  'vertical-alignment': verticalAlignment,
  'horizontal-alignment': horizontalAlignment,
  'vertical-padding': verticalPadding,
  'horizontal-padding': horizontalPadding,
  'flex-direction': flexDirection,
  direction,
  'space-between': spaceBetween,
  shadow,
  'border-radius': borderRadius,
  'st-host-height': customHeight,
  'st-host-width': customWidth,
  'st-background-color': backgroundColor,
  'st-items-grow': itemsGrow,
  isBackgroundImage,
}) => `
  <descope-container
    vertical-alignment="${verticalAlignment || ''}"
    horizontal-alignment="${horizontalAlignment || ''}"
    vertical-padding="${verticalPadding || ''}"
    horizontal-padding="${horizontalPadding || ''}"
    direction="${flexDirection || ''}"
    st-host-direction="${direction || ''}"
    space-between="${spaceBetween || ''}"
    shadow="${shadow || ''}"
    border-radius="${borderRadius || ''}"
    st-host-height="${customHeight || ''}"
    st-host-width="${customWidth || ''}"
    st-background-color="${backgroundColor || ''}"
    st-background-image="${isBackgroundImage ? `url(${bgImageUrl})` : ''}"
    st-items-grow="${itemsGrow || '0'}"
  >
    <descope-button variant="contained" size="md" mode="primary">Button</descope-button>
    <descope-button variant="contained" size="md" mode="secondary">Button</descope-button>
  </descope-container>
`;

export default {
  component: componentName,
  title: 'descope-container',
  argTypes: {
    ...boxShadowControl,
    ...borderRadiusControl,
    ...customHeightControl,
    ...customWidthControl,
    ...directionControl,
    'vertical-alignment': {
      name: 'Vertical Alignment',
      options: ['start', 'center', 'end'],
      control: { type: 'select' },
    },
    'horizontal-alignment': {
      name: 'Horizontal Alignment',
      options: ['start', 'center', 'end'],
      control: { type: 'select' },
    },
    'vertical-padding': {
      name: 'Vertical Padding',
      options: ['sm', 'md', 'lg'],
      control: { type: 'select' },
    },
    'horizontal-padding': {
      name: 'Horizontal Padding',
      options: ['sm', 'md', 'lg'],
      control: { type: 'select' },
    },
    'flex-direction': {
      name: 'Direction',
      options: ['row', 'column'],
      control: { type: 'select' },
    },
    'space-between': {
      name: 'Space Between',
      options: ['sm', 'md', 'lg'],
      control: { type: 'select' },
    },
  },
};

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

Default.args = {
  'st-background-color': '',
  isBackgroundImage: false,
  'st-items-grow': '0',
};
