/*
 * Copyright (c) 2018-present, Revolut LTD.
 *
 * This source code is licensed under the Apache 2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React from 'react'
import { select, text, boolean } from '@storybook/addon-knobs'

import { Tabs } from '.'
import { withKnobs } from '@storybook/addon-knobs'

const positionOptions = {
  top: 'top',
  bottom: 'bottom',
}

const items = [
  {
    id: 'burger',
    title: 'Burger',
    link: '/market/burger',
  },
  {
    id: 'sushi',
    title: 'Sushi',
    link: '/market/sushi',
  },
  {
    id: 'vodka',
    title: 'Vodka',
    link: '/market/vodka',
    disabled: true,
  },
  {
    id: 'pizza',
    title: 'Pizza',
    link: '/market/pizza',
  },
]

export const controllable = () => (
  <Tabs
    // @ts-ignore
    pointerPosition={select('pointerPosition', positionOptions, positionOptions.bottom)}
    items={items}
    value={text('value', 'pizza')}
    showPointer={boolean('showPointer', true)}
  />
)

export const customOnChangeFn = () => (
  <Tabs
    // @ts-ignore
    pointerPosition={select('pointerPosition', positionOptions, positionOptions.bottom)}
    items={items}
    value={text('value', 'pizza')}
    showPointer={boolean('showPointer', true)}
    // eslint-disable-next-line no-console
    onChange={value => console.log(`Custom onChange: ${value}`)}
  />
)

export const customRenderItemFn = () => (
  <Tabs
    // @ts-ignore
    pointerPosition={select('pointerPosition', positionOptions, positionOptions.bottom)}
    items={items}
    value={text('value', 'pizza')}
    showPointer={boolean('showPointer', true)}
    renderItem={({ item, handleChange }) => (
      <button
        style={{ fontSize: '14px', marginRight: '10px' }}
        key={item.id}
        onClick={() => handleChange(item.id)}
      >
        {item.title}
      </button>
    )}
  />
)

export const customRenderListFn = () => (
  <Tabs
    // @ts-ignore
    pointerPosition={select('pointerPosition', positionOptions, positionOptions.bottom)}
    items={items}
    value={text('value', 'pizza')}
    showPointer={boolean('showPointer', false)}
    renderItem={({ item, state, handleChange }) => (
      <button
        style={{ fontSize: '14px', marginRight: '10px' }}
        key={item.id}
        onClick={() => handleChange(item.id)}
      >
        {item.title}
        {state.value === item.id ? `*` : null}
      </button>
    )}
    renderList={({ list, renderItem, handleChange, state }) =>
      list.map(item => <li key={item.id}>{renderItem({ item, state, handleChange })}</li>)
    }
  />
)

export default {
  title: 'Tabs',
  component: Tabs,
  decorators: [withKnobs],
}