/*
 * 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 * as React from 'react'
import { boolean, text, withKnobs } from '@storybook/addon-knobs'
import styled from 'styled-components'
import { TextInput } from '.'
import { ExternalLabel } from './styles'

const Wrapper = styled.div`
  width: 300px;
`
class Container extends React.Component<any, any> {
  state = {
    value: '',
  }

  onChange = ({ target }) => {
    this.setState({ value: target.value })
  }

  render() {
    return (
      <Wrapper>
        {React.cloneElement(
          // @ts-ignore
          this.props.children,
          {
            onChange: this.onChange,
            value: this.state.value,
          },
        )}
      </Wrapper>
    )
  }
}

export const Base = () => (
  <Container>
    <TextInput
      invalid={boolean('invalid', false)}
      placeholder={text('placeholder', 'hello world')}
    />
  </Container>
)

export const externalLabel = () => (
  <Wrapper>
    <ExternalLabel>
      Bla bla bla I am looooooooooooooooooooooooooooooooooooong label
    </ExternalLabel>
    <Container>
      <TextInput />
    </Container>
  </Wrapper>
)

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