import React, { useState, useRef } from 'react';
import { TextField } from '@lendi/ui/TextField';
import { Button } from '@lendi/ui/Button';
import { Spacer } from '@lendi/ui/Layout';

export const Interactive = (args) => <TextField {...args} />;

// Note: Storybook's composeStories needs a default export or it will error, it doesn't seem to matter what it is
export default {
  title: 'Text Field',
};

Interactive.args = {
  label: 'Label',
  placeholder: 'Placeholder text',
  helpText: 'Help text example',
  errorText: 'Error text example',
};

Interactive.argTypes = {
  inlineAction: {
    control: { type: 'radio', options: ['clear'] },
  },
};

export const Widths = () => (
  <Spacer ygap="sm">
    <TextField label="default 100%" />
    <TextField label="width: 50%" width="50%" inlineAction="clear" />
    <TextField label="width: 80%, minWidth: 250px" minWidth="250px" width="80%" />
  </Spacer>
);

export const Errors = () => (
  <Spacer ygap="sm">
    <TextField label="Label" validationState={'invalid'} errorText="Error text" labelSuffix="(required)" />
    <TextField label="Label" validationState={'invalid'} errorText="Error text" helpText="Help text" />
  </Spacer>
);

export const ClearAction = () => {
  const [value, setValue] = useState('');

  const inputRef = useRef<HTMLInputElement>();

  const onChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <Spacer xgap="xl">
      <TextField
        data-testid="uncontrolled"
        label="Uncontrolled with clear action"
        helpText="Type and then click X to clear"
        ref={inputRef}
        inlineAction="clear"
        placeholder="Placeholder text"
      />
      <TextField
        data-testid="controlled"
        label="Controlled with clear action"
        value={value}
        placeholder="Placeholder text"
        onChange={onChange}
        inlineAction="clear"
      />
    </Spacer>
  );
};

export const ClearActionWithValue = () => {
  const defaultValue = 'Some text';
  const [value, setValue] = useState(defaultValue);

  const inputRef = useRef<HTMLInputElement>();

  const onChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <Spacer xgap="xl">
      <TextField
        data-testid="uncontrolled-value"
        label="Uncontrolled with clear action"
        ref={inputRef}
        inlineAction="clear"
        placeholder="Placeholder text"
        defaultValue={defaultValue}
      />
      <TextField
        data-testid="controlled-value"
        label="Controlled with clear action"
        value={value}
        onChange={onChange}
        inlineAction="clear"
      />
    </Spacer>
  );
};

export const AutoComplete = () => (
  <Spacer ygap="sm">
    <TextField label="Full name" autoComplete={'name'} />
    <TextField label="First name" autoComplete={'given-name'} />
    <TextField label="Middle name" autoComplete={'additional-name'} />
    <TextField label="Last name" autoComplete={'family-name'} />
  </Spacer>
);

export const Labels = () => (
  <Spacer ygap="sm">
    <TextField label="Normal label" />
    <TextField ariaLabel="An aria label" />
    <TextField ariaLabelledBy="id" />
  </Spacer>
);

export const Controlled = (args) => {
  const [value, setValue] = useState('');
  const handleChange = (e) => {
    console.log(e.target.value);
    setValue(e.target.value);
  };

  return <TextField {...args} value={value} onChange={handleChange} />;
};

Controlled.args = {
  label: 'Label',
  placeholder: 'Placeholder text',
  helpText: 'Help text',
};

export const Uncontrolled = () => {
  const inputRef = useRef(null);
  const showVal = () => {
    console.log(inputRef.current.value);
  };

  return (
    <Spacer ygap="xs">
      <TextField label="Uncontrolled Input" defaultValue="hi" ref={inputRef} id="hi" inputId="hihi" />
      <Button size="sm" onPress={showVal} variant="primary" type="submit">
        Submit
      </Button>
    </Spacer>
  );
};

export const Email = () => {
  const inputRef = useRef(null);
  return (
    <Spacer gap="sm">
      <TextField label="Email address" variant="email" />
      <TextField
        label="Email address (with clear)"
        variant="email"
        inlineAction="clear"
        defaultValue="hi"
        ref={inputRef}
      />
    </Spacer>
  );
};