import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import UniversalLinkComponent from './UniversalLink';
import { injectIntl } from 'react-intl';
import configureStore from 'redux-mock-store';
import { Provider } from 'react-intl-redux';

<Meta
  title="UniversalLink"
  argTypes={{
    href: { control: 'text' },
    item: { control: 'object' },
    text: { control: 'text' },
  }}
  decorators={[
    (Story) => (
      <div style={{ width: '400px' }}>
        <Story />
      </div>
    ),
  ]}
/>

# UniversalLink

Link to url or item

export const UniversalLink = (args) => {
  const mockStore = configureStore();
  const store = mockStore({
    userSession: {
      token: null,
    },
    intl: {
      locale: 'en',
      messages: {},
    },
  });
  return (
    <Provider store={store}>
      <UniversalLinkComponent
        href="http://www.google.it"
        item={{
          '@id': 'localhost:3000/example-link-to-twitter',
          remoteUrl: 'http://www.twitter.it',
        }}
        {...args}
      >
        {args.text || 'Example link to google'}
      </UniversalLinkComponent>
      <h4>Link to a generic object. Example code for 'item' prop:</h4>
      <code> {`{'@id':'localhost:3000/test-page'}`}</code>
      <h4>Link to a Link object. Example code for 'item' prop:</h4>
      <code>
        {`{'@id':'localhost:3000/example-link-to-twitter', 'remoteUrl':'http://www.twitter.it'}`}
      </code>
    </Provider>
  );
};

<Story name="UniversalLink">{injectIntl(UniversalLink).bind({})}</Story>

# Props

<ArgsTable of={UniversalLinkComponent} />
