import React, { useEffect, useState } from 'react';
import { UsePasswordValidator, TextInput, Toggle } from '../index';

export default {
  title: 'Utils / Password Validator',
  component: <div />,
};

const Template = (args) => {
  const [passwordConfig, setPasswordConfig] = useState({
    length: 6,
    shouldHaveNumber: true,
    shouldHaveCapital: true,
    shouldHaveNoSpecialChars: true,
    invalidChars: '?!',
    shouldHaveSpecialChars: true,
  });
  const onChange = (e) => {
    setPasswordConfig({ ...passwordConfig, [e.target.id]: e.target.value });
  };
  const [val, setVal] = useState(UsePasswordValidator(passwordConfig));

  useEffect(() => {
    setVal(UsePasswordValidator(passwordConfig));
  }, [passwordConfig]);

  return (
    <div>
      <form>
        <TextInput
          title="length"
          id="length"
          placeholder={passwordConfig.length}
          type="number"
          callback={onChange}
          defaultValue={passwordConfig.length}
        />
        <Toggle
          title="shouldHaveNumber"
          id="shouldHaveNumber"
          isActive={passwordConfig.shouldHaveNumber}
          callback={() => {
            setPasswordConfig({
              ...passwordConfig,
              shouldHaveNumber: !passwordConfig.shouldHaveNumber,
            });
          }}
        />
        <Toggle
          title="shouldHaveCapital"
          id="shouldHaveCapital"
          isActive={passwordConfig.shouldHaveCapital}
          callback={() => {
            setPasswordConfig({
              ...passwordConfig,
              shouldHaveCapital: !passwordConfig.shouldHaveCapital,
            });
          }}
        />
        <Toggle
          title="shouldHaveSpecialChars"
          id="shouldHaveSpecialChars"
          isActive={passwordConfig.shouldHaveSpecialChars}
          callback={() => {
            setPasswordConfig({
              ...passwordConfig,
              shouldHaveSpecialChars: !passwordConfig.shouldHaveSpecialChars,
            });
          }}
        />
        <TextInput
          title="invalidChars"
          id="invalidChars"
          callback={onChange}
          placeholder={passwordConfig.invalidChars}
          defaultValue={passwordConfig.invalidChars}
        />
        <br />
        <TextInput
          id="password"
          type="password"
          title="Choose a password"
          buttonVariant="custom"
          showPasswordLink
          callback={onChange}
          placeholder={passwordConfig.password}
        />
      </form>
      <div>
        val['message']:{' '}
        <span
          className={
            val['message'] === 'Password is valid'
              ? 'text-_-states-success'
              : 'text-_-states-error'
          }
        >
          {val['message']}
        </span>
        <br />
        val['error']:{' '}
        <span
          className={
            val['error'] !== true
              ? 'text-_-states-success'
              : 'text-_-states-error'
          }
        >
          {val['error'] !== true ? 'valid' : 'error'}
        </span>
      </div>
    </div>
  );
};

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