import { Box, Button, FormControl, IconButton, InputAdornment, InputLabel, OutlinedInput, Stack } from '@mui/material';
import { Formik } from 'formik';
import Link from 'next/link';
import { useContext } from 'react';
import ShopfrontLayout from 'src/@core/layouts/ShopfrontLayout';
import { AuthContext } from 'src/contexts/auth';

function ChangePassword() {
  // let initialValues = { username: 'admin@vtkhmall.com', password: 'nimda' };
  const { username, performChangePassword } = useContext(AuthContext);
  let initialValues = {
    username,
    old_password: '',
    new_password: '',
    retype_password: '',
  };

  let onSubmit = async (values, { setSubmitting }) => {
    let { old_password, new_password, retype_password } = values;
    if (new_password != retype_password) {
      alert('Passwords do not match');
      return;
    } else {
      setSubmitting(true);

      // check password for empty string
      if (!old_password || !new_password || !retype_password) {
        alert('Password cannot be empty');
        setSubmitting(false);
        return;
      }

      await performChangePassword({
        username,
        old_password,
        new_password,
      });
    }
  };

  return (
    <>
      <Stack
        direction="row"
        maxHeight="100vh"
        sx={{ width: '100%' }}
        spacing={'2rem'}
        justifyContent={'center'}
        marginTop={'1rem'}
      >
        <Stack direction="column" spacing="2rem">
          <Box>
            <Link href="/shopfront/customer/profile">
              <Button>Orders</Button>
            </Link>
          </Box>
          <Box>
            <Link href="/shopfront/change_password">
              <Button>Change password</Button>
            </Link>
          </Box>
          <Box>
            <Link href="/shopfront">
              <Button>Back to shop</Button>
            </Link>
          </Box>
          <Box>
            <Link href="/shopfront/logout">
              <Button variant="contained">Logout</Button>
            </Link>
          </Box>
        </Stack>
        <Box sx={{ borderLeft: '1px solid rgba(32,32,32,0.2)' }}></Box>
        <Box sx={{ minWidth: '66vw' }}>
          <Stack direction="column" alignItems={'center'} spacing="2rem">
            <Formik initialValues={initialValues} onSubmit={onSubmit}>
              {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, setFieldValue }) => (
                <>
                  <FormControl>
                    <InputLabel htmlFor="auth-login-password">Old Password</InputLabel>
                    <OutlinedInput
                      label="Old Password"
                      value={values.password}
                      id="old-password"
                      onChange={handleChange('old_password')}
                      type={'password'}
                    />
                  </FormControl>
                  <FormControl>
                    <InputLabel htmlFor="auth-login-password">New Password</InputLabel>
                    <OutlinedInput
                      label="New Password"
                      value={values.password}
                      id="new-password"
                      onChange={handleChange('new_password')}
                      type={'password'}
                    />
                  </FormControl>
                  <FormControl>
                    <InputLabel htmlFor="auth-login-password">Retype new Password</InputLabel>
                    <OutlinedInput
                      label="Retype new Password"
                      value={values.password}
                      id="retype-password"
                      onChange={handleChange('retype_password')}
                      type={'password'}
                    />
                  </FormControl>

                  <Box>
                    <Button type="submit" onClick={handleSubmit}>
                      change password
                    </Button>
                  </Box>
                </>
              )}
            </Formik>
          </Stack>
        </Box>
      </Stack>
    </>
  );
}

ChangePassword.getLayout = page => <ShopfrontLayout>{page}</ShopfrontLayout>;

export default ChangePassword;
