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

const defaultArgs = {
  options: [
    { value: 'thing-1', label: 'Thing 1' },
    { value: 'thing-2', label: 'Thing 2' },
    { value: 'thing-3', label: 'Thing 3' },
  ],
};

export const Interactive = (args: SelectFieldComponentProps) => {
  return <SelectField {...args} />;
};

Interactive.args = {
  ...defaultArgs,
  label: 'Label text',
};

export const Headers = (args) => (
  <SelectField
    label="Label"
    placeholder="Placeholder text"
    options={[
      {
        header: 'A header',
        options: [
          { label: 'Option 1', value: 'opt-1' },
          { label: 'Option 2', value: 'opt-2' },
        ],
      },
      { label: 'Option 3', value: 'opt-3' },
      { label: 'Option 4', value: 'opt-4' },
    ]}
  />
);

export const Errors = (args) => (
  <Spacer ygap="sm">
    <SelectField
      label="Label"
      validationState={'invalid'}
      errorText="Error text"
      isRequired={true}
      labelSuffix="(required)"
      options={args.options}
      placeholder="Placeholder text"
    />
    <SelectField
      label="Label"
      validationState={'invalid'}
      errorText="Error text"
      helpText="Help text"
      options={args.options}
    />
  </Spacer>
);

Errors.args = { ...defaultArgs };

export const AutoComplete = () => (
  <SelectField
    label="Title"
    autoComplete={'honorific-prefix'}
    options={[
      { value: 'ms', label: 'Ms.' },
      { value: 'mr', label: 'Mr.' },
      { value: 'none', label: 'None' },
    ]}
  />
);

export const Labels = (args) => (
  <Spacer ygap="sm">
    <SelectField label="label" options={args.options} />
    <SelectField ariaLabel="An aria label" options={args.options} />
    <SelectField ariaLabelledBy="id" options={args.options} />
  </Spacer>
);

Labels.args = { ...defaultArgs };

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

  const handleChange = (e) => {
    console.log(e.target.value);
    setValue(e.target.value);
  };

  return <SelectField {...args} value={value} name="Controlled Input name" onChange={handleChange} />;
};

Controlled.args = {
  ...defaultArgs,
  label: 'Label',
  placeholder: 'Placeholder text',
  helpText: 'Help text',
  options: [
    {
      header: 'A header',
      options: [
        { label: 'Option 1', value: 'opt-1' },
        { label: 'Option 2', value: 'opt-2' },
      ],
    },
    { label: 'Option 3', value: 'opt-3' },
    { label: 'Option 4', value: 'opt-4' },
  ],
};

export const Uncontrolled = (args) => {
  const selectRef = useRef(null);

  const showVal = () => {
    console.log(selectRef.current.value);
  };

  return (
    <Spacer ygap="xs">
      <SelectField
        name="Input name"
        label="Uncontrolled Input"
        defaultValue=""
        ref={selectRef}
        id="hi"
        inputId="hihi"
        placeholder="Select an option..."
        options={args.options}
      />
      <Button size="sm" onPress={showVal} variant="primary" type="submit">
        Submit
      </Button>
    </Spacer>
  );
};

Uncontrolled.args = { ...defaultArgs };

export const Widths = (args) => (
  <Spacer ygap="sm">
    <SelectField label="default 100%" options={args.options} />
    <SelectField label="width: 50%" width="50%" options={args.options} />
    <SelectField label="width: 80%, minWidth: 250px" width="80%" minWidth="250px" options={args.options} />
  </Spacer>
);

Widths.args = { ...defaultArgs };