'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { useModal } from '@faceless-ui/modal';
import { getTranslation } from '@payloadcms/translations';
import { setsAreEqual } from 'payload/shared';
import React, { useCallback, useMemo, useState } from 'react';
import { CheckboxInput } from '../../../fields/Checkbox/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import { DrawerHeader } from '../../BulkUpload/Header/index.js';
import { Button } from '../../Button/index.js';
import { Drawer } from '../../Drawer/index.js';
import './index.scss';
const getLocaleOptions = ({ i18n, localization })=>{
    return localization.locales.map((locale)=>({
            label: getTranslation(locale.label, i18n),
            value: locale.code
        }));
};
const baseClass = 'select-locales-drawer';
export const SelectLocalesDrawer = ({ slug, localization, onConfirm })=>{
    const { i18n, t } = useTranslation();
    const { toggleModal } = useModal();
    const [selectedLocales, setSelectedLocales] = useState([]);
    const localeOptions = useMemo(()=>getLocaleOptions({
            i18n,
            localization
        }), [
        localization,
        i18n
    ]);
    const allLocales = useMemo(()=>localeOptions.map((locale)=>locale.value), [
        localeOptions
    ]);
    const allLocalesSelected = useMemo(()=>setsAreEqual(new Set(selectedLocales), new Set(allLocales)), [
        selectedLocales,
        allLocales
    ]);
    const handleSelectAll = useCallback(()=>{
        setSelectedLocales(allLocalesSelected ? [] : [
            ...allLocales
        ]);
    }, [
        allLocalesSelected,
        allLocales
    ]);
    const handleToggleLocale = useCallback((localeValue)=>{
        setSelectedLocales((prev)=>prev.includes(localeValue) ? prev.filter((l)=>l !== localeValue) : [
                ...prev,
                localeValue
            ]);
    }, []);
    const handleConfirm = useCallback(async ()=>{
        await onConfirm({
            selectedLocales
        });
        toggleModal(slug);
    }, [
        onConfirm,
        selectedLocales,
        slug,
        toggleModal
    ]);
    return /*#__PURE__*/ _jsxDEV(Drawer, {
        className: baseClass,
        gutter: false,
        Header: /*#__PURE__*/ _jsxDEV(DrawerHeader, {
            onClose: ()=>{
                toggleModal(slug);
            },
            title: `${t('general:duplicate')} ${t('localization:selectedLocales')}`
        }, void 0, false, {
            fileName: "src/elements/DuplicateDocument/SelectLocalesDrawer/index.tsx",
            lineNumber: 83,
            columnNumber: 9
        }, void 0),
        slug: slug,
        children: [
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__sub-header`,
                children: [
                    /*#__PURE__*/ _jsxDEV("span", {
                        children: t('localization:selectLocaleToDuplicate')
                    }, void 0, false, {
                        fileName: "src/elements/DuplicateDocument/SelectLocalesDrawer/index.tsx",
                        lineNumber: 93,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV(Button, {
                        buttonStyle: "primary",
                        disabled: selectedLocales.length === 0,
                        iconPosition: "left",
                        id: "#action-duplicate-confirm",
                        onClick: handleConfirm,
                        size: "medium",
                        children: t('general:duplicate')
                    }, void 0, false, {
                        fileName: "src/elements/DuplicateDocument/SelectLocalesDrawer/index.tsx",
                        lineNumber: 94,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/DuplicateDocument/SelectLocalesDrawer/index.tsx",
                lineNumber: 92,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__content`,
                children: [
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__item`,
                        children: /*#__PURE__*/ _jsxDEV(CheckboxInput, {
                            checked: allLocalesSelected,
                            id: "select-locale-all",
                            label: t('general:selectAll', {
                                count: allLocales.length,
                                label: t('general:locales')
                            }),
                            onToggle: handleSelectAll
                        }, void 0, false, {
                            fileName: "src/elements/DuplicateDocument/SelectLocalesDrawer/index.tsx",
                            lineNumber: 107,
                            columnNumber: 11
                        }, this)
                    }, void 0, false, {
                        fileName: "src/elements/DuplicateDocument/SelectLocalesDrawer/index.tsx",
                        lineNumber: 106,
                        columnNumber: 9
                    }, this),
                    localeOptions.map((locale)=>/*#__PURE__*/ _jsxDEV("div", {
                            className: `${baseClass}__item`,
                            children: /*#__PURE__*/ _jsxDEV(CheckboxInput, {
                                checked: selectedLocales.includes(locale.value),
                                id: `select-locale-${locale.value}`,
                                label: locale.label,
                                onToggle: ()=>handleToggleLocale(locale.value)
                            }, void 0, false, {
                                fileName: "src/elements/DuplicateDocument/SelectLocalesDrawer/index.tsx",
                                lineNumber: 119,
                                columnNumber: 13
                            }, this)
                        }, locale.value, false, {
                            fileName: "src/elements/DuplicateDocument/SelectLocalesDrawer/index.tsx",
                            lineNumber: 118,
                            columnNumber: 11
                        }, this))
                ]
            }, void 0, true, {
                fileName: "src/elements/DuplicateDocument/SelectLocalesDrawer/index.tsx",
                lineNumber: 105,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/DuplicateDocument/SelectLocalesDrawer/index.tsx",
        lineNumber: 79,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map