import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import DeleteIcon from '@mui/icons-material/Delete';
import CarrinhoController from '@/Tools/Carrinho';
import AlertasGenericos from './Alertas';
import EditIcon from '@mui/icons-material/Edit';
import Modal from '@mui/material/Modal';
import Grid from '@mui/material/Grid';
import { Box } from '@mui/material';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import CloseIcon from '@mui/icons-material/Close';
import CheckIcon from '@mui/icons-material/Check';
import Divider from '@mui/material/Divider';
import Button from '@mui/material/Button';

const style = {
  position: 'absolute',
  top: '40%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '90%',
  height: 370,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
};

export default function BasicTable({ Props, onresult, Combo = 'N', Carrinho }) {

  const [extras, setExtras] = React.useState(Props.Extas);
  const [bordas, setBordas] = React.useState(Props.Bordas);


  //MODAIS DE ALERTA
  const [alertaAberto, setAlertaAberto] = React.useState(false);
  const [alertaTexto, setAlertaTexto] = React.useState('');
  const [tipoAlerta, setTipoAlerta] = React.useState('');

  // MODAL DE EDIÇÃO


  // Abre modal de obs
  const [open, setOpen] = React.useState(false);

  // Recebe as obs de um produto.
  const [obs_produto, setobs_produto] = React.useState("");
  const [cod_do_produto_selecionado, setcod_do_produto] = React.useState("");



  const mostrarAlerta = (texto) => {
    setAlertaTexto(texto);
    setAlertaAberto(true);
    setTipoAlerta('success');
  };

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setAlertaAberto(false);
  };


  async function RemoveExtras(produto) {
    let resposta = await CarrinhoController.ExcluirProdutosExtras(produto.cod_produto);

    if (resposta === 'sucesso') {
      // Remove o produto extra do estado
      setExtras(prevExtras => prevExtras.filter(extra => extra.cod_produto !== produto.cod_produto));
      mostrarAlerta("Extra excluido com sucesso.")
      onresult("sucesso")
    }
  }

  async function RemoveBordas(produto) {
    let resposta = await CarrinhoController.ExcluirBordas(produto.cod_produto);

    if (resposta === 'sucesso') {
      // Remove o produto extra do estado
      setBordas(prevBorda => prevBorda.filter(borda => borda.cod_produto !== produto.cod_produto));
      mostrarAlerta("Borda excluida com sucesso.")
      onresult("sucesso")
    }
  }


  function AbriModalEditObsCombo(produto) {

    if (produto.quantidade_atual_do_produto == 0) {
      setTipoAlerta('warning');
      mostrarAlerta("Não é possível adicionar observação em um produto com quantidade zero.")
      return
    }


    // Abre o modal com a obs.
    if ('obs' in produto) {
      setobs_produto(produto.obs);
    }

    // Gravo o cod_do_produto
    setcod_do_produto(produto.cod_produto);
    setOpen(true);

  }

  async function salvarObs() {

    // Acho o produto pelo código pelo cod_do_produto e adiciona a obs nele

    let observacao_para_o_item = obs_produto;

    if (observacao_para_o_item == "") {
      setTipoAlerta('warning');
      mostrarAlerta("A observação não pode ser vazia.")
      return
    }

  
    const produtoModificado = extras.find((produto) => {
      if (produto.cod_produto === cod_do_produto_selecionado) {
        produto['obs'] = observacao_para_o_item;
        return true;  // Retorna o produto correspondente
      }
      return false;
    });


    // Grava os dados novamente;

    let salvar_obs = await CarrinhoController.SalvarObsCombo(produtoModificado);

    if (salvar_obs == "sucesso") { 
      mostrarAlerta('Observação aicionada com sucesso');
      setOpen(false);
      setobs_produto('');
      return
    }

    setTipoAlerta('warning');
    mostrarAlerta('Ocorreu um erro ao salvar sua observação.');
   


  }



  return (
    <>
      {/* ALERTAS*/}
      <AlertasGenericos
        aberto={alertaAberto}
        texto={alertaTexto}
        handleClose={handleClose}
        tipo={tipoAlerta}
      />


      {/* Modal generico  */}

      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Digite sua observação
          </Typography>

          <Grid
            container
            xs={12}
            direction='column'
          >
            <Grid
              sx={{ height: 220 }}
              item
            >
              <TextField
                onChange={(e) => { setobs_produto(e.target.value.slice(0, 150)) }}
                value={obs_produto}
                inputProps={{ maxLength: 150 }}
                sx={{ width: '100%', height: '1vh', mt: 2 }}
                id="outlined-basic"
                variant="outlined"
                multiline
                rows={7}
              />
            </Grid>
            <Grid
              direction='row'
              container md={12}
              justifyContent='space-around'
            >
              <Button
                onClick={() => {
                  setOpen(false);
                  setobs_produto('');
                }}
                variant="contained"
                color='error'
                endIcon={<CloseIcon></CloseIcon>}
              >
                Fechar
              </Button>
              <Button
                onClick={salvarObs}
                variant="contained"
                color='success'
                endIcon={<CheckIcon ></CheckIcon >}
              >
                Confirmar
              </Button>
            </Grid>
          </Grid>
        </Box>
      </Modal>




      <TableContainer sx={{ backgroundColor: '#afafaf42', width: '90%', margin: 'auto', borderRadius: 5 }} component={Paper}>
        <Table aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell>Nome</TableCell>

              {Props.Combo == 'N' ?
                <TableCell align="right">Excluir</TableCell>

                :
                <TableCell align="right">Editar</TableCell>
              }
            </TableRow>
          </TableHead>
          <TableBody>
            {extras != undefined ?
              extras.map((item) => (
                <TableRow
                  key={item.id}
                  sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                >
                  <TableCell component="th" scope="row">
                    {item.nome}
                  </TableCell>

                  {/* Se o produto for um combo não deve aparecer a opção de remover os itens. */}
                  {Props.Combo == 'N' ?
                    <TableCell
                      onClick={() => { RemoveExtras(item) }}
                      align="right">
                      <DeleteIcon color='error'></DeleteIcon>
                    </TableCell>
                    :
                    <TableCell
                      onClick={() => { AbriModalEditObsCombo(item) }}
                      align="right">
                      <EditIcon color='primary'></EditIcon>
                    </TableCell>
                  }
                </TableRow>
              ))
              :
              null
            }
          </TableBody>

          <TableBody>
            {bordas != undefined ?
              bordas.map((item) => (
                <TableRow
                  key={item.id}
                  sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                >
                  <TableCell component="th" scope="row">
                    {item.nome}
                  </TableCell>
                  <TableCell onClick={() => { RemoveBordas(item) }} align="right"><DeleteIcon color='error'></DeleteIcon></TableCell>
                </TableRow>
              ))
              :
              null
            }
          </TableBody>
        </Table>
      </TableContainer>
    </>

  );
}