import React from 'react';

import SearchBar from "../../../UI/SearchBar/SearchBar";
import List from "./List";
import {EmailAccount, GetEmailAccountsParams} from "../../../../models/NetSupport/EmailAccount";
import ListStatusFilters from "../../../UI/StatusFilter/ListStatusFilters";
import './EmailAccountsList.scss';
import SearchIcon from "../../../SVG/SearchIcon";
import {getEmailAccounts, getEmailAccountTypes} from "../../../../API/net_support";
import useListControl from "../../../../hooks/useListControl";



const InitParams = () => {
    return {
        types: [],
        page: 1,
        page_size: 10,
        search: ''
    }
}
const EmailAccountsList = () => {

    const [emailAccounts, emailAccountsParams, setEmailAccountsParams, updateEmailAccounts] = useListControl<GetEmailAccountsParams, EmailAccount>(InitParams(), getEmailAccounts)

    const handleSearch = (s: string) => {
        setEmailAccountsParams({
            ...emailAccountsParams,
            page: 1,
            types: [],
            search: s
        })
    };

    return (
        <div className={'email-accounts-list'}>

            <div className="search-wrapper row mb-3 gap-4">
                <div className="col">

                    <SearchBar
                        onSearch={handleSearch}
                        placeholder={`Αναζητήστε στους λογαριασμούς με βάση το ονομα, επίθετο ή email του χρήστη`}
                        value={emailAccountsParams.search ?? ''}
                    >
                        <div className='img-container'><SearchIcon/></div>
                        <div className='search-divider'></div>
                    </SearchBar>
                </div>
            </div>


            <div className="d-flex mb-5">
                {((emailAccounts && emailAccounts.records.length !== 0) || (emailAccounts && emailAccounts.records.length == undefined)) &&
                <ListStatusFilters
                    filteredKey={'name'}
                    counters={emailAccounts && emailAccounts.counters}
                    fetchStatuses={getEmailAccountTypes}
                    selectedStatuses={emailAccountsParams.types}
                    setFilteredStatuses={(newTypes) => setEmailAccountsParams({
                        ...emailAccountsParams,
                        page:1,
                        types: newTypes
                    })}
                />}
            </div>

            <div className={'mb-5'}>
                {
                    emailAccounts &&
                    <List
                        setPage={(p) => {
                            setEmailAccountsParams({
                                ...emailAccountsParams,
                                page: p
                            })
                        }}
                        setPerPage={(p) => {
                            setEmailAccountsParams({
                                ...emailAccountsParams,
                                page: 1,
                                page_size: p
                            })
                        }}
                        emailAccounts={emailAccounts}
                        updateEmailAccounts={updateEmailAccounts}
                    />
                }
            </div>
        </div>
    );
}

export default EmailAccountsList;