import { Button } from '@/components/Button';
import { DecoratedInput } from '@/components/DecoratedInput';
import { observer } from 'mobx-react-lite';
import { FunctionComponent } from 'preact';
import { TwoFactorActivation } from './model';
import {
  TwoFactorDialog,
  TwoFactorDialogLabel,
  TwoFactorDialogDescription,
  TwoFactorDialogButtons,
} from './TwoFactorDialog';

export const Verification: FunctionComponent<{
  activation: TwoFactorActivation;
}> = observer(({ activation: act }) => {
  const borderInv =
    act.verificationStatus === 'invalid' ? 'border-dark-red' : '';
  return (
    <TwoFactorDialog>
      <TwoFactorDialogLabel
        closeDialog={() => {
          act.cancelActivation();
        }}
      >
        Step 3 of 3 - Verification
      </TwoFactorDialogLabel>
      <TwoFactorDialogDescription>
        <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} />
          </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}`} />
          </div>
        </div>
      </TwoFactorDialogDescription>
      <TwoFactorDialogButtons>
        {act.verificationStatus === 'invalid' && (
          <div className="text-sm color-dark-red">
            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('X', 'X')}
        />
      </TwoFactorDialogButtons>
    </TwoFactorDialog>
  );
});