import { useState } from 'react';
import { TextInput, UseEmailValidator } from '../index';

const meta = {
  title: 'Utils / Email Validation',
  component: UseEmailValidator,
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const Template = (args) => {
  const [email, emailSetter] = useState(null);

  return (
    <div>
      <TextInput
        type="email"
        title="Enter an email"
        callback={(e) => emailSetter(e.target.value)}
      />

      <br />
      <strong>Email Entered: </strong>
      {email}
      <br />
      <strong>Validation Error: </strong>
      <span
        className={`${
          email && UseEmailValidator(email).error
            ? 'text-_-states-error'
            : 'text-_-states-success'
        }`}
      >
        {email && UseEmailValidator(email).error ? 'error' : 'no error'}
      </span>
      <br />
      <strong>Message: </strong>
      <span
        className={`${
          email && UseEmailValidator(email).message !== 'success'
            ? 'text-_-states-error'
            : 'text-_-states-success'
        }`}
      >
        {email && (UseEmailValidator(email).message || 'no error')}
      </span>
    </div>
  );
};

export const Default = Template.bind({});
Default.args = {};