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

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

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

export const Variants = () => (
  <Spacer gap="sm">
    <DateField variant="daymonthyear" label="DayMonthYear" width="calc(50% - 8px)" />
    <DateField variant="monthyear" label="MonthYear" width="calc(50% - 8px)" />
  </Spacer>
);

export const Controlled = (args) => {
  const [value, setValue] = useState(new Date('2021-07-08'));

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

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

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

export const Uncontrolled = () => {
  const inputRef = useRef(null);
  const defaultValue = new Date('2021-07');

  const showVal = () => {
    console.log('date', inputRef.current.value);
  };

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

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

export const Disabled = () => <DateField variant="daymonthyear" label="Disabled" isDisabled={true} />;

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

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

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

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

  const handleMinChange = (e) => {
    if (e.target.validity.patternMismatch || e.target.validity.rangeUnderflow) {
      console.log(e.target.validity);
      setRangeMinValidationState('invalid');
    } else {
      setRangeMinValidationState('valid');
    }
  };

  const handleMaxChange = (e) => {
    if (e.target.validity.patternMismatch || e.target.validity.rangeOverflow) {
      console.log(e.target.validity);
      setMaxRangeValidationState('invalid');
    } else {
      setMaxRangeValidationState('valid');
    }
  };

  return (
    <Spacer ygap="md">
      <DateField
        label="Field label"
        onChange={handleChange}
        validationState={validationState}
        errorText="Please provide a proper date format"
        width="50%"
        isRequired={true}
      />
      <DateField
        label="Date after today"
        onChange={handleMinChange}
        validationState={rangeMinValidationState}
        minDate={new Date(Date.now())}
        errorText="Please provide a date after today"
        width="50%"
        isRequired={true}
      />
      <DateField
        label="Date before today"
        onChange={handleMaxChange}
        validationState={rangeMaxValidationState}
        maxDate={new Date(Date.now())}
        errorText="Please provide a date before today"
        width="50%"
        isRequired={true}
      />
    </Spacer>
  );
};