/* eslint-disable react-hooks/rules-of-hooks */
import { text } from '@storybook/addon-knobs';
import { useState } from '@storybook/addons';
import React from 'react';
import { Stack } from '../Layout/index';
import AnIcon from '../../assets/lock.svg';
import Icon from '../Icon/index';
import Input from '.';

export default {
  title: 'Components|Input',
  component: Input,
};

export const Basic = () => {
  const [value, setValue] = useState('');
  return (
    <Stack>
      <Input
        width="100%"
        iconColor={text('iconColor', 'Mid Neutral 2')}
        icon={text('icon', 'pencil')}
        placeholder={text('placeholder', 'Placeholder')}
        currencyCode={text('currency', null)}
        value={value}
        type={text('type', 'input')}
        onChange={(e) => setValue(e.target.value)}
      />
      <Input
        width="100%"
        placeholder={text('placeholder', 'Placeholder')}
        currencyCode={text('currency', null)}
        value={value}
        type={text('type', 'input')}
        onChange={(e) => setValue(e.target.value)}
      />
      <Input
        onClick={() => alert('Hi')}
        copy
        icon="card"
        iconRight="copy"
        iconColor={text('iconColor', 'Mid Neutral 2')}
        iconRightColor={text('iconRightColor', 'Red')}
        placeholder="copy me!"
        value={value}
        type="input"
        onChange={(e) => setValue(e.target.value)}
      />
      <Input
        copy
        iconRight={<Icon color="Mid Neutral 2" name="copy" onClick={() => alert('hi')} />}
        placeholder="external icon right!"
        value={value}
        type="input"
        onChange={(e) => setValue(e.target.value)}
        backgroundColor="Light Neutral 3"
      />
      <Input
        icon={<img src={AnIcon} alt="" />}
        value={value}
        placeholder="External icon input"
        onChange={(e) => setValue(e.target.value)}
      />
      <Input
        placeholder={text('placeholder', 'Placeholder')}
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Input
        disabled
        placeholder={text('placeholder', 'Placeholder')}
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Input
        error="an error"
        placeholder="some text!"
        value={value}
        type="input"
        onChange={(e) => setValue(e.target.value)}
      />
    </Stack>
  );
};

export const textarea = () => {
  const [value, setValue] = useState('');
  return (
    <Input
      type="textarea"
      placeholder={text('placeholder', 'Placeholder')}
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
};

export const currency = () => {
  const [value, setValue] = useState(1234567);
  return (
    <Stack>
      <Input
        type="number"
        currencyCode="GBP"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Input currencyCode="EUR" value={value} onChange={(e) => setValue(e.target.value)} />
      <Input currencyCode="USD" value={value} onChange={(e) => setValue(e.target.value)} />
      <Input currencyCode="ABCDE" value={value} onChange={(e) => setValue(e.target.value)} />
    </Stack>
  );
};

export const password = () => {
  const [value, setValue] = useState('coolpassword');
  return (
    <Stack>
      <Input
        icon="pencil"
        type="password"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Input type="password" error value={value} onChange={(e) => setValue(e.target.value)} />
    </Stack>
  );
};