import React, { KeyboardEvent } from 'react';
import TextInput, { TextInputProps } from '../components/Forms/TextInput';
import { Story } from '@storybook/react';

export default {
  title: 'Forms / TextInput',
  component: TextInput,
};

const Template: Story<TextInputProps> = (args) => (
  <div className="bg-gray-100 p-4">
    <TextInput {...args} />
    <TextInput {...args} />
    <TextInput {...args} />
  </div>
);

export const Default = Template.bind({});
Default.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'John Doe',
  name: 'myId',
  title: 'Title',
  type: 'text',
};

export const Required = Template.bind({});
Required.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'John Doe',
  name: 'myId',
  title: 'First Name',
  type: 'text',
  required: true,
};

export const Optional = Template.bind({});
Optional.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'John Doe',
  name: 'myId',
  title: 'First Name',
  type: 'text',
  optional: true,
};

export const Disabled = Template.bind({});
Disabled.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'John Doe',
  name: 'myId',
  title: 'First Name',
  type: 'text',
  disabled: true,
};

export const Error = Template.bind({});
Error.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'John Doe',
  name: 'myId',
  title: 'First Name',
  type: 'text',
  error:
    'An Error Occurred An Error Occurred An Error Occurred An Error Occurred An Error Occurred',
  theme: 'border-_-secondary-800',
};

export const Theme = Template.bind({});
Theme.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'John Doe',
  name: 'myId',
  title: 'First Name',
  type: 'text',
  labelTheme: 'text-indigo-500',
};

export const InputTheme = Template.bind({});
InputTheme.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'John Doe',
  name: 'myId',
  title: 'First Name',
  type: 'text',
  inputTheme: 'border-indigo-500',
};

export const KeyUp = Template.bind({});
KeyUp.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'John Doe',
  name: 'myId',
  title: 'First Name',
  type: 'text',
  keyUpCallback: (e: KeyboardEvent<HTMLInputElement>) =>
    alert((e.target as HTMLInputElement).value),
};

export const Max = Template.bind({});
Max.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'Five Digits',
  name: 'myId',
  title: 'Max Length 5',
  type: 'text',
  maxLength: 5,
};

export const Min = Template.bind({});
Min.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'Five Digits',
  name: 'myId',
  title: 'Min Length 5',
  type: 'text',
  minLength: 5,
};

export const Initial = Template.bind({});
Initial.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'Initial Value',
  name: 'myId',
  title: 'Min Length 5',
  type: 'text',
  populatedValue: 'I came from the server!',
};

export const Pattern = Template.bind({});
Pattern.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'Initial Value',
  name: 'myId',
  title: 'Min Length 5',
  type: 'text',
};

export const Password = Template.bind({});
Password.args = {
  ariaDescribedby: 'someLabel',
  autoComplete: '',
  autoCorrect: false,
  blurCallback: (e) => console.log(e.target.value),
  callback: (e) => console.log(e.target.value),
  id: 'myId',
  placeholder: 'Password',
  name: 'myId',
  title: 'Password',
  type: 'password',
  optional: true,
  showPasswordLink: true,
  buttonVariant: 'custom',
  theme: 'border-_-imperfect-400/40 hover:border-_-misc-selectedMedium',
};