import * as React from 'react';
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import CssBaseline from '@mui/material/CssBaseline';
import Divider from '@mui/material/Divider';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
import Link from '@mui/material/Link';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import MuiCard from '@mui/material/Card';
import { styled } from '@mui/material/styles';
import AppTheme from '../../../shared-theme/AppTheme.tsx';
import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons.tsx';
import ColorModeSelect from '../../../shared-theme/ColorModeSelect.tsx';
import MuiPhoneNumber from 'mui-phone-number';
import { useDispatch } from 'react-redux';
import { registerUser } from '../../../redux/slices/authSlice.ts';
import { toast } from "react-toastify";

const Card = styled(MuiCard)(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  alignSelf: 'center',
  width: '100%',
  padding: theme.spacing(4),
  gap: theme.spacing(2),
  margin: 'auto',
  boxShadow:
    'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px',
  [theme.breakpoints.up('sm')]: {
    width: '450px',
  },
  ...theme.applyStyles('dark', {
    boxShadow:
      'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px',
  }),
}));

const SignUpContainer = styled(Stack)(({ theme }) => ({
  height: 'calc((1 - var(--template-frame-height, 0)) * 100dvh)',
  minHeight: '100%',
  padding: theme.spacing(2),
  [theme.breakpoints.up('sm')]: {
    padding: theme.spacing(4),
  },
  '&::before': {
    content: '""',
    display: 'block',
    position: 'absolute',
    zIndex: -1,
    inset: 0,
    backgroundImage:
      'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
    backgroundRepeat: 'no-repeat',
    ...theme.applyStyles('dark', {
      backgroundImage:
        'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
    }),
  },
}));
interface IRegisterForm {
  name:string;
  email: string;
  password: string;
  phoneCountryCode:string;
  phoneNumber:number | null;
}
export default function SignUp(props: { disableCustomTheme?: boolean }) {
const dispatch = useDispatch();
  const { control, handleSubmit, formState: { errors }, setValue } = useForm<IRegisterForm>({
    defaultValues: {
      name: '',
      email: '',
      password: '',
      phoneCountryCode: '',
      phoneNumber: null,
    }
  });
  const [countryCode, setCountryCode] = React.useState('');
  const [phoneNumber, setPhoneNumber] = React.useState('');

  const extractCountryCodeAndNumber = (phone) => {
    // Match the country code (e.g., +91) and the rest of the number
    const match = phone.match(/^(\+\d{1,3})\s*(\d+.*)/);
    if (match) {
      return { countryCode: match[1], numberWithoutCountryCode: match[2] };
    }
    return { countryCode: '', numberWithoutCountryCode: phone };
  };
  const handleOnChange = (newPhone) => {
     const { countryCode, numberWithoutCountryCode } = extractCountryCodeAndNumber(newPhone);
     console.log("numberWithoutCountryCode",numberWithoutCountryCode);
     setPhoneNumber(numberWithoutCountryCode)
    setCountryCode(countryCode);
  };

  const onSubmit : SubmitHandler<IRegisterForm>= async (data: any) => {
   const payload = {
      name: data.name,
      email: data.email,
      password: data.password,
      phoneCountryCode: countryCode,
      phoneNumber: phoneNumber,
    };
    try {
      await dispatch(registerUser(payload)).unwrap();
    } catch (error) {
      toast(error)
      console.log("error",error)
    } 
  };

  return (
    <AppTheme {...props}>
      {/* <CssBaseline enableColorScheme /> */}
      <ColorModeSelect sx={{ position: 'fixed', top: '1rem', right: '1rem' }} />/
      <SignUpContainer direction="column" justifyContent="space-between">
        <Card variant="outlined">
          Digi-EV
          <Typography
            component="h1"
            variant="h4"
            sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
          >
            Sign up
          </Typography>
          <Box
            component="form"
            onSubmit={handleSubmit(onSubmit)}
            sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
          >
            <FormControl>
              <FormLabel htmlFor="name">Full name</FormLabel>
              <Controller
                name="name"
                control={control}
                rules={{ required: 'Name is required' }}
                render={({ field }) => (
                  <TextField
                    {...field}
                    id="name"
                    fullWidth
                    placeholder="Jon Snow"
                    error={!!errors.name}
                    helperText={errors.name?.message}
                  />
                )}
              />
            </FormControl>

            <FormControl>
              <FormLabel htmlFor="email">Email</FormLabel>
              <Controller
                name="email"
                control={control}
                rules={{
                  required: 'Email is required',
                  pattern: {
                    value: /\S+@\S+\.\S+/,
                    message: 'Please enter a valid email address.'
                  }
                }}
                render={({ field }) => (
                  <TextField
                    {...field}
                    id="email"
                    fullWidth
                    placeholder="your@email.com"
                    error={!!errors.email}
                    helperText={errors.email?.message}
                  />
                )}
              />
            </FormControl>

            <FormControl>
              <FormLabel htmlFor="password">Password</FormLabel>
              <Controller
                name="password"
                control={control}
                rules={{
                  required: 'Password is required',
                  minLength: {
                    value: 6,
                    message: 'Password must be at least 6 characters long'
                  }
                }}
                render={({ field }) => (
                  <TextField
                    {...field}
                    id="password"
                    fullWidth
                    type="password"
                    placeholder="••••••"
                    error={!!errors.password}
                    helperText={errors.password?.message}
                  />
                )}
              />
            </FormControl>
            <MuiPhoneNumber
              defaultCountry='in'
              onChange={handleOnChange}
              value={phoneNumber}
            />

            {/* <FormControlLabel
              control={
                <Controller
                  name="allowExtraEmails"
                  control={control}
                  render={({ field }) => (
                    <Checkbox {...field} color="primary" />
                  )}
                />
              }
              label="I want to receive updates via email."
            /> */}

            <Button type="submit" fullWidth variant="contained">
              Sign up
            </Button>
          </Box>
          {/* <Divider>
            <Typography sx={{ color: 'text.secondary' }}>or</Typography>
          </Divider> */}
          {/* <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <Button
              fullWidth
              variant="outlined"
              onClick={() => alert('Sign up with Google')}
              startIcon={<GoogleIcon />}
            >
              Sign up with Google
            </Button>
            <Button
              fullWidth
              variant="outlined"
              onClick={() => alert('Sign up with Facebook')}
              startIcon={<FacebookIcon />}
            >
              Sign up with Facebook
            </Button>
            <Typography sx={{ textAlign: 'center' }}>
              Already have an account?{' '}
              <Link
                href="/"
                variant="body2"
                sx={{ alignSelf: 'center' }}
              >
                Sign in
              </Link>
            </Typography>
          </Box> */}
          <Divider>or</Divider>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <Typography sx={{ textAlign: 'center' }}>
              Already have an account? &nbsp; 
              <Link
                href="/auth/login"
                variant="body2"
                sx={{ alignSelf: 'center' }}
              >
                Sign in
              </Link>
            </Typography>
          </Box>
        </Card>
      </SignUpContainer>
    </AppTheme>
  );
}