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

import { emailSelector } from './redux/selectors';
import { registerUserAction, verifyTokenAction } from './redux/slices';
import { isFormLoadingSelector } from '@/modules/auth/common/redux/selectors';

import Layout from '@/modules/auth/common/components/Layout/Layout';
import { Button, Checkbox, FormControlLabel, Link, Stack, TextField, Typography } from '@/mui/components';

function GuestActivation() {
  const router = useRouter();
  const dispatch = useDispatch();
  const isFormLoading = useSelector(isFormLoadingSelector);
  const email = useSelector(emailSelector);
  const [isAgreeWithTerms, setAgreeWithTerms] = useState(false);
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  useEffect(() => {
    dispatch(
      verifyTokenAction({
        token: router.query.token,
      }),
    );
  }, []);

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

    dispatch(
      registerUserAction({
        firstName,
        lastName,
        email,
        token: router.query.token,
      }),
    );
  };

  return (
    <Layout
      title="Welcome!"
      subTitle="Please provide your name for a more personalized experience"
      firstSection={
        <Stack component="form" disabled={isFormLoading} onSubmit={onSubmit} spacing={3} fullWidth>
          <Stack spacing={2} alignItems="center" direction="row">
            <TextField
              data-id="firstName"
              placeholder="First Name (optional)"
              disabled={isFormLoading}
              variant="outlined"
              value={firstName}
              inputProps={{ maxLength: 30 }}
              onChange={({ target }) => setFirstName(target.value)}
            />
            <TextField
              data-id="lastName"
              placeholder="Last Name (optional)"
              disabled={isFormLoading}
              variant="outlined"
              value={lastName}
              inputProps={{ maxLength: 30 }}
              onChange={({ target }) => setLastName(target.value)}
            />
          </Stack>
          <FormControlLabel
            control={
              <Checkbox
                color="primary"
                size="xSmall"
                disabled={isFormLoading}
                checked={isAgreeWithTerms}
                onChange={() => setAgreeWithTerms((prev) => !prev)}
                name="terms"
              />
            }
            label={
              <Typography variant="caption" align="left" component="div">
                <Typography variant="inherit">I agree to the</Typography>
                &nbsp;
                <Link href="https://anyclip.com/terms-conditions/" target="_blank" rel="noreferrer">
                  Terms & conditions
                </Link>
                &nbsp;
                <Typography variant="inherit">and the</Typography>
                &nbsp;
                <Link href="https://anyclip.com/privacy-policy/" target="_blank" rel="noreferrer">
                  Privacy Policy
                </Link>
              </Typography>
            }
          />
          <div>
            <Button
              type="submit"
              variant="contained"
              color="primary"
              disabled={isFormLoading || !isAgreeWithTerms}
              size="large"
              shape="circular"
            >
              Continue
            </Button>
          </div>
        </Stack>
      }
      footer={false}
    />
  );
}

export default GuestActivation;
