import { useTranslation } from 'react-i18next';
import { ChangeEvent, useState } from "react";

export interface AllTransactionCancelSectionPasswordGroupProps {
  cancelPassword: string;
  setCancelPassword: (cancelPassword: string) => void;
  requestSuccess: boolean;
};

export const AllTransactionCancelSectionPasswordGroup = ({
  cancelPassword,
  setCancelPassword,
  requestSuccess
}: AllTransactionCancelSectionPasswordGroupProps) => {
  const { t } = useTranslation();

  const [newCancelPassword, setNewCancelPassword] = useState<string>(cancelPassword);
  
  const onChangeNewCancelPassword = (value: string) => {
    setCancelPassword(value);
    setNewCancelPassword(value);
  };
  return (
    <>
      <div className="form-group">
        <label className="form-label">{t('transaction.cancel.passwordGroup.cancelPassword')}</label>
        <div className="input-wrapper wid-100 error">
          <input
            className="wid-100 align-right"
            type="password"
            value={ newCancelPassword }
            onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewCancelPassword(e.target.value) }
          />
        </div>
      </div>
      { !requestSuccess &&
        <div className="error-msg">{t('transaction.cancel.passwordGroup.passwordMismatch')}</div>
      }
    </>
  );
}