import { action } from '@storybook/addon-actions';
import type { Meta, Story } from '@storybook/react';

import { ASSETS_URL } from '../../../../consts/common';
import { Input } from '../input';
import type { InputProps } from '../input';

export default {
  component: Input,
  title: 'Forms/Input With Button'
} as Meta;

const buttonClickHandler = action('button clicked');

const Template: Story<InputProps> = args => <Input {...args} />;

export const InputCopyCode = Template.bind({});
InputCopyCode.args = {
  disabled: false,
  fullWidth: false,
  readOnly: true,
  value: '1253 2563',
  endAdornmentButtonProps: {
    children: 'Copy code',
    startIconUrl: `${ASSETS_URL}/icons2/icon_copy.svg`,
    onClick: buttonClickHandler
  },
  style: { minWidth: '432px' }
};

export const InputCopyLink = Template.bind({});
InputCopyLink.args = {
  disabled: false,
  fullWidth: false,
  readOnly: true,
  value: 'https://api.perimeter81.biz/api/scim',
  endAdornmentButtonProps: {
    children: 'Copy link',
    startIconUrl: `${ASSETS_URL}/icons2/icon_copy.svg`,
    onClick: buttonClickHandler
  },
  style: { minWidth: '432px' }
};