import { useState } from 'react';

type AccessType = 'Pin Credentials' | 'Secret Auth' | 'APIKey' | 'Web Credentials' | 'OTM Tpay';

interface MemberCredentials {
  accessType: AccessType | null;
  username: string;
  credential: string;
  confirmCredential: string;
}

export const useMemberCredentials = () => {
  const [memberCredentials, setMemberCredentials] = useState<MemberCredentials>({
    accessType: null,
    username: '',
    credential: '',
    confirmCredential: ''
  });
  const [error, setError] = useState<string | null>(null);

  const handleChange = (key: keyof MemberCredentials, value: string) => {
    setMemberCredentials((prevCredentials) => ({ ...prevCredentials, [key]: value }));
  };

  const handleSubmit = () => {
    setError(null);

    if (memberCredentials.username === '' || memberCredentials.credential === '') {
      setError('Please fill in all fields');
      return;
    }

    if (memberCredentials.credential !== memberCredentials.confirmCredential) {
      setError('Credentials do not match');
      return;
    }

    console.log('Data Submitted: ', memberCredentials);
  };

  return { memberCredentials, handleChange, handleSubmit, error };
};
