import Search from 'antd/es/input/Search'
import styles from './produto.module.css';
import { Button, Popconfirm, Select, Space, Table } from 'antd'
import Column from 'antd/es/table/Column'
import { useDispatch, useSelector } from 'react-redux';
import { ParamsType } from '../../interfaces/ParamsType';
import { useEffect, useState } from 'react';
import { Produto } from '../../interfaces/Produto';
import {
    DeleteOutlined,
    EditOutlined,
    ShoppingCartOutlined
} from '@ant-design/icons';
import {
    getAllProdutos,
    getAllCategoria,
    deleteProduto
} from '../../slices/ProdutoSlice';
import {
    addItem
} from '../../slices/CarrinhoSlice';
import { useNavigate } from 'react-router-dom';
import { ItemCart } from '../../interfaces/ItemCart';

function Produtos() {

    const [nomeSearch, setNomeSearch] = useState('');
    const [categoriaFilter, setCategoriaFilter] = useState('');

    const dispatch = useDispatch<any>();
    const navigate = useNavigate();
    const { produtos, total, loading, categorias } = useSelector((state: any) => state.produto);

    const handleSearch = () => {
        const params: ParamsType = {
            pagination: {
                current: 1,
                pageSize: 5
            },
            filter: {
                nome: nomeSearch,
                categoria: categoriaFilter
            }
        }
        dispatch(getAllProdutos(params));
    }

    const handleDelete = (uid: string) => {
        dispatch(deleteProduto(uid));
    }

    const onChangePage = (page: any, size: any) => {

        const params: ParamsType = {
            pagination: {
                current: page,
                pageSize: size
            },
            filter: {
                nome: nomeSearch != '' ? nomeSearch : '',
                categoria: categoriaFilter
            }
        }

        dispatch(getAllProdutos(params));
    }

    const filterByCategoria = (categoriaUid: string) => {
        setCategoriaFilter(categoriaUid);

        const params: ParamsType = {
            pagination: {
                current: 1,
                pageSize: 5
            },
            filter: {
                nome: nomeSearch != '' ? nomeSearch : '',
                categoria: categoriaUid
            }
        }

        dispatch(getAllProdutos(params))
    }

    const addItemCart = (produto: any) => {
        
        const item:ItemCart = {

            produto:{
                uid:produto.key,
                nome:produto.name,
                preco:produto.preco,
                categoria:{
                    uid:""
                }
            },
            quantidade:1
        }
        dispatch(addItem(item));
    }

    useEffect(() => {
        dispatch(getAllProdutos(
            { pagination: { current: 1, pageSize: 5 } }
        ))
        dispatch(getAllCategoria());
    }, [])

    return (

        <div className={styles.container_table}>
            <div className={styles.container_table__filter}>
                <Select
                    style={{ width: 120 }}
                    defaultValue=''
                    options={
                        categorias.map((categoria: any) => (
                            { value: categoria.uid, label: categoria.nome }
                        )).concat({ value: '', label: 'Todos' })
                    }
                    onChange={filterByCategoria}
                />
                <Search
                    placeholder="Buscar por nome..."
                    enterButton
                    className={styles.container_table__search}
                    onSearch={handleSearch}
                    onChange={(value) => setNomeSearch(value.target.value)}
                />
            </div>
            <Table
                dataSource={
                    produtos.map((produto: Produto) => (
                        { key: produto.uid, name: produto.nome, preco: produto.preco, categoria: produto.categoria.nome }
                    ))
                }
                pagination={{
                    position: ["bottomCenter"],
                    total: total,
                    defaultPageSize: 5,
                    onChange(page, pageSize) {
                        onChangePage(page, pageSize)
                    },
                    pageSizeOptions: [5, 10, 15],
                    showSizeChanger: true,
                    onShowSizeChange(current, size) {
                        onChangePage(current, size)
                    },
                }}
                loading={loading}
                bordered={true}
            >
                <Column title="Nome" dataIndex="name" key="name" />
                <Column title="Preço" dataIndex="preco" key="preco" />
                <Column title="Categoria" dataIndex="categoria" key="categoria" />

                <Column
                    title="Actions"
                    key="action"
                    render={(_: any, record: any) => (
                        <Space size="middle">

                            <Popconfirm
                                title="Atenção:"
                                description="Confirme a ação de delete!"
                                onConfirm={() => { handleDelete(record.key) }}
                                okText="Sim"
                                cancelText="Não"
                            >
                                <Button value="small"
                                    type="primary"
                                    danger icon={<DeleteOutlined />}
                                    size="large"
                                    title="Deletar"
                                />
                            </Popconfirm>

                            <Button
                                value="small"
                                type="primary"
                                icon={<EditOutlined />} size="large"
                                title="Atualizar"
                                onClick={() => { navigate(`/cliente/new`) }}
                            />


                            <Button
                                value="small"
                                type="primary"
                                icon={<ShoppingCartOutlined />} size="large"
                                title="AddCart"
                                onClick={() => { addItemCart(record) }}
                            />
                        </Space>
                    )}
                />

            </Table>
        </div>
    )
}

export default Produtos;