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

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

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

export const Variants = () => (
  <Spacer gap="sm">
    <UnitField variant="age" label="Age" width="calc(50% - 8px)" />
    <UnitField variant="years" label="Years" width="calc(50% - 8px)" />
    <UnitField variant="days" label="Days" width="calc(50% - 8px)" />
    <UnitField variant="months" label="Month" width="calc(50% - 8px)" />
    <UnitField variant="percent" label="Percentage" width="calc(50% - 8px)" />
  </Spacer>
);

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

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

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

  return <UnitField {...args} value={value} onChange={handleChange} onValueChange={handleOnValueChange} />;
};

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

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

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

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

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

export const Widths = () => (
  <Spacer ygap="sm">
    <UnitField variant="age" label="default 100%" />
    <UnitField variant="age" label="width: 50%" width="50%" />
    <UnitField variant="age" 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 (
    <UnitField
      label="Field label"
      variant="percent"
      onChange={handleChange}
      maxCharCount={4}
      validationState={validationState}
      errorText="Only numeric characters 0-9 and . are allowed"
      width="50%"
      isRequired={true}
    />
  );
};