import React from 'react';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';
import {
    Badge,
    Button,
    Currency,
    Countdown,
    Logo,
    Icon,
    Autocomplete,
    CodeViewer,
    CookieConsent,
    EmptyState,
    Hint,
    InputCheckbox,
    Label,
    Menu,
    TopMenuItem,
    RadioGroup,
    PageTitle,
    Translate,
    InputText,
    InputNumber,
    Tooltip,
} from '../index';

import IconsSprite from '../Components/Icon/icons.svg';

const idsWithAttr = IconsSprite.content.match(/id="(.*?)"/g);
const idsWithoutAttr = idsWithAttr.map((val) => {
    return val.replace(/id="icons_/g, '').replace('"', '');
});

// Icons
storiesOf('Icon', module)
    .add('add', () => (
        <div>
            {idsWithoutAttr.map((iconId) => (
                <div>
                    <Icon color="black" size="medium" name={iconId} key={iconId}/> - {iconId}
                </div>
            ))}
        </div>
    ), {notes: 'Эта иконка используется для всего'});

// Logo
storiesOf('Logo', module)
    .add('default', () => <Logo/>, {
        notes: 'Эта наш логотип'
    });

// Badges
storiesOf('Badge', module)
    .add('default', () => <Badge label="default badge"/>)
    .add('with icon', () => <Badge label="badge with icon" icon="add-filled" iconColor="white" type="success"/>)
    .add('large badge', () => <Badge label="large badge" size="large"/>)
    .add('danger badge', () => <Badge label="danger badge" type="danger"/>)
    .add('clear badge', () => <Badge label="clear badge" type="clear"/>);

// Buttons
storiesOf('Buttons', module)
    .add('Primary button', () => (
        <Button
            onChangePromise={() => Promise.resolve().then(action('clicked'))}
            elementId="primaryButton"
            title="Primary button"
            isPrimary
        />
    ))
    .add('Advanced button', () => (
        <Button
            onChangePromise={() => Promise.resolve()
                .then(action('clicked'))}
            elementId="AdvancedButton"
            title="Advanced button"
            isAdvanced
        />
    ))
    .add('Secondary button', () => (
        <Button
            onChangePromise={(value) => Promise.resolve()
                .then(action('clicked'))}
            elementId="SecondaryButton"
            title="Secondary button"
            isSecondary
        />
    ));

storiesOf('Currency', module)
    .add('dollar currency', () => (
        <Currency value={123456}/>
    ));


const suggestions = [{
    id: 0,
    title: 'One'
}, {
    id: 1,
    title: 'Two'
}];

storiesOf('Autocomplete', module)
    .add('default view', () => (
        <Autocomplete
            name="value"
            onChange={action('clicked')}
            suggestions={suggestions}
            titleField="title"
        />
    ));

storiesOf('CodeViewer', module)
    .add('default view', () => (
        <CodeViewer copyingEnabled language="js" children={
            `const suggestions = [{
                id: 0,
                title: 'One'
            }, {
                id: 1,
                title: 'Two'
            }]`
        }/>
    ));

storiesOf('CookieConsent', module)
    .add('default view', () => (
        <CookieConsent/>
    ));

storiesOf('Countdown', module)
    .add('default view', () => (
        <Countdown time={30} doneCallback={() => window.location.reload()} runCountdown/>
    ));

const emptyStateData = {
    icon: 'send',
    title: 'push_list-empty-state-title',
    description: 'push_list-empty-state-description',
    button: {
        title: 'push_list-empty-state-description-button',
        state: 'app.push.create',
        id: 'pub-push-list-empty-state-create-button',
    },
};

storiesOf('EmptyState', module)
    .add('default view', () => (
        <EmptyState
            onChange={() => action('clicked')}
            icon={emptyStateData.icon}
            button={emptyStateData.button}
            text={emptyStateData.description}
            title={emptyStateData.title}
        />
    ));

storiesOf('Hint', module)
    .add('default view', () => (
        <Hint
            message="Explore a unique advertising channel. Instantly deliver your brand’s message or offer directly to a user’s device, even when he is not browsing."/>
    ));

storiesOf('InputCheckbox', module)
    .add('default view', () => (
        <InputCheckbox
            elementId="InputCheckbox"
            label="Input Checkbox"
            description="Input Checkbox description"
        />
    ));

storiesOf('Label', module)
    .add('default view', () => (
        <Label label="Label" for="element-id"/>
    ));

const menu = [
    {
        key: 'One',
        id: 1,
        isDisabled: true,
        icon: 'stat',
        state: 'stateName'
    }, {
        key: 'Two',
        id: 1,
        icon: 'case',
        state: 'stateName'
    }, {
        key: 'Three',
        id: 1,
        icon: 'people',
        state: 'stateName'
    }, {
        key: 'Four',
        id: 1,
        icon: 'money',
        state: 'stateName'
    }
];

storiesOf('MenuSidebar', module)
    .add('default view', () => (
        <div style={{
            backgroundColor: 'grey'
        }}>
            <Menu
                goToState={action('clicked')}
                items={menu}
                canAccess={() => action('clicked')}
            />
        </div>
    ));

const topMenuItems = [
    {
        icon: {
            name: 'add',
            color: 'black',
            size: 'medium',
        },
        title: 'One'
    }, {
        icon: {
            name: 'users',
            color: 'black',
            size: 'medium',
        },
        title: 'Two'
    }
];

storiesOf('TopMenuItem', module)
    .add('default view', () => (
        <TopMenuItem title="Top menu item" items={topMenuItems} onClick={() => action('clicks')}/>
    ));

const options = [
    {
        id: 1,
        key: '1',
        label: 'One',
        value: 1,
    }, {
        id: 1,
        key: '1',
        label: 'Two',
        value: 1,
    }
];

storiesOf('RadioGroup', module)
    .add('default view', () => (
        <RadioGroup options={options}/>
    ));

const tagetButton = <Button elementId="PageTitle" onChangePromise={() => Promise.resolve().then(action('clicked'))}/>

storiesOf('PageTitle', module)
    .add('default view', () => (
        <PageTitle title="Title" targetButton={tagetButton}/>
    ));

storiesOf('Translate', module)
    .add('default view', () => (
        <Translate tag="pub-create-tag-get-code-interstitial" />
    ));

storiesOf('InputText', module)
    .add('default view', () => (
        <InputText name="InputText" onChange={(value) => action(value)} elementId="InputText" />
    ));

storiesOf('InputNumber', module)
    .add('default view', () => (
        <InputNumber label="InputNumber" isDisabled={false} name="InputText" onChange={(value) => action(value)} elementId="InputText" />
    ));


storiesOf('Tooltip', module)
    .add('default view', () => (
        <Tooltip id="Tooltip" tip="I'm the Tooltip" children={<span>Hover me</span>} />
    ));