import * as React from 'react';
import PromocoesController from '@/Tools/Promocoes';
import Grid from '@mui/material/Grid';
import Card from '@mui/material/Card';
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 Checkbox from '@mui/material/Checkbox';
import Button from '@mui/material/Button';
import AlertasGenericos from './Alertas';
import Box from '@mui/material/Box';

// Função para identificar os dias com promoção ativa
function diasDePromocao(dados) {
    const dias = {
        segunda: 'segunda',
        terca: 'terca',
        quarta: 'quarta',
        quinta: 'quinta',
        sexta: 'sexta',
        sabado: 'sabado',
        domingo: 'domingo',
    };

    // Filtra os dias em que a promoção está ativa ('S') e junta-os em uma string separada por vírgula
    return Object.keys(dias)
        .filter(dia => dados[dia] === 'S')
        .map(dia => dias[dia])
        .join(', ');
}


export default function CriaNovaPromocao() {

    // Filtros
    const [grupos, setgrupos] = React.useState([]);
    const [sub_grupos, setsub_grupos] = React.useState([]);
    const [produtos, setprodutos] = React.useState([]);

    // Produtos na tabela esquerda.
    const [produtos_filtrados, setProdutos_filtrados] = React.useState([]);

    // Produtos na tabela direita. 
    const [produtos_tabela_direita, setprodutos_tabela_direita] = React.useState([]);

    const [produtos_default_tabela_esquerda, setprodutos_default_tabela_esquerda] = React.useState([]);

    // Checkbox esquerdo
    const [check_box_esquerdo, setcheck_box_esquerdo] = React.useState([]);

    // Checkbox direito
    const [check_box_direito, setcheck_box_direito] = React.useState([]);


    // CABEÇALHO
    const [novo_preco_promocional, setNovo_preco_promocional] = React.useState(0);
    const [porcentagem_de_desconto, setporcentagem_de_desconto] = React.useState(0);

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

    // AGRUPA DIAS DA SEMANA.
    const [dias_da_semana, setdDias_da_semana] = React.useState([]);

    // DATA DO FIM DA PROMOÇÃO
    const [data_fim_promocao, setData_fim_promocao] = React.useState("");

    // Carrega todos os grupos
    React.useEffect(() => {
        async function getGrupos() {
            let dados = await PromocoesController.GetDadosInicias();

            setgrupos(dados.grupos);
            setsub_grupos(dados.sub_grupos);
            setprodutos(dados.produtos);
        }
        getGrupos();
    }, [])

    // PRODUTOS FILTRADOS PELO SELECT
    function filtarPorGrupo(cod_do_grupo) {
        let filtro = produtos.filter(cod => cod.cod_grupo == cod_do_grupo)
        setProdutos_filtrados(filtro);
        setprodutos_default_tabela_esquerda(filtro);
    }

    // PRODUTOS FILTRADOS PELO SELECT
    function filtarSubgrupoPorGrupo(cod_sub_grupo) {
        let filtro = produtos.filter(cod => cod.cod_subgrupo == cod_sub_grupo)
        setProdutos_filtrados(filtro)
        setprodutos_default_tabela_esquerda(filtro);
    }

    // SELECIONA CHEKBOX NA TABELA DA ESQUERDA
    function selecionarCheckTabelaEsquerda(cod_item) {

        setcheck_box_esquerdo((prevNumeros) => {
            // Verifica se o número já está no array
            if (prevNumeros.includes(cod_item)) {
                // Remove o número se já existir
                return prevNumeros.filter(n => n !== cod_item);
            } else {
                // Adiciona o número se não existir
                return [...prevNumeros, cod_item];
            }
        });
    }

    // SELECIONA CHEKBOX NA TABELA DA DIREITA
    function selecionarCheckTabelaDireita(cod_item) {

        setcheck_box_direito((prevNumeros) => {
            // Verifica se o número já está no array
            if (prevNumeros.includes(cod_item)) {
                // Remove o número se já existir
                return prevNumeros.filter(n => n !== cod_item);
            } else {
                // Adiciona o número se não existir
                return [...prevNumeros, cod_item];
            }
        });
    }

    function TransferirProdutosParaDireita() {

        let lista_de_cod = check_box_esquerdo;
        let produtos_da_lista_esquerda = produtos_filtrados


        if (data_fim_promocao == "") {
            mostrarAlerta(`Escolha a data do fim da promoção.`);
            return
        }

        if (novo_preco_promocional == 0) {
            mostrarAlerta(`Escolha o novo valor da promoção.`);
            return
        }

        // Copia os produtos que serão transferidos para a direita.
        const produtos_para_direita = JSON.parse(JSON.stringify(
            produtos_da_lista_esquerda.filter(produto =>
                lista_de_cod.includes(produto.cod_produto)
            )
        ));

        // Removo os produtos selecionados na esquerda
        const produtos_para_reinserir_na_esquerda = JSON.parse(JSON.stringify(
            produtos_da_lista_esquerda.filter(produto =>
                !lista_de_cod.includes(produto.cod_produto)
            )
        ));
        setProdutos_filtrados(produtos_para_reinserir_na_esquerda);
        selecionarCheckTabelaEsquerda([]);

        // chamo a função para inserir o novo preço e pupola tabela na diretia
        calcuarDecontosPopularTabelaDireita(produtos_para_direita);
    }


    function TransferirProdutosParaEsquerda() {

        let lista_de_cod = check_box_direito;
        let produtos_da_lista_esquerda = produtos_default_tabela_esquerda



        if (lista_de_cod.length == 0) {
            mostrarAlerta(`Escolha os produtos.`);
            return
        }

        // Copia os produtos que serão transferidos para a esquerda.
        const produtos_que_estao_na_direita = JSON.parse(JSON.stringify(
            produtos_da_lista_esquerda.filter(produto =>
                lista_de_cod.includes(produto.cod_produto)
            )
        ));




        //deve juntar os produtos que estão na esquerda com os produtos default da tabela da direita
        setProdutos_filtrados([])
        let lista_de_produto_defaut = [...produtos_filtrados, ...produtos_que_estao_na_direita]
        setProdutos_filtrados(lista_de_produto_defaut);
        setcheck_box_direito([])

        // Removo os produtos da lista da direita que eu marquei
        const remove_produtos_que_estao_na_direita = JSON.parse(JSON.stringify(
            produtos_tabela_direita.filter(produto =>
                !lista_de_cod.includes(produto.cod_produto)
            )
        ));
        setcheck_box_direito([]);
        setprodutos_tabela_direita(remove_produtos_que_estao_na_direita);


        console.log("teste de dados ::::::::", remove_produtos_que_estao_na_direita)





    }


    async function calcuarDecontosPopularTabelaDireita(dados) {


        if (dados.length == 0) {
            mostrarAlerta(`Escolha os produtos para a apromoção`);
            return
        }


        let lista_de_produtos_com_desconto = await PromocoesController.CalcularDesconto(
            dados,
            porcentagem_de_desconto,
            novo_preco_promocional
        );

        if (lista_de_produtos_com_desconto.status == 'erro') {
            alert("erro")
            return
        }

        // caso não tenha dados então adiciona
        if (lista_de_produtos_com_desconto.dados.length == 0) {
            setprodutos_tabela_direita(produtos_com_novo_preco_promocional)
            return
        }
        setcheck_box_esquerdo([]);
        // se ja tiver somente concatena 
        let lista_de_prods = [...produtos_tabela_direita, ...lista_de_produtos_com_desconto.dados]
        setprodutos_tabela_direita(lista_de_prods)
    }

    // A grupa os dias.
    function GereciarDias(dia) {
        if (dias_da_semana.includes(dia)) {
            setdDias_da_semana(prevState => prevState.filter(d => d !== dia));
        } else {
            setdDias_da_semana(prevState => [...prevState, dia]);
        }
    }


    async function confirmarPromocao() {


        if (data_fim_promocao == "") {
            mostrarAlerta(`Escolha a data do fim da promoção.`);
            return
        }

        if (novo_preco_promocional == 0) {
            mostrarAlerta(`Escolha o novo valor da promoção.`);
            return
        }

        if (produtos_tabela_direita.length == 0) {
            mostrarAlerta(`Escolha os produtos da promoção.`);
            return
        }



        produtos_tabela_direita.forEach((item, index) => {

            item['NovoPreco'] = novo_preco_promocional
            item['novo_dia_de_promocao'] = data_fim_promocao
            item['nova_data_final'] = data_fim_promocao

        })


        let objetoFinal = {
            produtos: produtos_tabela_direita,
            dias: dias_da_semana
        }


        let resposta = await PromocoesController.AddNovaPromocao(objetoFinal);
        if (resposta.retorno == 'erro') {
            setTipoAlerta('warning');
            mostrarAlerta(resposta.message);
            return
        };
        setTipoAlerta('success');
        mostrarAlerta("Promoção cadastrada com sucesso.");
        location.reload();
    }


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

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

    return (
        <>

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

            />

            {/* CABEÇALHO */}
            < Card
                elevation={0}
                sx={{
                    height: 70,
                    display: 'flex',
                    alignItems: 'center',
                    marginBottom: 5,
                    padding: 5
                }
                }>
                <Grid
                    xs={12}
                    container
                    spacing={2}
                >

                    <Grid item xs={3}>
                        <span>GRUPOS</span>
                        <select
                            id="cod_grupo"
                            name="cod_grupo"
                            className="mt-1 block w-full"
                            style={{ borderRadius: '0.375rem', borderColor: 'rgb(209 213 219)' }}
                            onChange={(e) => { filtarPorGrupo(e.target.value) }}
                        >
                            <option value="" disabled>Selecione uma opção</option>
                            {
                                grupos != undefined ?
                                    grupos.map((item, index) => {
                                        return (
                                            <option value={item.cod_grupo}>
                                                {item.nome}
                                            </option>
                                        )
                                    })
                                    :
                                    <option>Sem dados</option>
                            }

                        </select>
                    </Grid>

                    <Grid item xs={3}>

                        <span>SUBGRUPOS</span>
                        <select
                            id="cod_grupo"
                            name="cod_grupo"
                            className="mt-1 block w-full"
                            style={{ borderRadius: '0.375rem', borderColor: 'rgb(209 213 219)' }}
                            onChange={(e) => { filtarSubgrupoPorGrupo(e.target.value) }}
                        >

                            <option value="" disabled>Selecione uma opção</option>
                            {

                                sub_grupos != null ?

                                    sub_grupos.map((item, index) => {
                                        return (
                                            <option value={item.cod_subgrupo}>
                                                {item.nome}
                                            </option>
                                        )
                                    })

                                    :
                                    <option>Sem opções </option>
                            }

                        </select>
                    </Grid>

                    <Grid item xs={3}>
                        <span>DATA DE VALIDADE</span>
                        <input
                            id="data"
                            name="data"
                            type='date'
                            className="mt-1 block w-full"
                            style={{ borderRadius: '0.375rem', borderColor: 'rgb(209 213 219)' }}
                            onChange={(e) => { setData_fim_promocao(e.target.value) }}
                        />
                    </Grid>

                    <Grid item xs={3}>
                        <span>Preço promocional</span>
                        <input
                            id="preco_promocional"
                            name="preco_promocional"
                            type='Number'
                            className="mt-1 block w-full"
                            style={{ borderRadius: '0.375rem', borderColor: 'rgb(209 213 219)' }}
                            onChange={(e) => { setNovo_preco_promocional(e.target.value) }}
                        />
                    </Grid>

                    {/* <Grid item xs={3}>
                        <span>Desconto por porcentagem</span>
                        <input
                            id="preco_promocional_porcentagem"
                            name="preco_promocional"
                            type='Number'
                            className="mt-1 block w-full"
                            style={{ borderRadius: '0.375rem', borderColor: 'rgb(209 213 219)' }}
                            onChange={(e) => { setporcentagem_de_desconto(e.target.value) }}
                        />
                    </Grid> */}

                </Grid>
            </Card >
            <Grid item xs={12}>

                <Box sx={{
                    display: 'flex',
                    justifyContent: 'space-around',
                    alignItems: 'center',
                    width: '97%',
                    margin: 'auto',
                    marginBottom: 3
                }}>
                    <Checkbox
                        onClick={() => { GereciarDias("segunda") }} />
                    <span>Segunda</span>
                    <Checkbox
                        onClick={() => { GereciarDias("terca") }}
                    />
                    <span>Terça</span>
                    <Checkbox
                        onClick={() => { GereciarDias("quarta") }}
                    />
                    <span>Quarta</span>
                    <Checkbox
                        onClick={() => { GereciarDias("quinta") }}
                    />
                    <span>Quinta</span>
                    <Checkbox
                        onClick={() => { GereciarDias("sexta") }}
                    />
                    <span>Sexta</span>
                    <Checkbox
                        onClick={() => { GereciarDias("sabado") }}
                    />
                    <span>Sábado</span>
                    <Checkbox
                        onClick={() => { GereciarDias("domingo") }}
                    />
                    <span>Domingo</span>
                </Box>

                <Button
                    onClick={confirmarPromocao}
                    sx={{ float: 'right', mb: 5 }}
                    variant="contained">
                    Confirmar promoção
                </Button>
            </Grid>

            <Grid
                alignItems='center'
                justifyContent='center'
                margin='auto'
                container
                xs={12}
            >
                <Grid item xs={5} md={5}>
                    <TableContainer
                        elevation={9}
                        sx={{
                            width: '100%',
                            margin: 'auto',
                            maxHeight: 400
                        }} component={Paper}>
                        <Table aria-label="simple table">
                            <TableHead>
                                <TableRow>
                                    <TableCell align="center">Selecionar</TableCell>
                                    <TableCell align="center">COD</TableCell>
                                    <TableCell align="center">Nome</TableCell>
                                    <TableCell align="center">Valor</TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {produtos_filtrados.map((row) => (
                                    <TableRow
                                        key={row.cod_produto}
                                        sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                                    >

                                        <TableCell align="center">
                                            <Checkbox onClick={() => { selecionarCheckTabelaEsquerda(row.cod_produto) }} />
                                        </TableCell>
                                        <TableCell align="center">{row.cod_produto}</TableCell>
                                        <TableCell align="center">{row.nome}</TableCell>
                                        <TableCell align="center">{row.valor}</TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </TableContainer>
                </Grid>

                <Grid
                    justifyContent='center'
                    alignItems='center'
                    container
                    xs={2}
                    md={1}
                    sx={{ gap: 2 }}
                >
                    <Button
                        onClick={TransferirProdutosParaDireita}
                        color="success"
                        variant="contained"
                    >
                        {'>'}
                    </Button>
                    <Button
                        onClick={TransferirProdutosParaEsquerda}
                        color="success"
                        variant="contained"
                    >
                        {'<'}
                    </Button>
                </Grid>

                <Grid item xs={5} md={5}>

                    <TableContainer
                        elevation={9}
                        sx={{
                            width: '100%',
                            margin: 'auto',
                            maxHeight: 400
                        }} component={Paper}>
                        <Table aria-label="simple table">
                            <TableHead>
                                <TableRow>
                                    <TableCell align="center">Selecionar</TableCell>
                                    <TableCell align="center">COD</TableCell>
                                    <TableCell align="center">Nome</TableCell>
                                    <TableCell align="center">Valor Promocional</TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {produtos_tabela_direita.map((row) => (
                                    <TableRow
                                        key={row.cod_produto}
                                        sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                                    >

                                        <TableCell align="center">
                                            <Checkbox onClick={() => { selecionarCheckTabelaDireita(row.cod_produto) }} />
                                        </TableCell>
                                        <TableCell align="center">{row.cod_produto}</TableCell>
                                        <TableCell align="center">{row.nome}</TableCell>
                                        <TableCell sx={{ color: 'green' }} align="center">{row.valor_promocional}</TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </TableContainer>


                </Grid>

            </Grid>

        </>

    )
}