import { Args, ArgTypes, Meta, Story } from '@storybook/react';

import { ASSETS_URL } from '../../consts/common';
import { Button as ButtonComponent } from './button';
import type { ButtonProps } from './types';

const args: ButtonProps = {
  children: 'Button',
  color: 'primary',
  size: 'large',
  disabled: false,
  variant: undefined,
  startIconUrl: `${ASSETS_URL}/icons/icon_refresh.svg`,
  endIconUrl: '',
  active: false,
  changed: false,
  clickArea: true
};

const argTypes: Partial<ArgTypes<Args>> = {
  children: {
    description: 'Content of button. It can be text or component.'
  },
  color: {
    description: 'Set type of button',
    options: ['primary', 'secondary', 'third'],
    control: {
      type: 'select'
    },
    defaultValue: 'primary'
  },

  size: {
    description: 'Set size of button',
    options: ['large', 'medium', 'small'],
    control: {
      type: 'select'
    },
    summary: 'large'
  },

  disabled: {
    description: 'Set button to disable',
    defaultValue: false
  },
  variant: {
    description: 'use it only with primary for text button',
    options: ['text', undefined],
    control: {
      type: 'select'
    },
    defaultValue: undefined
  },

  startIconUrl: {
    description: 'set start icon',
    table: {
      defaultValue: {
        summary: undefined
      }
    }
  },
  endIconUrl: {
    description: 'set start icon',
    table: {
      defaultValue: {
        summary: undefined
      }
    }
  },
  active: {
    description: 'Set button to active condition (only for size "medium" and color "third")',
    table: {
      defaultValue: {
        summary: false
      }
    }
  },
  changed: {
    description: 'Set button to changed condition (only for children icon and color "third")',
    table: {
      defaultValue: {
        summary: false
      }
    }
  },
  clickArea: {
    type: 'boolean',
    description:
      'If click area equals to `false` then it will override size and variant prop and provide a textual button with no padding and line height.',
    defaultValue: true
  }
};

export default {
  component: ButtonComponent,
  title: 'Buttons/Buttons',
  argTypes,
  args,
  parameters: {
    actions: {
      handles: ['click']
    }
  }
} as Meta;

const Template: Story<ButtonProps> = args => <ButtonComponent {...args} />;

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