import { Button } from '@/components/Button';
import { DecoratedInput } from '@/components/DecoratedInput';
import { observer } from 'mobx-react-lite';
import { FunctionComponent } from 'preact';
import { TwoFactorActivation } from './TwoFactorActivation';
import {
  ModalDialog,
  ModalDialogButtons,
  ModalDialogDescription,
  ModalDialogLabel
} from '@/components/shared/ModalDialog';

export const Verification: FunctionComponent<{
  activation: TwoFactorActivation;
}> = observer(({ activation: act }) => {
  const borderInv =
    act.verificationStatus === 'invalid' ? 'border-dark-red' : '';
  return (
    <ModalDialog>
      <ModalDialogLabel closeDialog={act.cancelActivation}>
        Step 3 of 3 - Verification
      </ModalDialogLabel>
      <ModalDialogDescription>
        <div className="flex-grow flex flex-col gap-1">
          <div className="flex flex-row items-center gap-2">
            <div className="text-sm">
              ・Enter your <b>secret key</b>:
            </div>
            <DecoratedInput
              className={borderInv}
              onChange={act.setInputSecretKey}
            />
          </div>
          <div className="flex flex-row items-center gap-2">
            <div className="text-sm">
              ・Verify the <b>authentication code</b> generated by your
              authenticator app:
            </div>
            <DecoratedInput
              className={`w-30 ${borderInv}`}
              onChange={act.setInputOtpToken}
            />
          </div>
        </div>
      </ModalDialogDescription>
      <ModalDialogButtons>
        {act.verificationStatus === 'invalid' && (
          <div className="text-sm color-danger">
            Incorrect credentials, please try again.
          </div>
        )}
        <Button
          className="min-w-20"
          type="normal"
          label="Back"
          onClick={act.openSaveSecretKey}
        />
        <Button
          className="min-w-20"
          type="primary"
          label="Next"
          onClick={act.enable2FA}
        />
      </ModalDialogButtons>
    </ModalDialog>
  );
});