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

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

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

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

export const ClearAction = () => {
  const [value, setValue] = useState<number | undefined>();

  const inputRef = useRef<HTMLInputElement>();

  const handleOnChange = (event) => {
    console.info('value', event.target.value);
    setValue(event.target.value);
  };

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

export const ClearActionWithValue = () => {
  const defaultValue = 123456789101112131415;
  const [value, setValue] = useState<number | undefined>(defaultValue);

  const inputRef = useRef<HTMLInputElement>();

  const handleOnChange = (event) => {
    console.info('value', event.target.value);
    setValue(event.target.value);
  };

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

export const Controlled = (args) => {
  const [value, setValue] = useState<number | undefined>(undefined);

  const handleOnChange = (event) => {
    console.info('value', event.target.value);
    setValue(event.target.value);
  };

  const handleOnValueChange = (value) => {
    console.info('value', value);
  };

  return <NumericField {...args} value={value} onChange={handleOnChange} onValueChange={handleOnValueChange} />;
};

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

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

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

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

export const Labels = () => (
  <Spacer ygap="sm">
    <NumericField label="Normal label" />
    <NumericField ariaLabelledBy="id" />
  </Spacer>
);

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

export const Validation = () => {
  const [validationState, setValidationState] = useState<'valid' | 'invalid'>('valid');

  const handleChange = (e) => {
    if (e.target.validity.patternMismatch) {
      console.log(e.target.validity);
      setValidationState('invalid');
    } else {
      setValidationState('valid');
    }
  };

  return (
    <NumericField
      label="Field label"
      onChange={handleChange}
      maxCharCount={4}
      validationState={validationState}
      errorText="Only numeric characters 0-9 are allowed"
      width="50%"
      isRequired={true}
    />
  );
};