import { Box, Button } from '@mui/material';
import { useRouter } from 'next/dist/client/router';
import { useState } from 'react';

const row = {
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
};

const labelColumn = {
  fontWeight: 'bold',
  width: '25%',
};

const valueColumn = {
  width: '75%',
};

const cardTitle = {
  fontWeight: 'bold',
  fontSize: '1.2rem',
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'center',
};

export default ({ queue_data, show_edit_delete = true }) => {
  const router = useRouter();

  const [changing_page, setChangingPage] = useState(false);

  function handleDeleteItemClick({ queue_type, id }) {
    setChangingPage(true);
    fetch(`/api/patient_queue/delete_queue_item?queue_type=${queue_type}&id=${id}`, {
      method: 'GET',
    })
      .then(response => response.json())
      .then(data => {
        if (data.status === 'OK') {
          console.log('item deleted');
          alert('item deleted');
          router.reload();
        } else {
          console.error(data.message);
        }
      })
      .catch(err => {
        console.error(err);
        alert('error during removing queue');
      });
  }

  function handleEditItemClick({ id }) {
    setChangingPage(true);
    router.push(`/NonUrgentCaseEdit/${id}`);
  }

  return (
    <Box
      sx={{
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        margin: '1rem 0',
      }}
    >
      <Box
        sx={{
          width: '90vw',
          border: '1px solid gray',
          borderRadius: '1rem',
          display: 'flex',
          flexDirection: 'column',
          padding: '1rem',
        }}
      >
        <Box sx={cardTitle}>{`non-urgent-case ${queue_data.id}`}</Box>
        <Box sx={{ display: 'flex', flexDirection: 'column', padding: '0.15rem 0.15rem' }}>
          <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: '0.5rem', marginTop: '1rem' }}>
            <Box sx={{ flexGrow: 1, fontSize: '0.8rem' }}>
              <Box sx={row}>
                <Box sx={labelColumn}>Name</Box>
                <Box sx={valueColumn}>{queue_data.name || ''}</Box>
              </Box>
              <Box sx={row}>
                <Box sx={labelColumn}>HKID</Box>
                <Box sx={valueColumn}>{queue_data.hkid || '-'}</Box>
              </Box>
              <Box sx={row}>
                <Box sx={labelColumn}>Mobile</Box>
                <Box sx={valueColumn}>{queue_data.mobile || '-'}</Box>
              </Box>
            </Box>
            <Box sx={{ display: show_edit_delete ? 'flex' : 'none', flexDirection: 'column', gap: '1rem' }}>
              <Button
                disabled={changing_page}
                size='small'
                variant='contained'
                onClick={() => handleDeleteItemClick({ queue_type: 'non-urgent', id: queue_data.id })}
              >
                delete
              </Button>
              <Button
                disabled={changing_page}
                size='small'
                variant='contained'
                onClick={() => handleEditItemClick({ id: queue_data.id })}
              >
                edit
              </Button>

              {/*  */}
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};