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

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

Interactive.args = {
  label: 'Phone number',
};

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

export const Variants = () => (
  <Spacer gap="sm">
    <PhoneField label="Phone number" width="calc(50% - 8px)" />
    <PhoneField variant="mobile" label="Mobile number" width="calc(50% - 8px)" />
  </Spacer>
);

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

  const inputRef = useRef<HTMLInputElement>();

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

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

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

  const inputRef = useRef<HTMLInputElement>();

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

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

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

  return <PhoneField {...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">
      <PhoneField label="Uncontrolled Input" ref={inputRef} />
      <Button size="sm" onPress={showVal} variant="primary" type="submit">
        Submit
      </Button>
    </Spacer>
  );
};

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

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

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

export const Validation = () => {
  const [value, setValue] = useState('');
  const [validationState, setValidationState] = useState<'valid' | 'invalid'>('valid');
  const [mobileValue, setMobileValue] = useState('');
  const [validationMobileState, setValidationMobileState] = useState<'valid' | 'invalid'>('valid');

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

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

  const handleMobileChange = (e) => {
    setMobileValue(e.target.value);

    console.log(e.target.validity);
    if (e.target.validity.patternMismatch) {
      setValidationMobileState('invalid');
    } else {
      setValidationMobileState('valid');
    }
  };

  return (
    <Spacer gap="sm">
      <PhoneField
        label="Phone Number"
        value={value}
        onChange={handlePhoneChange}
        validationState={validationState}
        errorText="Please enter a valid Australian Phone number, starting with 02"
        minWidth={'250px'}
        width="50%"
        isRequired={true}
      />
      <PhoneField
        label="Mobile Number"
        value={mobileValue}
        variant="mobile"
        onChange={handleMobileChange}
        validationState={validationMobileState}
        errorText="Please enter a valid Australian Mobile number, starting with 04"
        minWidth={'250px'}
        width="50%"
        isRequired={true}
      />
    </Spacer>
  );
};