import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useRouter } from 'next/router';

import { isFormLoadingSelector } from '@/modules/auth/common/redux/selectors';
import { getPasswordLessAuthAction, verifyPasswordLessAuthAction } from '@/modules/auth/Login/redux/slices';

import Layout from '@/modules/auth/common/components/Layout/Layout';
import { Button, InputAdornment, Link, Stack, TextField } from '@/mui/components';
import { CustomKeywords } from '@/mui/components/CustomIcon';

function PasswordLessLoginCode(props) {
  const dispatch = useDispatch();
  const router = useRouter();
  const isFormLoading = useSelector(isFormLoadingSelector);
  const [code, setCode] = useState('');
  const [error, setError] = useState('');
  const { email } = router.query;

  const onSubmit = (event) => {
    event.preventDefault();

    const codeTrimmed = code.trim();

    setCode(codeTrimmed);

    if (!codeTrimmed) {
      setError('Password cannot be empty');
    } else {
      dispatch(
        verifyPasswordLessAuthAction({
          email,
          code: codeTrimmed,
        }),
      );
    }
  };

  return (
    <Layout
      title="Enter your one-time password"
      subTitle={
        <>
          We have sent it to the email you specified.
          <br />
          Please check your inbox
        </>
      }
      firstSection={
        <Stack component="form" disabled={isFormLoading} onSubmit={onSubmit} spacing={3} fullWidth>
          <TextField
            data-id="email"
            type="password"
            variant="outlined"
            placeholder="Password"
            // eslint-disable-next-line react/prop-types
            value={props.email}
            disabled={isFormLoading}
            error={!!error}
            helperText={error}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <CustomKeywords />
                </InputAdornment>
              ),
            }}
            onChange={(event) => setCode(event.target.value)}
          />
          <Stack direction="row" justifyContent="space-between" alignItems="center">
            <Button
              data-id="reset-submit"
              variant="contained"
              color="primary"
              shape="circular"
              type="submit"
              disabled={isFormLoading}
              size="large"
            >
              Sign In
            </Button>
            <Link
              variant="body2"
              fontWeight={400}
              data-id="forgot-password"
              href="/"
              color={!isFormLoading ? 'text.primary' : 'text.disabled'}
              disabled={isFormLoading}
              onClick={(event) => {
                event.preventDefault();

                dispatch(
                  getPasswordLessAuthAction({
                    email,
                  }),
                );
              }}
            >
              Re-send the password
            </Link>
          </Stack>
        </Stack>
      }
    />
  );
}

export default PasswordLessLoginCode;
