import React, {ReactNode, useEffect, useState} from 'react';
import CreateButton from "../../../UI/CreateButton/CreateButton";
import AddUser from "../../../SVG/AddUser";
import {Invitation} from "../../../../models/DPass/Invitation";
import {getInvitationStatuses, getMyInvitations, getVisitStatuses} from "../../../../API/dpass";
import SearchBar from "../../../UI/SearchBar/SearchBar";
import {RecordsResponse} from "../../../../models/Axios";
import InvitationsList from "./InvitationsList";
import Pagination from "../../../UI/Pagination/Pagination";
import {GetMyInvitationParams} from "../../../../models/DPass/MyInvitations";
import ListStatusFilters from "../../../UI/StatusFilter/ListStatusFilters";
import useLoading from "../../../../hooks/useLoading";
import {toastError} from "../../../../services/toaster";
import SearchIcon from '../../../SVG/SearchIcon';
import './InvitationsManagementList.scss';

type VisitsManagementListProps = {
    children?: ReactNode
}


const InitParams: GetMyInvitationParams = {
    invitation_statuses: [],
    page: 1,
    page_size: 10,
    search: ''
}
const InvitationsManagementList = ({children}: VisitsManagementListProps) => {


    const [invitationsParams, setInvitationsParams] = useState(InitParams)
    const [myInvitations, setMyInvitations] = useState<RecordsResponse<Invitation>>()
    const [loading, setLoading] = useLoading(true);
    const [invitationsSum, setInvitationsSum] = useState<number>();

    /**
     * Fetch and update state
     */
    const fetchInvitations = async () => {
        try {
            setLoading(true)
            const res = await getMyInvitations(invitationsParams)
            setMyInvitations(res.data)
            setInvitationsSum(res.data.metadata.total_count);

        } catch (e) {
            toastError('Φαίνεται ότι η ενέργεια δεν ολοκληρώθηκε. Παρακαλούμε προσπαθήστε ξανά')
        } finally {
            setLoading(false)
        }
    }

    /**
     * Update invitations on mount and any change of filters
     */
    useEffect(() => {
        fetchInvitations()

    }, [invitationsParams])

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

                    <SearchBar
                        onSearch={(s) => {
                            setInvitationsParams({
                                ...invitationsParams,
                                invitation_statuses: [],
                                page: 1,
                                search: s
                            })
                        }}
                        placeholder={`Αναζητήστε στις προσκλήσεις (${invitationsSum})`}
                    >
                        <div className='img-container'><SearchIcon/></div>
                        <span className='search-divider'></span>
                    </SearchBar>
                </div>
                <div className="col-auto">
                    <CreateButton>
                        <AddUser></AddUser>
                        <p>Δημιουργια Προσκλησης</p>
                    </CreateButton>
                </div>
            </div>

            <div className="d-flex mb-5">
                <ListStatusFilters
                    counters={myInvitations && myInvitations.counters}
                    fetchStatuses={getInvitationStatuses}
                    selectedStatuses={invitationsParams.invitation_statuses}
                    setFilteredStatuses={(newStatuses) => setInvitationsParams({
                        ...invitationsParams,
                        page:1,
                        invitation_statuses: newStatuses
                    })}
                />
            </div>

            <div className={'mb-5'}>
                {
                    myInvitations &&
                    <InvitationsList
                        invitations={myInvitations}
                        updateInvitations={fetchInvitations}
                    />
                }
            </div>


            {
                myInvitations &&
                <Pagination
                    theme={'dua-list'}
                    currentPage={invitationsParams.page}
                    totalPages={myInvitations.metadata.page_count}
                    setPage={(p) => {
                        setInvitationsParams({
                            ...invitationsParams,
                            page: p
                        })
                    }}

                />
            }

        </div>
    );
}

export default InvitationsManagementList;