'use client';

import * as React from 'react';
import { useRouter } from 'next/navigation';
import { COL_LESSON_TYPES } from '@/constants';
import deleteQuizLPCategories from '@/db/QuizListenings/Delete';
import { LoadingButton } from '@mui/lab';
import { Button, Container, Modal, Paper } from '@mui/material';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { Note as NoteIcon } from '@phosphor-icons/react/dist/ssr/Note';
import PocketBase from 'pocketbase';
import { useTranslation } from 'react-i18next';

import { logger } from '@/lib/default-logger';
import { toast } from '@/components/core/toaster';

export default function ConfirmDeleteModal({
  open,
  setOpen,
  idToDelete,
  reloadRows,
}: {
  open: boolean;
  setOpen: (b: boolean) => void;
  idToDelete: string;
  reloadRows: () => void;
}): React.JSX.Element {
  const { t } = useTranslation();

  // const handleClose = () => setOpen(false);
  function handleClose(): void {
    setOpen(false);
  }

  const [isDeleteing, setIsDeleteing] = React.useState(false);
  const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  };

  function handleUserConfirmDelete(): void {
    if (idToDelete) {
      setIsDeleteing(true);
      deleteQuizLPCategories(idToDelete)
        .then(() => {
          reloadRows();
          handleClose();
          toast(t('delete.success'));
        })
        .catch((err) => {
          // console.error(err)
          logger.error(err);
          toast(t('delete.error'));
        })
        .finally(() => {
          setIsDeleteing(false);
        });
    }
  }

  return (
    <div>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Container maxWidth="sm">
            <Paper sx={{ border: '1px solid var(--mui-palette-divider)', boxShadow: 'var(--mui-shadows-16)' }}>
              <Stack
                direction="row"
                spacing={2}
                sx={{ display: 'flex', p: 3 }}
              >
                <Avatar sx={{ bgcolor: 'var(--mui-palette-error-50)', color: 'var(--mui-palette-error-main)' }}>
                  <NoteIcon fontSize="var(--Icon-fontSize)" />
                </Avatar>
                <Stack spacing={3}>
                  <Stack spacing={1}>
                    <Typography variant="h5">{t('Delete Lesson Type ?')}</Typography>
                    <Typography
                      color="text.secondary"
                      variant="body2"
                    >
                      {t('Are you sure you want to delete lesson type ?')}
                    </Typography>
                  </Stack>
                  <Stack
                    direction="row"
                    spacing={2}
                    sx={{ justifyContent: 'flex-end' }}
                  >
                    <Button
                      color="secondary"
                      onClick={handleClose}
                    >
                      {t('Cancel')}
                    </Button>
                    <LoadingButton
                      color="error"
                      variant="contained"
                      onClick={(e) => {
                        handleUserConfirmDelete();
                      }}
                      loading={isDeleteing}
                    >
                      {t('Delete')}
                    </LoadingButton>
                  </Stack>
                </Stack>
              </Stack>
            </Paper>
          </Container>
        </Box>
      </Modal>
    </div>
  );
}