import React, { useState, useEffect } from 'react';
import sortBy from 'lodash/sortBy';
import 'mantine-datatable/styles.css';
import Tippy from '@tippyjs/react';
import showMessage from './Message';
import { DataTable, type DataTableSortStatus } from '@/components/Shared/DataTable';

function ListGrid(props: any) {
    const { rowData } = props;
    const PAGE_SIZES = [10, 20, 30, 50, 100];
    const [page2, setPage2] = useState(1);
    const [pageSize2, setPageSize2] = useState(PAGE_SIZES[0]);
    const [filteredItems, setFilteredItems] = useState<any>(rowData);
    const [search, setSearch] = useState('');
    const [search2, setSearch2] = useState('');
    const [isMounted, setIsMounted] = useState(false);
    useEffect(() => {
        setIsMounted(true);
    }, []);
    const [initialRecords2, setInitialRecords2] = useState(sortBy(rowData, 'nama_produk'));
    const [recordsData2, setRecordsData2] = useState(initialRecords2);
    const [sortStatus2, setSortStatus2] = useState<DataTableSortStatus<any>>({
        columnAccessor: 'nama_produk',
        direction: 'asc',
    });

    const [defaultParams] = useState({
        id: null,
        nama_produk: '',
        qty: '',
        harga_awal: '',
        harga_jual: '',
        kadar: '',
    });

    const [addProductModal, setAddProductModal] = useState<any>(false);

    const [params, setParams] = useState<any>(JSON.parse(JSON.stringify(defaultParams)));
    useEffect(() => {
        const data = sortBy(initialRecords2, sortStatus2.columnAccessor);
        setInitialRecords2(sortStatus2.direction === 'desc' ? data.reverse() : data);
        setPage2(1);
    }, [sortStatus2]);
    const editProduct = (id: any = null) => {
        const json = JSON.parse(JSON.stringify(defaultParams));
        setParams(json);
        if (id) {
            let json1 = JSON.parse(JSON.stringify(id));
            setParams(json1);
        }
        setAddProductModal(true);
    };

    useEffect(() => {
        setInitialRecords2(() => {
            return rowData.filter((item: any) => {
                return (
                    item.nama_produk.toLowerCase().includes(search.toLowerCase()) ||
                    item.qty.toString().toLowerCase().includes(search.toLowerCase()) ||
                    item.harga_awal.toString().toLowerCase().includes(search.toLowerCase()) ||
                    item.harga_jual.toString().toLowerCase().includes(search.toLowerCase()) ||
                    item.kadar.toLowerCase().includes(search.toLowerCase())
                );
            });
        });
    }, [search2]);

    return (
        <div className="panel mt-6">
            <div className="mb-5 flex flex-col gap-5 md:flex-row md:items-center">
                <h5 className="text-lg font-semibold dark:text-white-light">All Products</h5>
                <div className="ltr:ml-auto rtl:mr-auto">
                    <input type="text" className="form-input w-auto" placeholder="Search..." value={search2} onChange={(e) => setSearch2(e.target.value)} />
                </div>
            </div>
            <div className="datatables">
                {isMounted && (
                    <DataTable
                        className="table-hover whitespace-nowrap"
                        records={recordsData2}
                        columns={[
                            {
                                accessor: 'nama_produk',
                                title: 'Name',
                                sortable: true,
                                render: ({ nama_produk, id }) => (
                                    <div className="flex w-max items-center">
                                        <img className="h-9 w-9 rounded-full object-cover ltr:mr-2 rtl:ml-2" src="https://via.placeholder.com/50" alt="" />
                                        <div>{nama_produk}</div>
                                    </div>
                                ),
                            },
                            {
                                accessor: 'qty',
                                title: 'Quantity',
                            },
                            { accessor: 'harga_awal', title: 'Harga Awal' },
                            { accessor: 'harga_jual', title: 'Harga Jual' },
                            { accessor: 'kadar', title: 'Kadar' },
                            {
                                accessor: 'action',
                                title: 'Action',
                                titleClassName: '!text-center',
                                render: ({ id }) => (
                                    <div className="mx-auto flex w-max items-center gap-2">
                                        <button type="button" className="btn btn-outline-primary w-1/2" onClick={() => editProduct(id)}>
                                            Edit
                                        </button>
                                        <Tippy content="Delete">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5">
                                                <path
                                                    opacity="0.5"
                                                    d="M9.17065 4C9.58249 2.83481 10.6937 2 11.9999 2C13.3062 2 14.4174 2.83481 14.8292 4"
                                                    stroke="currentColor"
                                                    strokeWidth="1.5"
                                                    strokeLinecap="round"
                                                />
                                                <path d="M20.5001 6H3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                                                <path
                                                    d="M18.8334 8.5L18.3735 15.3991C18.1965 18.054 18.108 19.3815 17.243 20.1907C16.378 21 15.0476 21 12.3868 21H11.6134C8.9526 21 7.6222 21 6.75719 20.1907C5.89218 19.3815 5.80368 18.054 5.62669 15.3991L5.16675 8.5"
                                                    stroke="currentColor"
                                                    strokeWidth="1.5"
                                                    strokeLinecap="round"
                                                />
                                                <path opacity="0.5" d="M9.5 11L10 16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                                                <path opacity="0.5" d="M14.5 11L14 16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                                            </svg>
                                        </Tippy>
                                    </div>
                                ),
                            },
                        ]}
                        onRowContextMenu={() => {
                            showMessage({ msg: 'User has been edit successfully.' });
                        }}
                        totalRecords={initialRecords2.length}
                        recordsPerPage={pageSize2}
                        page={page2}
                        onPageChange={(p) => setPage2(p)}
                        recordsPerPageOptions={PAGE_SIZES}
                        onRecordsPerPageChange={setPageSize2}
                        sortStatus={sortStatus2}
                        onSortStatusChange={setSortStatus2}
                        minHeight={200}
                        paginationText={({ from, to, totalRecords }) => `Showing  ${from} to ${to} of ${totalRecords} entries`}
                    />
                )}
            </div>
        </div>
    );
}

export default ListGrid;