import React, { Fragment, useEffect, useState } from 'react';
import { Combobox, Dialog, Transition } from '@headlessui/react';
import { PHXSpinner } from '../../Loading';
import PHXFuncGetLoggedInfo from '../../Func/getLoginInfo';
import { KEY_PROFILE_STUDENT, KEY_PARENT_STUDENT, ROLE_SV, ROLE_TEACHER, KEY_PROFILE_TEACHER, } from '../../../utils/constants';
import { PHXBadge } from '../../Badge';
import PHXUseDebounce from '../../Func/useDebounce';
import { PHXClientQueryV3 } from '../../Func/GRPC/PHXGrpcClientV3';
import { querySearchGlobalV3 } from '../../../query';
export default function SearchDetail({ open, onClose }) {
    const schoolInfo = PHXFuncGetLoggedInfo();
    const schoolId = schoolInfo === null || schoolInfo === void 0 ? void 0 : schoolInfo.school_id;
    const [query, setQuery] = useState('');
    const handleChange = (event) => {
        setQuery(event.target.value);
    };
    const [isLoading, setIsLoading] = useState(false);
    const [resultGlobal, setResultGlobal] = useState();
    const handleClickResult = (id, module) => {
        const urlMap = {
            [KEY_PROFILE_STUDENT]: `/user/students/edit/${id}`,
            [KEY_PARENT_STUDENT]: `/user/parent/edit/${id}`,
            [KEY_PROFILE_TEACHER]: `/user/teacher/edit/${id}`,
        };
        const url = urlMap[module];
        if (url) {
            window.location.replace(url);
        }
    };
    const searchDebout = PHXUseDebounce(query, 300);
    const handleSearchGlobale = async () => {
        setIsLoading(true);
        try {
            const response = await PHXClientQueryV3({
                query: querySearchGlobalV3,
                variables: {
                    school_id: schoolId,
                    searchValue: query && `${searchDebout}`,
                },
            });
            if (response.data) {
                setResultGlobal(response.data);
                setIsLoading(false);
            }
        }
        catch (error) {
            console.log(error);
            setIsLoading(false);
        }
    };
    useEffect(() => {
        if (searchDebout) {
            handleSearchGlobale();
        }
    }, [searchDebout]);
    const hasData = resultGlobal && Object.values(resultGlobal).flat().length > 0;
    const allArraysEmpty = resultGlobal && Object.values(resultGlobal).every((arr) => arr.length === 0);
    const noDataMessage = query !== '' && (resultGlobal === undefined || allArraysEmpty);
    return (React.createElement(Transition.Root, { show: open, as: Fragment, appear: true },
        React.createElement(Dialog, { as: 'div', className: 'relative z-50', onClose: onClose },
            React.createElement(Transition.Child, { as: Fragment, enter: 'ease-out duration-300', enterFrom: 'opacity-0', enterTo: 'opacity-100', leave: 'ease-in duration-200', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
                React.createElement("div", { className: 'fixed inset-0 transition-opacity' })),
            React.createElement("div", { className: 'fixed inset-0 z-50 pt-1.5 overflow-y-auto sm:block hidden' },
                React.createElement(Transition.Child, { as: Fragment, enter: 'ease-out duration-200', enterFrom: 'opacity-0 scale-95', enterTo: 'opacity-100 scale-100', leave: 'ease-in duration-100', leaveFrom: 'opacity-100 scale-100', leaveTo: 'opacity-0 scale-95' },
                    React.createElement(Dialog.Panel, { className: 'mx-auto p-2 max-w-2xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all' },
                        React.createElement(Combobox, null,
                            React.createElement("div", { className: 'flex items-center' },
                                React.createElement(Combobox.Input, { className: 'relative block w-full rounded-lg border border-gray-500 px-3 py-1.5 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', placeholder: 'T\u00ECm ki\u1EBFm', onChange: (event) => handleChange(event) }),
                                isLoading ? (React.createElement("div", { className: 'flex justify-center ml-[-2rem]' },
                                    React.createElement(PHXSpinner, null))) : (React.createElement(React.Fragment, null))),
                            React.createElement(React.Fragment, null,
                                query === '' && !hasData && (React.createElement("div", { className: 'px-6 py-14 text-center text-sm sm:px-14' },
                                    React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', strokeWidth: '1.5', stroke: 'currentColor', className: 'w-4 h-4 mx-auto' },
                                        React.createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' })),
                                    React.createElement("p", { className: 'mt-3' }, "T\u00ECm ki\u1EBFm t\u00EAn ho\u1EB7c m\u00E3 h\u1ECDc sinh"))),
                                React.createElement(React.Fragment, null,
                                    noDataMessage && (React.createElement("div", { className: 'border-t border-gray-100 px-6 py-14 text-center text-sm sm:px-14' },
                                        React.createElement("p", { className: 'mt-2' }, "Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3 n\u00E0o."))),
                                    React.createElement("div", { className: `overflow-y-auto min-h-[10rem] ${hasData ? '' : 'hidden'}` }, resultGlobal &&
                                        Object.entries(resultGlobal).map(([key, value]) => {
                                            return (React.createElement(React.Fragment, null, value.map((item) => {
                                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
                                                const keyModule = key;
                                                const userId = item.id || item.user.id || ((_c = (_b = (_a = item.user) === null || _a === void 0 ? void 0 : _a.relationshipUsersByStudentId) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.user.id);
                                                return (React.createElement("div", { "aria-hidden": true, key: item.id, className: 'flex items-center gap-x-4 mt-2 hover:bg-gray-100 px-2 cursor-pointer rounded-md', onClick: () => handleClickResult(userId, keyModule) },
                                                    React.createElement("div", { className: 'flex flex-col p-2' },
                                                        React.createElement("div", { className: 'flex flex-row space-x-2' },
                                                            React.createElement("p", { className: 'text-xs' }, item.user.full_name),
                                                            ((_e = (_d = item === null || item === void 0 ? void 0 : item.user) === null || _d === void 0 ? void 0 : _d.user_roles) === null || _e === void 0 ? void 0 : _e.length) > 0 &&
                                                                ((_g = (_f = item === null || item === void 0 ? void 0 : item.user) === null || _f === void 0 ? void 0 : _f.user_roles) === null || _g === void 0 ? void 0 : _g.map((role, index) => (React.createElement(PHXBadge, { key: index, type: 'informational', text: role.role.name }))))),
                                                        ((_j = (_h = item === null || item === void 0 ? void 0 : item.user) === null || _h === void 0 ? void 0 : _h.user_roles) === null || _j === void 0 ? void 0 : _j[0].role.role_code) === ROLE_SV ? (React.createElement("p", { className: 'text-xs text-gray-600 mt-1' },
                                                            item.user.classroom_students.length > 0
                                                                ? `Lớp ${(_o = (_m = (_l = (_k = item.user.classroom_students) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.classroom) === null || _m === void 0 ? void 0 : _m.name) !== null && _o !== void 0 ? _o : ''} -`
                                                                : '',
                                                            ' ', item === null || item === void 0 ? void 0 :
                                                            item.user_code)) : ((_q = (_p = item === null || item === void 0 ? void 0 : item.user) === null || _p === void 0 ? void 0 : _p.user_roles) === null || _q === void 0 ? void 0 : _q[0].role.role_code) === ROLE_TEACHER ? (React.createElement("p", { className: 'text-xs text-gray-600 mt-1' }, (_r = item === null || item === void 0 ? void 0 : item.user) === null || _r === void 0 ? void 0 :
                                                            _r.email,
                                                            " - ", (_s = item === null || item === void 0 ? void 0 : item.user) === null || _s === void 0 ? void 0 :
                                                            _s.phone_number,
                                                            ((_t = item.user) === null || _t === void 0 ? void 0 : _t.relationship_users.length) > 0 ? 'PH học sinh' : '',
                                                            ' ', (_v = (_u = item.user) === null || _u === void 0 ? void 0 : _u.relationship_users) === null || _v === void 0 ? void 0 :
                                                            _v.map((student, index) => {
                                                                var _a, _b, _c, _d;
                                                                return (React.createElement(React.Fragment, { key: (_a = student === null || student === void 0 ? void 0 : student.userByStudentId) === null || _a === void 0 ? void 0 : _a.id },
                                                                    React.createElement("span", null, (_b = student === null || student === void 0 ? void 0 : student.userByStudentId) === null || _b === void 0 ? void 0 : _b.full_name),
                                                                    index < ((_d = (_c = item === null || item === void 0 ? void 0 : item.user) === null || _c === void 0 ? void 0 : _c.relationship_users) === null || _d === void 0 ? void 0 : _d.length) - 1 && ', '));
                                                            }))) : (React.createElement("p", { className: 'text-xs text-gray-600 mt-1' },
                                                            ((_w = item.user) === null || _w === void 0 ? void 0 : _w.relationship_users.length) > 0 ? 'PH học sinh' : '',
                                                            ' ', (_y = (_x = item.user) === null || _x === void 0 ? void 0 : _x.relationship_users) === null || _y === void 0 ? void 0 :
                                                            _y.map((student, index) => {
                                                                var _a, _b, _c, _d;
                                                                return (React.createElement(React.Fragment, { key: (_a = student === null || student === void 0 ? void 0 : student.userByStudentId) === null || _a === void 0 ? void 0 : _a.id },
                                                                    React.createElement("span", null, (_b = student === null || student === void 0 ? void 0 : student.userByStudentId) === null || _b === void 0 ? void 0 : _b.full_name),
                                                                    index < ((_d = (_c = item === null || item === void 0 ? void 0 : item.user) === null || _c === void 0 ? void 0 : _c.relationship_users) === null || _d === void 0 ? void 0 : _d.length) - 1 && ', '));
                                                            }))))));
                                            })));
                                        })))))))))));
}
//# sourceMappingURL=search-bar.js.map