import React, { useState } from 'react';
import { useStoreState } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import SetupTwoFactorModal from '@/components/dashboard/forms/SetupTwoFactorModal';
import DisableTwoFactorModal from '@/components/dashboard/forms/DisableTwoFactorModal';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';

export default () => {
    const [visible, setVisible] = useState(false);
    const isEnabled = useStoreState((state: ApplicationStore) => state.user.data!.useTotp);

    return (
        <div>
            {visible &&
                (isEnabled ? (
                    <DisableTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)} />
                ) : (
                    <SetupTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)} />
                ))}
            <p css={tw`text-sm`}>
                {isEnabled
                    ? 'Two-factor authentication is currently enabled on your account.'
                    : 'You do not currently have two-factor authentication enabled on your account. Click the button below to begin configuring it.'}
            </p>
            <div css={tw`mt-6`}>
                <Button color={'red'} isSecondary onClick={() => setVisible(true)}>
                    {isEnabled ? 'Disable' : 'Enable'}
                </Button>
            </div>
        </div>
    );
};