import { createEffect, createSignal } from "solid-js";
import UserService from "../../services/user-service";
import ValidatedTextInput from "../validated-text-input";

function ChangePasswordSettings() {
  const PASSWORD_MIN_LENGTH = 6;

  const [error, setError] = createSignal("");
  const [success, setSuccess] = createSignal(false);

  const [currentPassword, setCurrentPassword] = createSignal("");
  const [newPassword, setNewPassword] = createSignal("");
  const [newPasswordRepeat, setNewPasswordRepeat] = createSignal("");

  const [isCurrentPasswordValid, setCurrentPasswordValid] = createSignal(true);
  const [isNewPasswordValid, setNewPasswordValid] = createSignal(true);
  const [isNewPasswordRepeatValid, setNewPasswordRepeatValid] =
    createSignal(true);
  const [isValid, setValid] = createSignal(false);

  const [currentPasswordActive, setCurrentPasswordActive] = createSignal(false);
  const [newPasswordRepeatActive, setNewPasswordRepeatActive] =
    createSignal(false);

  createEffect(() =>
    setValid(
      isCurrentPasswordValid() &&
        isNewPasswordValid() &&
        isNewPasswordRepeatValid()
    )
  );
  createEffect(() => setCurrentPasswordValid(currentPassword().length > 0));
  createEffect(() =>
    setNewPasswordValid(newPassword().length >= PASSWORD_MIN_LENGTH)
  );
  createEffect(() =>
    setNewPasswordRepeatValid(newPassword() === newPasswordRepeat())
  );
  createEffect(() => (error() ? setSuccess(false) : null));
  createEffect(() =>
    success() ? setTimeout(() => setSuccess(false), 5000) : null
  );

  async function handleChangePassword() {
    try {
      await UserService.changePassword({
        currentPassword: currentPassword(),
        newPassword: newPassword(),
      });
      setSuccess(true);
    } catch (error) {
      setError(error.message);
    }
  }

  return (
    <div class="border rounded bg-dark p-3">
      <div
        class={"alert alert-danger" + (error() ? "" : " d-none")}
        role="alert"
      >
        {error()}
      </div>
      <div
        class={"alert alert-success" + (success() ? "" : " d-none")}
        role="alert"
      >
        Changing password successful.
      </div>
      <div class="fw-bold mb-3">Change password</div>
      <div class="row mb-3">
        <label for="currentPassword" class="col-sm-2 col-form-label">
          Current Password
        </label>
        <ValidatedTextInput
          class="col-sm-10"
          id="currentPassword"
          type="password"
          valid={isCurrentPasswordValid()}
          value={currentPassword()}
          onInput={(e) => setCurrentPassword(e.target.value)}
        />
      </div>
      <div class="row mb-3">
        <label for="newPassword" class="col-sm-2 col-form-label">
          New Password
        </label>
        <ValidatedTextInput
          class="col-sm-10"
          id="newPassword"
          type="password"
          valid={isNewPasswordValid()}
          value={newPassword()}
          onInput={(e) => setNewPassword(e.target.value)}
          errorText={`Neues Passwort muss mindestens ${PASSWORD_MIN_LENGTH} Zeichen lang
            sein.`}
        />
      </div>
      <div class="row mb-3">
        <label for="newPasswordRepeat" class="col-sm-2 col-form-label">
          New Passwort repeat
        </label>
        <ValidatedTextInput
          class="col-sm-10"
          id="newPasswordRepeat"
          type="password"
          valid={isNewPasswordRepeatValid()}
          value={newPasswordRepeat()}
          onInput={(e) => setNewPasswordRepeat(e.target.value)}
          errorText={"Passwörter müssen übereinstimmen"}
        />
      </div>
      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <button
          class="btn btn-primary"
          type="button"
          disabled={!isValid()}
          onClick={handleChangePassword}
        >
          Change
        </button>
      </div>
    </div>
  );
}

export default ChangePasswordSettings;
