import React, { useEffect, useRef, useState } from 'react';
import { IconV3 } from '../assets/icon-v3';
import { enablePer } from '../helper';
import { useWindowWidth } from '../hooks/use-window-width';
import { eventBus } from '../utils/eventBus';
import { classNames } from '../../types';
import { PHXCard } from '../../Card';
import PHXFuncGetCookieSession from '../../Func/getCookieSession';
import QuickActionLibrary from './library';
import { PHXBottomAction } from '../../..';
export default function QuickAction({ currSchoolName, perCodes }) {
    const session = PHXFuncGetCookieSession();
    const actionPermisstions = session === null || session === void 0 ? void 0 : session.action_permission;
    const [show, setShow] = useState(false);
    const [showMore, setShowMore] = useState(false);
    const wrapperRef = useRef(null);
    const [selectedQuickAction, setSelectedQuickAction] = useState();
    const windowWidth = useWindowWidth();
    const [countShowItem, setCountShowItem] = useState(0);
    const data = [
        {
            name: 'Thư viện tiểu học',
            code: 'LIBRARY_TIEU_HOC',
            moduleCode: 'LIBRARY',
            quickActions: [
                {
                    name: 'Mượn sách',
                    code: 'LIBRARY_TIEU_HOC_BORROW_TICKET_CREATE',
                    icon: 'LIBRARY_BORROW_TICKET_CREATE',
                },
                {
                    name: 'Trả sách',
                    code: 'LIBRARY_TIEU_HOC_BORROW_TICKET_RETURN',
                    icon: 'LIBRARY_BORROW_TICKET_RETURN',
                },
            ],
        },
        {
            name: 'Thư viện trung học',
            code: 'LIBRARY_TRUNG_HOC',
            moduleCode: 'LIBRARY',
            quickActions: [
                {
                    name: 'Mượn sách',
                    code: 'LIBRARY_TRUNG_HOC_BORROW_TICKET_CREATE',
                    icon: 'LIBRARY_BORROW_TICKET_CREATE',
                },
                {
                    name: 'Trả sách',
                    code: 'LIBRARY_TRUNG_HOC_BORROW_TICKET_RETURN',
                    icon: 'LIBRARY_BORROW_TICKET_RETURN',
                },
            ],
        },
    ];
    useEffect(() => {
        const handleClickOutside = (event) => {
            var _a;
            if (wrapperRef.current && !((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
                setShowMore(false);
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [wrapperRef]);
    useEffect(() => {
        // Phần này để tính toán lại khoảng trống còn lại cho hiển thị item của quick action
        const breakPoint = 1024;
        const itemWidth = 132;
        const schoolNameLengthByPx = 7; // 1 chữ cái là 7px
        const logoSectionWidth = 140;
        const searchBarWidth = windowWidth >= breakPoint ? 300 : 0;
        const buffer = 100;
        const toltalItem = data.length;
        const quickActionWidth = Math.round((windowWidth - logoSectionWidth - searchBarWidth) / (windowWidth >= breakPoint ? 2 : 1) -
            currSchoolName.length * schoolNameLengthByPx -
            buffer);
        const toltalItemShowQuickAction = Math.round(quickActionWidth < 0 ? 0 : quickActionWidth / itemWidth);
        setCountShowItem(toltalItemShowQuickAction > toltalItem ? toltalItem : toltalItemShowQuickAction);
    }, [windowWidth]);
    return perCodes.length > 0 && actionPermisstions ? (React.createElement("div", null,
        React.createElement(QuickActionLibrary, null),
        React.createElement("div", { className: 'flex h-[1.625rem] gap-1.5' },
            data.slice(0, countShowItem).map((item) => {
                // disabled khi ko có quyền module hoặc ko có quyền ở tất cả các action
                const isDisabled = !enablePer(item.code, perCodes) || item.quickActions.every((action) => !actionPermisstions[action.code]);
                // @ts-ignore
                const Icon = IconV3[item.code];
                return (React.createElement("button", { key: item.code, className: classNames('inline-flex w-fit shrink-0 items-center gap-x-1 whitespace-nowrap rounded-lg px-2 text-xxs font-[450]', isDisabled
                        ? 'cursor-not-allowed bg-[#F1F1F1] text-gray-400'
                        : 'cursor-pointer bg-[#F1F1F1] text-gray-600 hover:bg-white hover:text-gray-900'), onClick: () => {
                        if (!isDisabled) {
                            setSelectedQuickAction(item);
                            setShow(true);
                        }
                    }, type: 'button' },
                    React.createElement("span", { className: 'flex h-[0.875rem] w-[0.875rem] items-center justify-center' },
                        React.createElement(Icon, null)),
                    React.createElement("span", null, item.name)));
            }),
            countShowItem !== data.length && (React.createElement("div", { ref: wrapperRef, className: 'relative hidden h-full shrink-0 sm:block' },
                React.createElement("button", { key: 'show_more', className: classNames('inline-flex h-full w-fit cursor-pointer items-center gap-x-1 whitespace-nowrap rounded-lg bg-[#F1F1F1] px-2 text-xxs font-[450] text-gray-600 hover:bg-white hover:text-gray-900', showMore ? 'bg-white' : ''), onClick: () => {
                        setShowMore(!showMore);
                    }, type: 'button' },
                    React.createElement("span", null, "Xem th\u00EAm"),
                    React.createElement("svg", { className: classNames(' transition-all', showMore ? '-rotate-180' : ''), fill: 'none', height: '16', viewBox: '0 0 16 16', width: '16', xmlns: 'http://www.w3.org/2000/svg' },
                        React.createElement("path", { clipRule: 'evenodd', d: 'M4.57576 6.77535C4.81007 6.54103 5.18997 6.54103 5.42429 6.77535L8.20002 9.55108L10.9758 6.77535C11.2101 6.54103 11.59 6.54103 11.8243 6.77535C12.0586 7.00966 12.0586 7.38956 11.8243 7.62387L8.62429 10.8239C8.38997 11.0582 8.01007 11.0582 7.77576 10.8239L4.57576 7.62387C4.34145 7.38956 4.34145 7.00966 4.57576 6.77535Z', fill: '#6B7280', fillRule: 'evenodd' }))),
                showMore && (React.createElement("div", { className: 'absolute left-0 top-8 inline-block w-max' },
                    React.createElement(PHXCard, { primaryHeader: true, title: 'Ch\u1ECDn nhanh' },
                        React.createElement("div", { className: 'flex max-h-[400px] flex-col gap-y-1 overflow-y-auto' }, data.slice(countShowItem).map((action) => {
                            // @ts-ignore
                            const IconAction = IconV3[action.code];
                            const isDisabled = !enablePer(action.code, perCodes) ||
                                action.quickActions.every((item) => !actionPermisstions[item.code]);
                            return (React.createElement("button", { key: `${action.code}_more`, className: classNames('flex min-w-full items-center gap-x-1.5 rounded-lg px-2 py-1.5 text-xs  ', isDisabled ? 'cursor-not-allowed text-gray-400' : 'text-gray-900 hover:bg-[#EBEBEB]'), onClick: () => {
                                    if (!isDisabled) {
                                        setSelectedQuickAction(action);
                                        setShow(true);
                                        setShowMore(false);
                                    }
                                }, type: 'button' },
                                React.createElement("span", { className: 'h-[1.125rem] w-[1.125rem]' },
                                    React.createElement(IconAction, null)),
                                React.createElement("span", null, action.name)));
                        })))))))),
        React.createElement(PHXBottomAction, { actions: (selectedQuickAction === null || selectedQuickAction === void 0 ? void 0 : selectedQuickAction.quickActions.filter((action) => actionPermisstions[action.code]).map((action) => {
                // @ts-ignore
                const IconAction = IconV3[action.icon];
                return {
                    name: action.name,
                    onClick: () => {
                        eventBus.emit(selectedQuickAction.moduleCode, action);
                        setShow(false);
                    },
                    icon: React.createElement(IconAction, null),
                };
            })) || [], name: (selectedQuickAction === null || selectedQuickAction === void 0 ? void 0 : selectedQuickAction.name) || '', onHide: () => setShow(false), show: show }))) : (React.createElement(React.Fragment, null));
}
//# sourceMappingURL=quick-action.js.map