import React, {ReactNode, useEffect, useState} from 'react';
import CreateButton from "../../../UI/CreateButton/CreateButton";
import AddUser from "../../../SVG/AddUser";
// import {getMyTickets} from "../../../../API/support";
import SearchBar from "../../../UI/SearchBar/SearchBar";
import {RecordsResponse} from "../../../../models/Axios";
import TicketList from "./ticket-list";
import Pagination from "../../../UI/Pagination/Pagination";
import useLoading from "../../../../hooks/useLoading";
import {toastError} from "../../../../services/toaster";
import SearchIcon from '../../../SVG/SearchIcon';
import './support-ticket-list.scss';
import {getInvitationStatuses} from "../../../../API/dpass";
import ListStatusFilters from "../../../UI/StatusFilter/ListStatusFilters";

type SupportTicketsListProps = {
    children?: ReactNode
}


// const InitParams: GetMyTicketsParams = {
//     ticket_statuses: [],
//     page: 1,
//     page_size: 10,
//     search: ''
// }
const SupportTicketsList = ({children}: SupportTicketsListProps) => {


    // const [ticketsParams, setTicketsParams] = useState(InitParams)
    // const [myTickets, setMyTickets] = useState<RecordsResponse<Ticket>>()
    // const [loading, setLoading] = useLoading(true);
    // const [TicketsSum, setTicketsSum] = useState<number>();

    /**
     * Fetch and update state
     */
    // const fetchTickets = async () => {
    //     try {
    //         setLoading(true)
    //         const res = await getMyTickets(ticketsParams)
    //         setMyTickets(res.data)
    //         setTicketsSum(res.data.metadata.total_count);
    //
    //     } catch (e) {
    //         toastError('Φαίνεται ότι η ενέργεια δεν ολοκληρώθηκε. Παρακαλούμε προσπαθήστε ξανά')
    //     } finally {
    //         setLoading(false)
    //     }
    // }

    /**
     * Update invitations on mount and any change of filters
     */
    // useEffect(() => {
    //     fetchTickets()
    //
    // }, [ticketsParams])

    return (
        <div className={'invitations-management-list'}>
            <div className="search-wrapper row mb-3 gap-4">
                <div className="col">

                    <SearchBar
                        onSearch={(s) => {
                            // setTicketsParams({
                            //     ...ticketsParams,
                            //     ticket_statuses: [],
                            //     page: 1,
                            //     search: s
                            // })
                        }}
                        placeholder={`Αναζητήστε στα αιτήματα`
                         // (${ticketsSum})
                        }
                    >
                        <div className='img-container'><SearchIcon/></div>
                        <span className='search-divider'></span>
                    </SearchBar>
                </div>
                <div className="col-auto">
                    <CreateButton>
                        <AddUser></AddUser>
                        <p>Δημιουργια Ticket</p>
                    </CreateButton>
                </div>
            </div>

            {/*<div className="d-flex mb-5">*/}
            {/*    <ListStatusFilters*/}
            {/*        counters={myTickets && myTickets.counters}*/}
            {/*        fetchStatuses={getTicketsStatuses}*/}
            {/*        selectedStatuses={ticketsParams.ticket_statuses}*/}
            {/*        setFilteredStatuses={(newStatuses) => setTicketsParams({*/}
            {/*            ...ticketsParams,*/}
            {/*            page:1,*/}
            {/*            ticket_statuses: newStatuses*/}
            {/*        })}*/}
            {/*    />*/}
            {/*</div>*/}

            {/*<div className={'mb-5'}>*/}
            {/*    {*/}
            {/*        myTickets &&*/}
            {/*        <TicketList*/}
            {/*            tickets={myTickets}*/}
            {/*            updateTickets={fetchTickets}*/}
            {/*        />*/}
            {/*    }*/}
            {/*</div>*/}


            {/*{*/}
            {/*    myTickets &&*/}
            {/*    <Pagination*/}
            {/*        theme={'dua-list'}*/}
            {/*        currentPage={ticketsParams.page}*/}
            {/*        totalPages={myTickets.metadata.page_count}*/}
            {/*        setPage={(p) => {*/}
            {/*            setTicketsParams({*/}
            {/*                ...ticketsParams,*/}
            {/*                page: p*/}
            {/*            })*/}
            {/*        }}*/}

            {/*    />*/}
            {/*}*/}

        </div>
    );
}

export default SupportTicketsList;