import React, { useEffect } from 'react';

import MailIcon from '@mui/icons-material/Mail';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import {
  Box,
  Button,
  Checkbox,
  Divider,
  Drawer,
  FormControlLabel,
  FormGroup,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  TextField,
} from '@mui/material';
import Head from 'next/head';

import { ChevronLeftOutlined } from '@mui/icons-material';
import Loading from 'components/Loading';
import { useFormik } from 'formik';
import { useRouter } from 'next/dist/client/router';
import * as yup from 'yup';

const validationSchema = yup.object({
  patient_name: yup
    .string('Enter your name')
    .min(2, 'Name should be of minimum 2 characters length')
    .required('Name is required'),
  patient_hkid: yup
    .string('Enter your HKID')
    .matches(/^[A-Z]{1,2}[0-9]{6}\([0-9]\)$/, 'HKID should be in format of XX123456(1-9)')
    .required('HKID is required'),
  patient_age: yup
    .number('Enter your age')
    .min(1, 'Age should be greater than 0')
    .max(90, 'Age should be less than 90')
    .required('Age is required'),
  patient_mobile: yup
    .string('Enter your mobile number')
    .matches(/^[0-9]{8}$/, 'Mobile number should be 8 numbers')
    .required('Mobile number is required'),
});

export default () => {
  const [open, setOpen] = React.useState(false);
  const [loading, setLoading] = React.useState(true);
  const [one_symptoms_selected, setOneSymptomsSelected] = React.useState(false);
  const router = useRouter();

  const toggleDrawer = newOpen => () => {
    setOpen(newOpen);
  };

  const formik = useFormik({
    initialValues: {
      patient_name: '',
      patient_hkid: '',
      patient_age: 0,
      patient_mobile: '',
      bruisesScratchesMinorBurns: false,
      chestPain: false,
      headache: false,
      myMuiCheck: false,
      nauseaAndVomiting: false,
      runnyOrStuffyNose: true,
      soreThroat: false,
    },
    validationSchema,
    onSubmit: values => {
      // alert(JSON.stringify(values, null, 2));
      fetch('/api/patient_queue/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ values }),
      })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            if (data.queue) {
              alert(`registered successfully, will assign you to ${data.queue} queue`);
            } else {
              alert(`registered successfully`);
            }
            localStorage.setItem('queue_type', data.queue);
            localStorage.setItem('queue_id', data.result.id);
            localStorage.setItem('queue_name', data.result.name);
            localStorage.setItem('queue_hkid', data.result.hkid);
            localStorage.setItem('queue_mobile', data.result.mobile);
            localStorage.setItem('queue_description', data.result.description);

            router.push('/PatientQueueDisplay');
          } else {
            // alert(data.message);
            alert('sorry there are something wrong, please try again');
          }
        })
        .catch(err => {
          console.error(err);
          alert('server error');
        });
    },
  });

  useEffect(() => {
    setOneSymptomsSelected(
      !(
        formik.values.bruisesScratchesMinorBurns ||
        formik.values.chestPain ||
        formik.values.headache ||
        formik.values.myMuiCheck ||
        formik.values.nauseaAndVomiting ||
        formik.values.runnyOrStuffyNose ||
        formik.values.soreThroat
      ),
    );
  }, [formik.values]);

  const DrawerList = (
    <Box sx={{ width: 250 }} role='presentation' onClick={toggleDrawer(false)}>
      <List>
        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
          <ListItem key={text} disablePadding>
            <ListItemButton>
              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
      <Divider />
      <List>
        {['All mail', 'Trash', 'Spam'].map((text, index) => (
          <ListItem key={text} disablePadding>
            <ListItemButton>
              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </Box>
  );

  useEffect(() => {
    if (localStorage.getItem('queue_id')) {
      router.push('/PatientQueueDisplay');
    } else {
      setLoading(false);
    }
  }, []);

  if (loading) {
    return <Loading />;
  }

  return (
    <>
      <Head>
        <title>dashboard - non-urgent case</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          minHeight: '90vh',
        }}
      >
        <form onSubmit={formik.handleSubmit}>
          <Box sx={{ marginLeft: '2rem', marginRight: '2rem' }}>
            <Box
              sx={{
                fontWeight: 'bold',
                fontSize: '1.1rem',
                marginTop: '1rem',
                marginBottom: '1rem',
              }}
            >
              Electronic Diagnosis Registration
            </Box>
            <TextField
              fullWidth
              variant='standard'
              id='patient_name'
              name='patient_name'
              label='Patient name'
              value={formik.values.patient_name}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              error={formik.touched.patient_name && Boolean(formik.errors.patient_name)}
              helperText={formik.touched.patient_name && formik.errors.patient_name}
            />
            <TextField
              fullWidth
              variant='standard'
              id='patient_hkid'
              name='patient_hkid'
              label='HKID'
              value={formik.values.patient_hkid}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              error={formik.touched.patient_hkid && Boolean(formik.errors.patient_hkid)}
              helperText={formik.touched.patient_hkid && formik.errors.patient_hkid}
            />
            <TextField
              fullWidth
              variant='standard'
              id='patient_age'
              name='patient_age'
              label='Age'
              value={formik.values.patient_age}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              error={formik.touched.patient_age && Boolean(formik.errors.patient_age)}
              helperText={formik.touched.patient_age && formik.errors.patient_age}
            />
            <TextField
              fullWidth
              variant='standard'
              id='patient_mobile'
              name='patient_mobile'
              label='Mobile'
              value={formik.values.patient_mobile}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              error={formik.touched.patient_mobile && Boolean(formik.errors.patient_mobile)}
              helperText={formik.touched.patient_mobile && formik.errors.patient_mobile}
            />

            <Box sx={{ marginTop: '2rem' }}>
              <FormGroup>
                <Box sx={{ marginTop: '1rem', marginBottom: '1rem' }}>Reason for seeking medical advice</Box>
                {formik.dirty && one_symptoms_selected ? (
                  <Box sx={{ color: 'red', fontSize: '0.8rem', fontWeight: 'bold' }}>
                    Please select at least one symptom
                  </Box>
                ) : (
                  <></>
                )}

                <FormControlLabel
                  control={<Checkbox />}
                  label='Runny or stuffy nose'
                  checked={formik.values.runnyOrStuffyNose}
                  onChange={() => formik.setFieldValue('runnyOrStuffyNose', !formik.values.runnyOrStuffyNose)}
                />
                <FormControlLabel
                  control={<Checkbox />}
                  label='sore throat'
                  checked={formik.values.soreThroat}
                  onChange={() => formik.setFieldValue('soreThroat', !formik.values.soreThroat)}
                />

                <FormControlLabel
                  control={<Checkbox />}
                  label='nausea and vomiting'
                  checked={formik.values.nauseaAndVomiting}
                  onChange={() => formik.setFieldValue('nauseaAndVomiting', !formik.values.nauseaAndVomiting)}
                />
                <FormControlLabel
                  control={<Checkbox />}
                  label='Headache (Semi-urgent)'
                  checked={formik.values.headache}
                  onChange={() => formik.setFieldValue('headache', !formik.values.headache)}
                />
                <FormControlLabel
                  control={<Checkbox />}
                  label='chest pain (Semi-urgent)'
                  checked={formik.values.chestPain}
                  onChange={() => formik.setFieldValue('chestPain', !formik.values.chestPain)}
                />
                <FormControlLabel
                  control={<Checkbox />}
                  label='Bruises, scratches, minor burns (Semi-urgent)'
                  checked={formik.values.bruisesScratchesMinorBurns}
                  onChange={() =>
                    formik.setFieldValue('bruisesScratchesMinorBurns', !formik.values.bruisesScratchesMinorBurns)
                  }
                />
              </FormGroup>
            </Box>
            <Box sx={{ marginTop: '1rem', display: 'flex', justifyContent: 'space-around' }}>
              <Button
                disabled={formik.isSubmitting}
                onClick={() => router.push('/')}
                variant='outline'
                startIcon={<ChevronLeftOutlined />}
              >
                Cancel
              </Button>
              {/*  */}
              <Button
                color='primary'
                variant='contained'
                type='submit'
                disabled={!(formik.isValid && formik.dirty && !formik.isSubmitting)}
              >
                Submit
              </Button>
            </Box>
          </Box>
        </form>
      </Box>

      <Drawer open={open} onClose={toggleDrawer(false)}>
        {DrawerList}
      </Drawer>
    </>
  );
};