import React from 'react';
import { Meta, StoryFn } from "@storybook/react-webpack5";
import Button, { ButtonProps } from './Button';
import { variants, variantsOutline, variantsSubtle } from "@/constants.js"

const iconNames = ["file-earmark-arrow-down-fill", "alarm", "activity", "heart-fill", "circle-fill", "bag", "bell-fill", "boxes", "link"]

export default {
  title: 'atoms/Button',
  component: Button,
  argTypes: {
    iconName: {
      options: iconNames,
      control: { type: 'select' },
    },
    presentation: {
      control: { type: 'select' },
    }
  },
} as Meta<typeof Button>;

const ButtonMap = (variants: string[], args: ButtonProps) => (
  <>
    <div key="variants" style={{display: 'flex', flexDirection: 'row', flexWrap: 'wrap'}}>
      {Object.values(variants.filter(v => !v.startsWith('outline-') && !v.startsWith('subtle-'))).map(variant => MappedButton({variant, ...args}))}
    </div>
    <div key="variants-outline" style={{display: 'flex', flexDirection: 'row', flexWrap: 'wrap'}}>
      {Object.values(variantsOutline).map(variant => MappedButton({variant, ...args}))}
    </div>
    <div key="variants-subtle" style={{display: 'flex', flexDirection: 'row', flexWrap: 'wrap'}}>
      {Object.values(variantsSubtle).map(variant => MappedButton({variant, ...args}))}
    </div>
  </>
);

const MappedButton = ({variant, ...args}: ButtonProps) => (
  <span key={variant} style={{margin: 5}}>
    <Button {...args} variant={variant}>
      Button {variant} {args.presentation !== 'normal' ? args.presentation : ''}
    </Button>
  </span>
);

const Template: StoryFn<ButtonProps> = (args) => {
  return ButtonMap([...Object.values(variants), ...Object.values(variantsOutline), ...Object.values(variantsSubtle)], {presentation: 'normal', ...args});
};

const IconTemplate: StoryFn<ButtonProps> = (args) => {
  return (
    <>
      <div key="iconNames" style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
        {
          Object.values(iconNames).map(iconName => (
            <span key={iconName} style={{ margin: 5 }}>
              <Button {...args} iconName={iconName}>
                Icon {iconName}
              </Button>
            </span>
          ))
        }
      </div>
      <div key="variants" style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
        {
          Object.values(variants).map((variant, index) => (
            <span key={variant} style={{ margin: 5 }}>
            <Button {...args} variant={variant} iconName={iconNames[index]} >
              Button {variant} {args.presentation !== 'normal' ? args.presentation : ''}
            </Button>
          </span>
          ))
        }
      </div>
    </>
  );
};


export const _Button = Template.bind({});
_Button.args = {};
export const _IconButton = IconTemplate.bind({});
_IconButton.args = {};